JS種call()、apply()、bind()方法的總結

語言: CN / TW / HK

theme: arknights highlight: atom-one-light


小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。

前言

React、Vue等框架大行其道的今天。JavaScript作為這些框架的基石,我們定不能夠捨棄。我們必須牢牢的掌握JavaScript的相關知識才能深入理解這些框架的設計思路。本文帶你一起探討JavaScriptcall()、apply()、bind()的用法

在理解call()、apply()、bind()之前我們先來說一下JavaScriptthis(上下文)

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()最大的區別就是它僅僅只能在呼叫方法是使用引數 也就是 函式需要被呼叫。

image.png 如上圖 我們看到列印結果時 發現列印的是sayInfo方法 所以我們使用bind()時還需要在執行下bind(this,arg,arg2)()

總結

call()、apply()、bind()都可以用於改變JavaScript函式中this的指向。 call()apply()方法的區別在於傳遞的引數 call()bind()方法的區別在於bind()方法執行後需要被呼叫 call()方法則是呼叫了就執行。

最後

文章若有不足之處,還請大家批評指出。

感謝您觀看此篇文章 希望能給個👍評論收藏三連!你的點贊就是我寫作的動力。