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

前言

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

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

this(上下文)

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

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

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

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

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

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

call()

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

varperson={name:'张三',age:20,sayInfo:function(hobby,favorate){console.log(this.name+"今年"+this.age+"岁","爱好是"+hobby+"和"+favorate)}}varme={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()允许以数组或类数组对象的方式传递参数。

varperson={name:'张三',age:20,sayInfo:function(hobby,favorate){console.log(this.name+"今年"+this.age+"岁","爱好是"+hobby+"和"+favorate)}}varme={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()方法则是调用了就执行。

最后

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