call、bind与apply

Guohjia
305 阅读4分钟

在讲call、bind与apply之前，首先要说明一概念，那就是"this",上述三个API也是为它所服务

关于this

this虽说曾让很多前端开发者陷入难题，但理解清楚了也就不难了。在我看来，this主要分为以下几类:

  • 调用指定对象的方法时
var a = {
  a:2,
  b:function(){console.log(this.a)}
}
a.b() //输出2

从这个例子我们可以看出，调用哪个对象的方法，这个方法内部的this就指向哪个对象，那如果想直接用this来调用函数，就要先搞清楚它指代哪个对象

  • 用this指代某个对象，并调用其方法时，在以前我们常常看到这样的代码：
var _this = this;
setTimeout(function(){
    _this.xxx()    
},100)

很显然我这是为了希望用外部变量保留函数fn外的执行环境，并且传入到定时器中的函数当中。是不是看起来不太优雅？没关系，箭头函数帮你解决，箭头函数保留了上下午文执行环境，可以说这是它诞生的最重要原因之一了

setTimeout(()=>{
    this.xxx()  
},100)

此时this指向当前所初的上下文环境对象

  • 利用原型构造一个类时，相关方法所绑定的this
//ES5
var People = function(){}
People.prototype.eat =function(){
  console.log('i am eating')
}
People.prototype.say =function(){
  this.eat() 
}

var xiaoming = new People();
xiaoming.say() //输出  i am eating

//ES6
class People{
  constructor(){}
  eat(){
    console.log('i am eat')
  }
  say(){
    this.eat()
  }
}

var xiaoming = new People()
xiaoming.say() //输出  i am eating

值得注意的是，。如果你传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失

var a = {
  a:2,
  b:function(){console.log(this.a)}
}
var c = a.b
c() //输出undefined

这也解释了我们在写React时，在JSX中触发某个DOM事件，回调函数需要先手动bind this。好了说到bind了，this就先解释到这，接下来让我们看call、bind、apply。

call、bind、apply用法

我们先来简单看看三种方法的用法

  • call:

    function a(arg){
    console.log(arg)
}
a.call(this,1) //输出1

用法说明：fn.call(this,任何类型的参数),参数可为任何类型，数组非数组均可。
ps:你是否知道如果我直接调用函数:a(参数),其实就等于a.call(window对象,参数)，就是说所有函数调用我们平时写成: fn(参数) 但其实是： fn.call(this,参数),直接写fn()默认就是window全局对象

  • apply:

    function a(arg){
  console.log(arg)
}

a.apply(this,[1,2])  //输出结果为1

用法说明：fn.apply(this,数组or类数组对象)

  • bind:

      function a(arg){
    console.log(arg)
}
  var returnFn=a.bind(this,1);
  returnFn()  //输出1

用法说明：fn.bind(this,任何类型的参数),不立即调用函数fn，返回一个已经绑定this(传入参数)的函数fn

三者区别

三者区别我们可以用call作为一个桥梁，依次与其它两者比较，至于为什么待会儿你就明白了；

  • call与apply区别:从上述已说明的用法两者的直接区别就是:前者传入任何形式参数，后者传入数组或者类数组对象

你知道apply参数传入数组或类数组对象，那你知道它是怎么处理这些参数的吗，请看例子：

  var b=[1,2]
  function a(a,c){
    console.log(a,c)
  }
  a.apply(this,b) //输出1  2  ，数组依次对应参数

  var b=[1,2]
  function a(a){
    console.log(a)
  }
  a.apply(this,b)  //输出1  数组被展开了，传入第一个值

  function a(a){
    console.log(a)
  }
  a.call(this,b) //输出[1,2]

说明:apply调用的时候会把数组or类数组展开,实参依次传入函数的形参，如果数目不一致，后面的实参就没有了。不过可以用函数的arguments对象来获得其余实参

  • call与bind区别:bind与call的参数是一样的，都可以是任何类型的参数，bind与call的直接区别就是bind绑定this之后不会立即调用函数，而是返回一个绑定了this的函数等待被调用，因此你需要一个变量去接受这个函数。

总结

1.函数这样调用a.fn(参数),其实是fn.call(a,参数),a就是this

2.call与apply:绑定this后都是立即执行，就是参数的区别，前者是任何形式的参数，后者是数组或类数组对象，你要注意apply对参数的处理，这个往往不太引起注意；

3.call与bind:参数都是一样的，区别就是是立即执行还是返回一个函数等待执行？，你要注意记得用个变量接受一下，不然一不小心容易从错

4.bind与apply:通过上面的比较，我们可以看出前者返回一个函数等待执行，后者立即执行；前者参数可以是任何形式，后者只能是数组或类数组对象

avatar
文章
阅读
粉丝