01-call、apply、bind 的深度解析

#调用形式示例#

// 测试一下
var value = 2;

var obj = {
    value: 1
}

function bar(name, age) {
    console.log(this.value);
    return {
        value: this.value,
        name: name,
        age: age
    }
}

 1、bar.call

bar.call(null, 'zhangguan', '29')

// 输出
{
    value: 2, 
    name: 'zhangguan', 
    age: '29'
}

bar.call(obj, 'zhangguna', '29')

// 输出
{
    value: 1, 
    name: 'zhangguan', 
    age: '29'
}

2、bar.apply

bar.apply(null, ['zhangguan', '29'])


// 输出
{
    value: 2, 
    name: 'zhangguan', 
    age: '29'
}

bar.apply(obj, ['zhangguan', '29'])

// 输出
{
    value: 1, 
    name: 'zhangguan', 
    age: '29'
}

3、bar.bind

const bindFun = bar.bind(null, 'zhangguan');

// bind 返回的函数 作为普通函数调用
// 输入
let a = bindFun('29'); 
console.log(a)

// 输出
{
    value: 2, 
    name: 'zhangguan', 
    age: '29'
}

// bind 返回的函数 作为构造函数调用，绑定的 this 值obj会失效，this指向实例对象a
// 输入
let a = new bindFun('29'); 
console.log(a)

// 输出
{
    value: undefined, 
    name: 'zhangguan', 
    age: '29'
}

#异同点# 

1、相同作用：

• call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向
• call、apply、bind是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。
• 第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window

2、 差异用法：

• call和apply唯一的区别是：call传入的是参数列表，apply传入的是数组，也可以是类数组
• bind和call、apply的区别： bind返回的是一个改变了this指向的函数，便于稍后调用，不像call和apply会立即调用；bind和call很像，传入的也是参数列表，但是可以多次传入，不需要像call，一次传入
• 注意：当 bind 返回的函数 使用new作为构造函数时，绑定的 this 值会失效，this指向实例对象，但传入的参数依然生效 （new调用的优先级 > bind调用）

#代码实现# 

1、call

Function.prototype.call = function(context, ...args){
    ctx = context|| window;
    let fn = Symbol();
    ctx[fn] = this; // 这里的this为调用call的函数本身
    const res = ctx[fn](...args);
    delete ctx[fn];
    return res;
}

2、apply

Function.prototype.apply = function (context) {
    ctx = context || window;
    let fn = Symbol();
    ctx[fn] = this;
    let res;
    if (arguments[1]) {
      res = ctx[fn](...arguments[1]);
    } else {
      res = ctx[fn]();
    }
    delete ctx[fn];
    return res;
};

3、bind 代码实现见：02-bind的深度解析和实现

#使用指南# 

• 如果不需要关心具体有多少参数被传入函数，选用apply()；
• 如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()；
• 如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用bind();