谈谈JavaScript中的call、apply和bind

在JavaScript中，若是想要改变当前函数调用的上下文对象的时候，咱们都会联想到call、apply和bind。好比下面👇

var name = 'window name';
var obj = {
    name: 'call_me_R'
};
function sayName(){
    console.log(this.name);
}
sayName(); // window name
sayName.call(obj); // call_me_R
复制代码

那么，call, apply和bind有什么区别呢？

call，apply和bind的区别

在说区别以前，先简单的说下三者的共同之处吧：

1. 都是用来改变函数的this对象的指向
2. 第一个参数都是this要指向的对象
3. 均可以利用后续参数进行传参

下面说下区别：

参数的传递

参考下MDN web docs -- Function:

call方法传参是传一个或者是多个参数，第一个参数是指定的对象，如开篇的obj。

func.call(thisArg, arg1, arg2, ...)
复制代码

apply方法传参是传一个或两个参数，第一个参数是指定的对象，第二个参数是一个数组或者类数组对象。

func.apply(thisArg, [argsArray])
复制代码

bind方法传参是传一个或者多个参数，跟call方法传递参数同样。

func.bind(this.thisArg, arg1, arg2, ...)
复制代码

简言之，call和bind传参同样；apply若是要传第二个参数的话，应该传递一个类数组。

调用后是否立执行

call和apply在函数调用它们以后，会当即执行这个函数；而函数调用bind以后，会返回调用函数的引用，若是要执行的话，须要执行返回的函数引用。

变更下开篇的demo代码，会比较容易理解：

var name = 'window name';
var obj = {
    name: 'call_me_R'
};
function sayName(){
    console.log(this.name);
}
sayName(); // window name
sayName.call(obj); // call_me_R
sayName.apply(obj); // call_me_R
console.log('---divided line---');
var _sayName = sayName.bind(obj);
_sayName(); // call_me_R
复制代码

在笔者看来，call, apply 和 bind的区分点主要是上面的这两点，欢迎有想法的读者进行补充～😊

手写call, apply, bind方法

这里是简单的实现下相关方法的封装，为了简洁，我这里尽可能使用了ES6的语法进行编写，详细的参考代码能够直接戳airuikun大牛的airuikun/Weekly-FE-Interview issues。

call方法实现

在上面的了解中，咱们很清楚了call的传参格式和调用执行方式，那么就有了下面的实现方法：

Function.prototype.call2 = function(context, ...args){
	context = context || window; // 由于传递过来的context有多是null
	context.fn = this; // 让fn的上下文为context
	const result = context.fn(...args);
	delete context.fn;
	return result; // 由于有可能this函数会有返回值return
}
复制代码

咱们来测试下：

var name = 'window name';
var obj = {
    name: 'call_me_R'
};

// Function.prototype.call2 is here ...

function sayName(a){
    console.log(a + this.name);
    return this;
}
sayName(''); // window name
var _this = sayName.call2(obj, 'hello '); // hello call_me_R
console.log(_this); // {name: "call_me_R"}
复制代码

apply方法实现

apply方法和call方法差很少，区分点是apply第二个参数是传递数组:

Function.prototype.apply2 = function(context, arr){
    context = context || window; // 由于传递过来的context有多是null
    context.fn = this; // 让fn的上下文为context
    arr = arr || []; // 对传进来的数组参数进行处理
    const result = context.fn(...arr); // 至关于context.fn(arguments[1], arguments[2], ...)
    delete context.fn;
    return result; // 由于有可能this函数会有返回值return
}
复制代码

一样的，咱们来测试下：

var name = 'window name';
var obj = {
    name: 'call_me_R'
};

// Function.prototype.apply2 is here ...

function sayName(){
    console.log((arguments[0] || '') + this.name);
    return this;
}
sayName(); // window name
var _this = sayName.apply2(obj, ['hello ']); // hello call_me_R
console.log(_this); // {name: "call_me_R"}
复制代码

bind方法实现

bind的实现和上面的两种就有些差异，虽然和call传参相同，可是bind被调用后返回的是调用函数的指针。那么，这就说明bind内部是返回一个函数，思路打开了：

Function.prototype.bind2 = function(context, ...args){
    var fn = this; 
    return function () { // 这里不能使用箭头函数，否则参数arguments的指向就很尴尬了，指向父函数的参数
        fn.call(context, ...args, ...arguments);
    }
}
复制代码

咱们仍是来测试一下：

var name = 'window name';
var obj = {
    name: 'call_me_R'
};

// Function.prototype.bind2 is here ...

function sayName(){
    console.log((arguments[0] || '') + this.name + (arguments[1] || ''));
}
sayName(); // window name
sayName.bind2(obj, 'hello ')(); // hello call_me_R
sayName.bind2(obj, 'hello ')('!'); // hello call_me_R!
复制代码

美滋滋😄，成功地简单实现了call、apply和bind的方法，那么你可能会对上面的某些代码有疑问❓

疑惑点

1. 问：call中为何说 context.fn = this; // 让fn的上下文为context 呢？

答：

咱们先来看看下面这段代码--

var name = 'window name';
var obj = {
    name: 'call_me_R',
    sayHi: function() {
        console.log('Hello ' + this.name);
    }
};
obj.sayHi(); // Hello call_me_R
window.fn = obj.sayHi;
window.fn(); // Hello window name
复制代码

嗯，神奇了一丢丢，操做window.fn = obj.sayHi;改变了this的指向，也就是this由指向obj改成指向window了。

简单来讲：this的值并非由函数定义放在哪一个对象里面决定的，而是函数执行时由谁来唤起来决定的。

2. 问：bind中返回的参数为何是传递(context, ...args, ...arguments)， 而不是(context, ...args)呢？

答：

这是为了包含返回函数也能传参的状况，也就是bind()()中的第二个括号能够传递参数。

call和apply哪一个好？

据调查--call和apply的性能对比，在分不一样传参的状况下，call的性能是优于apply的。不过在现代的高版本浏览器上面，二者的差别并不大。

而在兼容性方面，二者都好啦，别说IE了哈。

在使用的方面仍是得按照需求来使用call和apply，毕竟技术都在更新。适合业务的就是最好的～囧

后话

文章首发：github.com/reng99/blog…

更多内容：github.com/reng99/blog…

客官能够star下github的博文仓库否，欢迎提意见共同成长啊～😄

参考

MDN web docs -- Function

airuikun/Weekly-FE-Interview issues

《JavaScript高级程序设计》