JS種call()、apply()、bind()方法的總結
theme: arknights highlight: atom-one-light
小知識，大挑戰！本文正在參與“程式設計師必備小知識”創作活動。
前言
在React、Vue等框架大行其道的今天。JavaScript作為這些框架的基石,我們定不能夠捨棄。我們必須牢牢的掌握JavaScript的相關知識才能深入理解這些框架的設計思路。本文帶你一起探討JavaScript中call()、apply()、bind()的用法
在理解call()、apply()、bind()之前我們先來說一下JavaScript的 this(上下文)
this(上下文)
在面嚮物件語言中,this表示當前物件的一個引用。在JavaScript中卻不是如此
```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
javascript
window.fullScreen = "1920px"
(function(){
console.log(this.fullScreen)
})();
//打印出了"1920px" 說明在JavaScript函式中this指向是window
javascript
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()這個方法傳遞一個或者多個引數
```javascript
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()允許以陣列或類陣列物件的方式傳遞引數。
javascript
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()方法則是呼叫了就執行。
最後
文章若有不足之處，還請大家批評指出。
感謝您觀看此篇文章 希望能給個👍評論收藏三連！你的點贊就是我寫作的動力。