前端面试-JS中的call,apply,bind与原生实现（bind重点）

前端面试-JS中的call,apply,bind与原生实现

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向

• 相同点：

1.都是用来改变函数的this对象的指向的；

2.第一个参数都是this要指向的对象；

3.可以利用后续参数传参；

• 不同点：

1.bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

2.call()方法和apply()方法的作用相同，区别仅在于接受参数的方式不同。

3.call、apply、bind方法的共同点：

1.原生实现call

• 原生call方法的使用方式为fn.call(context,…args)
• call方法的调用者为函数，因此应该定义在Function的原型上
• 相当于给context添加属性fn
• 由于call方法改变this指向后会立即执行，因此需要返回执行后的函数
• 使用Symbol可以防止属性冲突

//最简单的实现方式
        Function.prototype.myCall = (context, ...args) => {
            const fn = Symbol()
            context[fn] = this
            const result = context[fn](...args)
            return result
        }

//考虑调用者类型
Function.prototype.myCall = function(context, ...args) {
    if(this === Function.prototype) {//判断当前this是否为函数
        return undefined;//用于防止 Function.prototype.myCall()  直接调用
    }

    // console.log(this);//此处的this指向foo,因为是foo调用的（隐式绑定规则）

    context? context : window    //context为可选的参数，如果不传的话默认上下文为window

    const fn = Symbol();   //为context创建一个Symbol属性
    context[fn] = this;   //将当前调用myCall的函数赋值给这个属性
    // console.log(context[fn]);

    const result = context[fn](...args); //处理参数，传入第一个参数后的其余参数,这里可以理解为obj.foo(...args)

    delete context[fn]  //调用函数后即删除该Symbol属性
    return result
}

2.原生实现apply

• 利用arguments实现，不要写箭头函数

        Function.prototype.myApply = function (context) {
            context ? context : window
            const fn = Symbol()
            context[fn] = this
            let result
            if (arguments[1]) {
                result = context[fn](...arguments[1])
            } else {
                result = context[fn]()
            }
            delete context[fn]
            return result
        }

3.原生实现bind

• bind不需要立即执行
  参考文章