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

wayneli 发布于2019-08-26 18:28 / 3393人阅读

摘要：当没有使用而直接调用时指向对象函数和函数非常的相似，第一个参数都用来设置目标函数运行时的指向。输出的结果为结果证明两个地方传入的参数都会被传给目标函数，函数拷贝调用时传入的参数会追加在函数调用时传入的参数后面。

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 站点

GPU云服务器云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply ng-bind-html详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110246.html

详解call bind apply - 区别/使用场景/es6实现/es3实现

摘要：的区别接收数组一连串参数返回一个函数的使用场景将类数组含有属性的对象转化为数组类数组例如通过获取的元素含有属性的对象具有属性，并且可以通过下标来访问其中的元素，但是没有中的等方法。 call,apply,bind的区别 apply接收数组 func.apply(obj, [arus]) call一连串参数 func.call(obj, param1, param2....) bind...

Alex 2019-08-23 17:07 评论0 收藏0
JS中的call、apply、bind方法详解

摘要：不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 评论0 收藏0
JS基础篇--call、apply、bind方法详解

摘要：首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。而则会立即执行函数。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 评论0 收藏0
JavaScript 中 apply 、call 的详解

摘要：参数和是放在数组中传入函数，分别对应参数的列表元素。而原函数中的并没有被改变，依旧指向全局对象。保存原函数保存需要绑定的上下文剩余的参数转为数组返回一个新函数下一篇介绍闭包中闭包的详解。 apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。 apply(...

Meils 2019-08-21 15:27 评论0 收藏0