浅谈JavaScript中的apply、call、bind

发表于 | 阅读 128

apply,call,bine 这三兄弟经常让初学者感到疑惑。前两天准备面试时特地做了个比较，其实理解起来也不会太难。

apply

MDN上的定义：
The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

apply() 方法调用一个函数，指定该函数的 this 值并将一个数组（或类数组对象）作为该函数的参数。

语法 (Syntax)

fun.apply(thisArg,[argsArray])

直接上代码

1
2
3
4
5
6
function sayColor(arg) {
    var color = "red";
    console.log(arg + this.color);
}
var obj = {color: "blue"};
sayColor.apply(obj, ["The color is"]); //输出"The color is blue"

此时 this 指向 obj ，则 this.color 为 obj 的 color 属性，则输出 The color is blue。

call

call() 与 apply() 类似，区别在于 apply() 的第二个参数为数组，而 call() 把参数跟在第一个参数后面，并且可以跟多个参数。

语法 (Syntax)

fun.call(thisArg, arg1, arg2, arg3 ...)

看代码

1
2
3
4
5
function sayClothe(arg1,arg2) {
    console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
sayClothe.call(obj, "This is a ", " clothe" ); //输出"This is a blue clothe"

bind

bind() 与 call() 类似，有一点不同在于 bind() 返回一个新函数(new function)，我们可以随时调用该函数。

语法(Syntax)

fun.bind(thisArg, arg1, arg2, arg3 ...)

返回值

返回一个具有指定 this 和初始参数的函数副本。

看代码

1
2
3
4
5
6
function sayClothe(arg1, arg2) {
    console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
var sayClothe2 = sayClothe.bind(obj, "This is a ", " clothe");
sayClothe2(); //输出 "This is a blue clothe"

使用

有时候我们会碰到 Array.prototype.slice.call(arguments) 这种用法。许多人会疑惑，直接使用 arguments.slice() 不就行了吗，为什么要多此一举。

原因在于，arguments 并不是真正的数组对象，只是 array-like object ，所以它并没有 slice 这个方法。而 Array.prototype.slice.call(arguments) 可以理解为把 slice 的对象指向 arguments ,从而让 arguments 可以使用 slice 方法。如果直接使用 arguments.slice() 则会报错。

bind() 的另一个用法则是让函数拥有预设参数，而又跟预设参数有所不同。

以下例子结合上面两条规则 本例出自MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function list() {
    return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); //[1, 2, 3]

//Create a function with a preset leading arguments
var leadingThirtysevenList = list.bind(null, 37);

var list2 = leadingThirtysevenList();
//[37]

var list3 = leadingThirtysevenList(1, 2, 3);
//[37, 1, 2, 3]

我们想到预设参数就会理所当然的想到 “如果该函数没有参数就使用预设参数，有参数就使用提供的参数”。不过 bind() 所提供的预设参数功能与此不同。

在我们的印象中， list3 应该输出 [1, 2, 3] 但实际输出的却是 [37, 1, 2, 3]。因为 bind() 的特点，leadingThirtysevenList(1, 2, 3) 可以写为 list.bind(null, 37, 1, 2, 3)。

总结

apply() call() bind() 三者区别不大，都是用来改变函数的 this 指向。

apply() 把 this 所需参数放入一个数组，作为 apply() 的第二个参数传入。当参数不定时，我们可以传入 arguments。 call() 和 bind() 则把参数按顺序依次传入。

bind() 返回对应函数，便于稍后调用，而 apply()、call()则立即调用

由于其特性，使用起来千奇百怪，有各种各样有趣的用法，还等待我们去挖掘。