JS原生方法（Object篇、Function篇）

在实际开发中，或许我们会使用很多JavaScript自带的方法，而且这些方法确实给我们带来了很多便利，大大提高了我们的代码小路，但是，有没有一瞬间，你想知道这些方法到底是怎么实现的呢？接下来我将用几篇博客来进行了解

通过这篇文章可以学到什么呢？

1. 重新巩固对象与函数各种方法的使用方式
2. 巩固基础，即便没有这些方法，也能靠基础语法去实现

定义一个测试对象[Object]

const obj = {
    name: '阿磊',
    age: 24,
    gender: '男'
}

Entries

用处：将对象转换为键值对数组。

Object.prototype.entries = function (obj) {
    const res = []
    for (let key in obj) {
        obj.hasOwnProperty(key) && res.push([key, obj[key]])
    }
    return res
}

console.log(Object.entries(obj))
// [ [ 'name', '阿磊' ], [ 'age', 24 ], [ 'gender', '男' ] ]

FromEntries

用处：跟 Entries 相反，将键值对数组转换为对象。

Object.prototype.fromEntries = function (arr) {
    const obj = {}
    for (let i = 0; i < arr.length; i++) {
        const [key, value] = arr[i]
        obj[key] = value
    }
    return obj
}

console.log(Object.fromEntries([['name', '阿磊'], ['age', 24], ['gender', '男']]))
// { name: '阿磊', age: 24, gender: '男' }

Keys

用处：将对象的 key 转换成一个数组合集。

Object.prototype.keys = function (obj) {
    const keys = []
    for (let key in obj) {
        obj.hasOwnProperty(key) && res.push(key)
    }
    return keys
}

console.log(Object.keys(obj))
// [ 'name', 'age', 'gender' ]

Values

用处：将对象的所有值转换成一个数组合集。

Object.prototype.values = function (obj) {
    const values = []
    for (let key in obj) {
        obj.hasOwnProperty(key) && values.push(obj[key])
    }
    return values
}

console.log(Object.values(obj))
// [ '阿磊', 24, '男' ]

InstanceOf

用处：A instanceOf B，判断A是否经过B的原型链。

function instanceOf(father, child) {
    const fp = father.prototype
    var cp = child.__proto__

    while (cp) {
        if (cp === fp) {
            return true
        }
        cp = cp.__proto__
    }

    return false
}

function Person(name) {
    this.name = name
}
const Alei = new Person('阿磊')

console.log(instanceOf(Person, Alei )) // true
console.log(instanceOf(Person, Alei2)) // false

Is

用处：Object（a，b），判断a是否等于b。

Object.prototype.is = function (x, y) {
    if (x === y) {
        // 防止 -0 和 +0
        return x !== 0 || 1 / x === 1 / y
    }

    // 防止NaN
    return x !== x && y !== y
}

const a = { name: '阿磊' }
const b = a
const c = { name: '阿磊' }

console.log(Object.is(a, b)) // true
console.log(Object.is(a, c)) // false

函数[Function]

Call

Function.prototype.call = function (obj, ...args) {
    obj = obj || window

    // Symbol是唯一的，防止重名key
    const fn = Symbol()
    obj[fn] = this

    // 执行，返回执行值
    return obj[fn](...args)
}

const testobj = {
    name: '阿磊',
    testFn(age) {
        console.log(`${this.name}${age}岁了`)
    }
}
const testobj2 = {
    name: 'Alei阿磊'
}

testobj.testFn.call(testobj2, 24) // Alei阿磊24岁了

Apply

Function.prototype.apply = function (obj, args) {
    obj = obj || window

    // Symbol是唯一的，防止重名key
    const fn = Symbol()
    obj[fn] = this

    // 执行，返回执行值
    return obj[fn](...args)
}

const testobj = {
    name: '阿磊',
    testFn(age) {
        console.log(`${this.name}${age}岁了`)
    }
}
const testobj2 = {
    name: 'Alei阿磊'
}

testobj.testFn.apply(testobj2, [24]) // Alei阿磊24岁了

JS原生其他方法

JS原生（数组篇）
JS原生（String篇、Promise篇）

结束语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下阿磊哈哈。