JS种call()、apply()、bind()方法的总结

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

在React、Vue等框架大行其道的今天。JavaScript作为这些框架的基石,我们定不能够舍弃。我们必须牢牢的掌握JavaScript的相关知识才能深入理解这些框架的设计思路。本文带你一起探讨JavaScript中call()、apply()、bind()的用法

在理解call()、apply()、bind()之前我们先来说一下JavaScript的 this(上下文)

`this(上下文)`

在面向对象语言中,this表示当前对象的一个引用。在JavaScript中却不是如此

var obj = {
    animals:['dog','cat','monkey'],
    desc:'welcome to zoo'
    say:function(){
       console.log(this.desc)   
    }
  }
  obj.say();     //打印出"welcome to zoo" 说明Javascript对象中this指向是定义的obj

  window.fullScreen = "1920px"
  
   (function(){
    console.log(this.fullScreen)
   })();
//打印出了"1920px" 说明在JavaScript函数中this指向是window

function Person (name,age) {
    this.name = name;
    this.age  = age
};

Person.prototype.showInfo = function () {
    // this指向当前的对象 -> Person
    console.log("name:" + this.name + "," + "age:" + this.age);
}
var minture = new Person('minture',18);
minture.showInfo();   // 输出 "name:minture,age:18"

由上代码我们可以知道 JavaScript中this的指向不是一成不变的。它的指向随着执行环境的不同而变化。

它指向什么完全取决于它在哪里被调用，也就是说，谁调用，谁负责

`call()`

在MDN文档中call()是这样定义的:使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。什么意思呢？通俗来说就是我们可以指定所调用函数的this值,并且通过call()这个方法传递一个或者多个参数

var person = {
      name:'张三',
      age:20,
      sayInfo:function(hobby,favorate){
         console.log(this.name+"今年"+this.age+"岁","爱好是"+hobby +"和"+favorate)
      }
}
var me = {
  name:"minture",
  age:"18" 
}

person.sayInfo.call(me,"看电影","打羽毛球") //print "minture今年18岁,爱好是看电影"

从打印结果来看似乎与我们预期的结果不符合。打印的不应该是"张三今年18岁,爱好是看电影"吗? 之所以出现这样的结果是因为call()这个方法我们在call()方法定义了一个this值。这个“this”的值是me 这意味着当我们去调用person中sayInfo函数时。函数this的指向将不再书person对象而是变成了me这个对象。

由此我们可以得出结论:call()方法可以改变this的指向。

`apply()`

MDN文档中apply()是这样定义的:调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。一看这定义这和call()不是没什么区别吗？确实没什么区别。最大的区别就在于传递参数的不同。apply()允许以数组或类数组对象的方式传递参数。

var person = {
      name:'张三',
      age:20,
      sayInfo:function(hobby,favorate){
         console.log(this.name+"今年"+this.age+"岁","爱好是"+hobby +"和"+favorate)
      }
}
var me = {
  name:"minture",
  age:"18" 
}
person.sayInfo.apply(me,["看电影","打羽毛球"]) //print "minture今年18岁,爱好是看电影"

`bind()`

MDN文档中bind()是这样定义的:创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

通俗来说就是bind()方法的第一个参数可以指定一个this的值，并且可以传递一些其他的参数。和call()、bind()最大的区别就是它仅仅只能在调用方法是使用参数也就是函数需要被调用。

如上图我们看到打印结果时发现打印的是sayInfo方法所以我们使用bind()时还需要在执行下bind(this,arg,arg2)()

总结

call()、apply()、bind()都可以用于改变JavaScript函数中this的指向。 call()和apply()方法的区别在于传递的参数 call()和bind()方法的区别在于bind()方法执行后需要被调用 call()方法则是调用了就执行。

最后

文章若有不足之处，还请大家批评指出。

感谢您观看此篇文章希望能给个👍评论收藏三连！你的点赞就是我写作的动力。