JavaScript 的 call()、apply()、bind() 详解

小咪咪 2022-05-25 22:09 223阅读 0赞

> 文章是本人大三期间的学习笔记，一些论断取自书籍和网上博客，碍于当时的技术水平有一些写得不够好的地方，可以在评论处理智讨论~

在 JavaScript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

究竟怎么来改变 this 指向，以及怎么应用，我们先来看下面这个问题。

#### 问题 ####

--------------------

var a = "global scope!";
    var obj = {
    	a: "obj scope!",
    	foo: function() {
    		console.log(this.a);
    	}
    }
    var bar = obj.foo;
    bar();		//'global scope!'

这是经典的 this 隐式丢失问题。（关于 this 的基本概念，可以移步 [this 的4条绑定规则及优先级][this _4]）

上面问题的形成原因，大致可以这么解释：首先我们知道 JavaScript 的函数是引用类型，`var bar = obj.foo` 的赋值实际上是对函数本身的引用赋值，转化一下上面的赋值可以转换为 `var bar = function() {...}`，因此此时的 bar() 其实是一个不带任何修饰的函数调用，符合 [this 4种绑定规则][this _4] 中的默认绑定，从而把 this 绑定到全局对象（非严格模式）或者 undefined（严格模式） 上。

call()、apply()、bind() 正是解决这种问题的方法。它们的第一个参数是一个对象，是给 this 准备的，接着在调用函数时将其绑定到 this。

#### apply 和 call 的区别 ####

--------------------

这两者在作用上是一样的，它们的区别在于它们接受的参数不一样。

首先，让我们来看一看，怎么利用这两个函数解决上面的问题。

var a = "global scope!";
    var obj = {
    	a: "obj scope!",
    	foo: function() {
    		console.log(this.a);
    	}
    }
    var bar = obj.foo;
    //使用 apply
    bar.apply(obj);	//'obj scope!'
    //使用 call
    bar.call(obj);	//'obj scope!'

通过 `bar.apply(obj)`、`bar.apply(obj)` ，我们可以在调用 bar 时强制把它的 this 绑定到 obj 上了。

> 从 this 绑定的角度来说，`apply(...)` 和 `call(...)`是一样的，它们的区别体现在其他函数上。

比如，有一个这样的函数：

function foo(x, y) {
    	console.log(x + y);
    }

我们就可以这样子调用：

foo.apply(null, [1, 2]);	//3
    foo.call(null, 1, 2);		//3

其中第一个参数（这里设置的是 null，关于 null 可以接着往下看）是你想指定的上下文，它可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要**把参数按顺序传递进去**，而 apply 则是**把参数放在数组里传递进去**。

function foo(arg1, arg2, arg3 ...) {...}
    
    foo.apply(thisArg, [arg1, arg2, arg3...]);
    foo.call(thisArg, arg1, arg2, arg3);

> 手册往这走: [apply()][apply] 、[call()][call]

此外还有一点，**call、apply 的第一个参数可以设置为 undefined、null 或者为空，在`非严格模式`下，可以使 this 指向全局对象(如果在浏览器里就是 window)，在`严格模式`下，绑定到 undefined上**。

var a = 'global';
    function foo() {
    	console.log(this.a);
    }
    foo.call();			//global
    foo.call(null);		//global
    foo.call(undefined);//global

#### bind() ####

--------------------

`bind()` 是 ES5 新增的方法，它的作用与 `call()`、`apply()` 大体一致，不一样的是 `bind()` 会返回一个函数，可以便于稍后调用。  
下面是 MDN 对 bind() 的解释：

> `bind()` 方法创建一个新的函数, 当被调用时，将其 `this` 关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

用 bind() 改写上面的例子：

var a = "global scope!";
    var obj = {
    	a: "obj scope!",
    	foo: function() {
    		console.log(this.a);
    	}
    }
    var bar = obj.foo;	//这是待绑定的函数
    
    //使用 bind
    var baz = bar.bind(obj);
    baz();	//通过调用 baz() 来调用 obj.foo()

这里我们创建了一个新的函数 baz，当使用 bind() 创建一个绑定函数之后，它被执行的时候，它的 this 会被设置成 obj 。此外，bind() 的参数和 call() 一样，**参数按顺序传递进去**。

`bind()` 也可以在 ES3 中轻易模拟，解决兼容性问题。

> 下面代码截自犀牛书第六版 p191

//返回一个函数，通过调用它来调用 o 中的方法 f()，传递它所有的实参
    function bind(f, o) {
    	if (f.bind) return f.bind(o);
    	else return function() {
    		return f.apply(o, arguments);
    	}
    }

然后举个栗子，看看怎么调用这个函数

这是在 IE9+ 的效果：

![这里写图片描述][70]

这是在 IE8- 的效果：

![这里写图片描述][70 1]

这里再贴一张 MDN 关于 bind 兼容性的图

![这里写图片描述][70 2]

#### 牛刀小试 ####

--------------------

答案：

1.  `global:wow` 开头讲的隐式丢失，嵌套函数作为普通函数调用（`function`）时，其 this 值不是全局对象（非严格模式）就是 undefined（严格模式）。
2.  `global:wow` dog.yelp 的 this 本来就是 dog，并没有改变隐式丢失，同1
3.  `dog: created` log 的 this 绑定在 dog 上，故 `this.scope = dog`，再加上传入的参数 `created`，拼接得到答案。

[this _4]: https://blog.csdn.net/zwkkkk1/article/details/80008343
[apply]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[call]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
[70]: /images/20220526/adc8ad339aaf4dcf929ba0bc6f133461.png
[70 1]: /images/20220526/bf3ff41bbfbe4f17ababa37f2ffea94f.png
[70 2]: /images/20220526/3d64f81a3d594c4eb594657d31a63667.png