首页 >web前端 >js教程 >Javascript中call,apply,bind方法来源与联系区别实例详解

Javascript中call,apply,bind方法来源与联系区别实例详解

伊谢尔伦
伊谢尔伦原创
2017-07-20 14:04:431544浏览

call/apply/bind方法的来源

首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法?

call,apply,bind这三个方法其实都是继承自Function.prototype中的,属于实例方法。


 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true

上面代码中,都返回了true,表明三种方法都是继承自Function.prototype的。当然,普通的对象,函数,数组都继承了Function.prototype对象中的三个方法,所以这三个方法都可以在对象,数组,函数中使用。

绑定回调函数的对象

如果在回调函数中使用this对象,那么this对象是会指向DOM对象,也就是button对象。如果要解决回调函数中this指向问题,可以用如下方法。


var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

点击按钮以后,控制台将会显示true。由于apply方法(或者call方法)不仅绑定函数执行时所在的对象,还会立即执行函数(而bind方法不会立即执行,注意区别),因此不得不把绑定语句写在一个函数体内。

call,apply,bind方法的联系和区别

  其实用于指定函数内部的this指向的问题,这三个方法都差不多,只是存在形式上的差别。读者可以将以上的例子用三种方法尝试用三种方法实现。

  总结一下call,apply,bind方法:

  a:第一个参数都是指定函数内部中this的指向(函数执行时所在的作用域),然后根据指定的作用域,调用该函数。

  b:都可以在函数调用时传递参数。call,bind方法需要直接传入,而apply方法需要以数组的形式传入。

  c:call,apply方法是在调用之后立即执行函数,而bind方法没有立即执行,需要将函数再执行一遍。有点闭包的味道。

  d:改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向。

以上是Javascript中call,apply,bind方法来源与联系区别实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn