当前位置: 代码迷 >> 综合 >> 彻底搞懂js函数的apply(),cal()l和bind()方法
  详细解决方案

彻底搞懂js函数的apply(),cal()l和bind()方法

热度:46   发布时间:2024-02-13 12:23:10.0

先放结论:

方法名 实现功能 传入参数
function.prototype.call() 调用一个函数 thisObj,arg1,arg2,arg3
function.prototype.apply() 调用一个函数 thisObj,[arg1,arg2,arg3]

function.prototype.bind()

生成一个新函数 thisObj,arg1,arg2,arg3

call和apply实现的功能是一样的,只是call接收的是一个参数列表,而aplly接受的是一个包含参数的数组(记忆技巧:将apply的首字母a记作array)。

bind方法则与两个方法不同,是生成一个新的函数,等待调用。

例子:

现有一个obj对象,我希望在obj.say('hello')的调用中,返回‘johnsayhello’,但这显然做不到,因为talk内部调用的say()函数的this指向显然不是obj,而是全局的windows,所以并不能获取到this.name的值。现在分别借用call/apply/bind方法来实现一下该功能。

   var obj={name:'john',talk:function(content){var say = function(){console.log(this.name+'say'+content);}say();}}obj.talk('hello');   //sayhello

1.使用call()

  var obj={name:'john',talk:function(content){var say = function(...args){console.log(this.name+'say'+content+args.join(','));}say.call(this,'jack','lucy');}}obj.talk('hello');   //johnsayhellojack,lucy

2.使用apply

  var obj={name:'john',talk:function(content){var say = function(...args){console.log(this.name+'say'+content+args.join(','));}say.apply(this,['jack','lucy']);}}obj.talk('hello');   //johnsayhellojack,lucy

  3.使用bind    

  var obj={name:'john',talk:function(content){var say = function(...args){console.log(this.name+'say'+content+args.join(','));}say.bind(this,'jack','lucy')();//bind生成新的函数,所以需要再次调用}}obj.talk('hello');   //johnsayhellojack,lucy

 

  相关解决方案