call() , apply() 与 bind() 详解

我们晓得可以用call(), apply() 和 bind()这三个函数都是用来完成函数挪用，而且设置this指向。 call()和apply()是 ECMAScript3 规范引入，而bind()函数则是在 ECMAScript 5 引入。 这边文章会用几个小例子来回想一下他们之间有什么不一样。

用法

call()和apply() 会马上挪用函数， 而bind()只会返回一个函数援用，当背面真正挪用返回的函数的时刻，函数内里的this将会指向给bind()函数传入的参数，并在挪用新函数时，将给定参数列表作为原函数的参数序列的前多少项， 所以 bind()函数异常适合在事宜回调的时刻修正this 指向， 有React 履历的朋侪应当会有更深的感觉。

call()

var dist = 'Beijing';

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: 'Chengdu'
};

greet.call(obj1, "Tom", "Dallas");  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

由于greet.call(obj) 传入了obj1作为第一个参数，所以在 greet()函数实行时, this指向 obj1。其他的参数就将作为参数传给greet()函数。
当没有运用call()而直接挪用greet()时, this指向 window对象.

apply()

var dist = 'Beijing';

function greet(name, hometown) {
  var word =  `Welcome ${name} from ${hometown} to ${this.dist}!`
  console.log(word);
}

var obj1 = {
  dist: 'Chengdu'
};

var args = ["Tom", "Dallas"];
greet.apply(obj1, args);  // Welcome Tom from Dallas to Chengdu!

greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!

apply()函数和call()函数异常的类似，第一个参数都用来设置目的函数运行时的this指向。 唯一的区分就是 apply()的第二个参数接收一个数组， 其他表现则一样。

bind()

var dist = 'Beijing';

function greet(name, hometown) {
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var obj1 = {
    dist: 'Chengdu',
};

var obj2 = {
    dist: 'Chongqing',
};

var greet1 = greet.bind(obj1, 'Tom', 'Dallas');
var greet2 = greet.bind(obj2, 'Spike', 'San Antonio');

greet('Jerry', 'Houston');

greet1();
setTimeout(function() {
    greet2();
}, 1000);

这个例子会越发庞杂一点， 输出效果以下：

  Welcome Jerry from Houston to Beijing!
  Welcome Tom from Dallas to Chengdu!
  Welcome Spike from San Antonio to Chongqing!

在上面例子中， bind()函数并不会马上实行目的函数， 而是返回了一个函数的拷贝，但this会指向bind()的第一个参数，其他传给bind()的参数都邑按递次传给返回的函数。我们就能够异步挪用这个函数返回值了。然则须要注重的是，bind()要领返回的函数拷贝在运用 new 操纵时， 第一个参数是会被疏忽的。

那末新的题目又来了， 如果在挪用返回的函数拷贝的时刻， 又传入了新的参数， 会发作什么呢， 只要再写一个例子试试了。

var obj1 = {
    dist: 'Chengdu',
};

function greet(name, hometown) {
    console.log(Array.prototype.slice.call(arguments));
    var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
    console.log(word);
}

var greet1 = greet.bind(obj1, 'Tom', 'Dallas');

greet1('Jerry', 'Houston');

输出的效果为:

[ "Tom", "Dallas", "Jerry", "Houston" ]
Welcome Tom from Dallas to Chengdu!

效果证实两个处所传入的参数都邑被传给目的函数，函数拷贝挪用时传入的参数会追加在bind()函数挪用时传入的参数背面。

以上就是一切关于 call(), apply() 和 bind() 三个函数的实例了。人人有什么疑问发起留言议论。

本文始发于
bbwho.com 站点