JS的call、apply和bind

all 和 apply 都是为了改变某个函数运行时的上下文而存在的，换句话说，就是为了改变作用的对象的指向。

上下文表示的是 this 这个对象活动的范围(也影响了this的指向，但两者是不同的概念)。

除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组。

let a = {
    value: 1
}
function getValue(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}
getValue.call(a, 'yck', '24')
getValue.apply(a, ['yck', '24'])

模拟实现 call

步骤：

1. 将函数设为对象的属性
2. 执行该函数
3. 删除该函数

Function.prototype.call2 = function (context) {
    // this 参数可以传 null，当为 null 的时候，视为指向 window
    var context = context || window;
    context.fn = this;

    // 从 Arguments 对象中取值，取出第二个到最后一个参数，然后放到一个数组
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
		// 用 eval 方法拼成一个函数， args 会自动调用 Array.toString()
    var result = eval('context.fn(' + args +')');

    delete context.fn;
		// 函数可以有返回值
    return result;
}

模拟实现 apply

apply 的实现跟 call 类似

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    } else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn
    return result;
}

example：使用 call 模拟实现 map()

Array.prototype._map = function(fn, context) {
    var temp = [];
    if(typeof fn == 'function') {
        var k = 0;
        var len = this.length;
        // 封装for循环过程
        for(; k < len; k++) {
            // 将每一项的运算操作丢进fn里，利用call方法指定fn的this指向与具体参数
            temp.push(fn.call(context, this[k], k, this))
        }
    } else {
        console.error('TypeError: '+ fn +' is not a function.');
    }

    // 返回每一项运算结果组成的新数组
    return temp;
}

var newArr = [1, 2, 3, 4]._map(function(item) {
    return item + 1;
})
// [2, 3, 4, 5]

这里运用了 currying （科里化）。

模拟实现 bind

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。( MDN )

可以首先得出 bind 函数的两个特点：

1. 返回一个函数
2. 可以传入参数

1. 模拟实现返回函数

Bind方法可以返回一个函数，例子如下:

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

// 返回了一个函数
var bindFoo = bar.bind(foo); 

bindFoo(); // 1

关于指定 this 的指向，可以用 call 或 apply 实现。

Function.prototype.myBind = function (context) {
    var self = this;
    return function () {
        return self.apply(context);
    }
}

2. 模拟实现传参

Bind 的时候可以传参，并且在执行bind 返回的函数也可以传参。

var foo = {
    value: 1
};

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

var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

模拟实现如下：

Function.prototype.bind2 = function (context) {
    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);

    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(context, args.concat(bindArgs));
    }
}

模拟实现构造函数

bind 还有一个特点，就是

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效。

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefind，说明绑定的 this 失效了，这个时候的 this 已经指向了 obj。

所以我们可以通过修改返回的函数的原型来实现

Function.prototype.myBind = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值
        // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
        return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
    fBound.prototype = this.prototype;
    return fBound;
}

但是在这个写法中，我们直接将 fBound.prototype = this.prototype ，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。这个时候，我们可以通过一个空函数来进行中转：

Function.prototype.myBind = function (context) {
	  if (typeof this !== 'function') {
    	throw new TypeError('Error')
  	  }
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

Reference:

• 前端高手必备：详解 JavaScript 柯里化 - 前端 - 掘金
• Function.prototype.call() - JavaScript | MDN
• JavaScript深入之bind的模拟实现 · Issue #12 · mqyqingfeng/Blog · GitHub
• 不能使用call,apply,bind，如何用js实现call或者apply的功能？ - 知乎