this綁定規則

zgbgx 發布于2019-08-21 16:42 / 2548人閱讀

摘要：默認綁定最常用的函數調用類型獨立函數調用，這條規則可以看作無法應用其他規則時的默認規則非嚴格模式下如果是嚴格模式下會輸出在調用時沒有任何的修飾函數，因此只能使用默認綁定，指向全局變量作用域，被解析成全局變量隱式綁定示例代碼如上例所示，在對象

默認綁定

最常用的函數調用類型：獨立函數調用，這條規則可以看作無法應用其他規則時的默認規則

function one() {
  console.log(this.a)
}

var a = 1
one() //1 非嚴格模式下 如果是嚴格模式下會輸出undefined

one在調用時沒有任何的修飾函數，因此只能使用默認綁定，this指向全局變量作用域，this.a被解析成全局變量a

隱式綁定

示例代碼：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

obj.one() //1

如上例所示，在對象被調用時，調用位置存在上下文對象，one被當作引用屬性添加到obj中，當one被調用時，加上了對obj的引用，即此時函數引用有上下文對象，隱式綁定規則會把函數調用中的this綁定到這個上下文對象上，因此此時的this.a等同于obj.a
Tips:對象屬性引用鏈中只有上一層或者說最里面一層在調用位置中起作用，例子：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

var obj1 = {
  obj : obj,
  a : 2
}

obj1.obj.one() //1

隱式丟失

隱式綁定最常見的問題就是被隱式綁定的函數會丟失綁定的對象，即它會使用默認綁定，將this綁定到全局對象上

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

var another = obj.one
var a = 2
another() //2

雖然another是obj.one的一個引用，但是實際上，它引用的是one函數本身，因此此時another()是一個不帶任何修飾的函數調用，會應用默認綁定

顯示綁定

顯示綁定常見的綁定形式就是使用函數call()和apply()修改this的指向，它們的第一個參數就是一個對象，是給this準備的，即在后面時this的指向域，示例代碼：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

one.call(obj) //1

硬綁定

有時顯示綁定不一定能解決我們碰到的問題，比如我們需要將this強制綁定到一個對象上，之后無論怎么調用都無法修改this指向，示例代碼：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

var a = 2
var another = function () {
  one.call(obj)
}
another() //1
another.call(window) //1

硬綁定將one的this強制綁定在了obj上，無論之后如何調用函數another()，它總會手動在obj上調用one

bind方法綁定

示例代碼：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

var another = one.bind(obj)
another() //1

bind()會返回一個硬編碼的新函數，它會把你指定的參數設置為this的上下文并調用原始函數

new綁定

使用new來調用函數時需要注意的點
Tips:

創建(或者說構造)一個全新的對象

這個對象會綁定到函數調用的this

如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象

示例代碼：

function one(a) {
  this.a = a
}
var another = new one(1)
console.log(another.a)

使用new來調用one()時，會構造一個新對象并把它綁定到one()調用中的this上

判斷this綁定規則

函數是否在new中調用（new綁定）？如果是的話this綁定的是新創建的對象

函數是否通過call、apply（顯示綁定）或者硬綁定調用？如果是的話，this綁定是指定的對象

函數是否在某個上下文對象中調用（隱式綁定）？如果是的話，this綁定的是那個上下文對象

如果都不是，使用默認綁定，如果在嚴格模式下就綁定到undefined，否則綁定到全局對象

以上綁定規則優先級由高到低，感興趣的可以自己去動手驗證一下

以上內容是個人的一點總結，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏

GPU云服務器云服務器 this[] this _this this變量

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88617.html

JavaScript中this綁定詳解

摘要：綁定最后要講的一種綁定規則，是指通過操作符調用構造函數時發生的綁定。因此，所謂的綁定是指通過操作符來調用函數時，會產生一個新對象，并且會把構造函數內的綁定到這個對象上。事實上，在中，使用來調用函數，會自動執行下面的操作。轉載請注明出處 https://segmentfault.com/a/11... this 可以說是 javascript 中最耐人尋味的一個特性，就像高中英語里各種...

yacheng 2019-08-20 11:33 評論0 收藏0
你不知道的js中關于this綁定機制的解析[看完還不懂算我輸]

摘要：綁定書中提到在中，實際上并不存在所謂的構造函數，只有對于函數的構造調用。規則使用構造調用的時候，會自動綁定在期間創建的對象上。指向新創建的對象綁定比隱式綁定優先級高。 showImg(http://ww1.sinaimg.cn/large/005Y4rCogy1fstcwvzkjzj30sg0g0qqn.jpg); 前言最近正在看《你不知道的JavaScript》，里面關于this綁...

dunizb 2019-08-22 18:27 評論0 收藏0
關于 this 你想知道的一切都在這里

摘要：如下在第一個例子中，被點擊元素是通過，這個形式參數來代替的。它的作用和形式參數類似，其本質上是一個對象的引用，它的特殊性在于不需要手動傳值，所以使用起來會更加簡單和方便。無論在 javascript 的日常使用中還是前端面試過程中，this 的出鏡率都極高。這無疑說明了，this 的重要性。但是 this 非常靈活，導致很多人覺得 this 的行為難以理解。本文從為什么要有 this...

Lemon_95 2019-08-20 13:49 評論0 收藏0
JS中的this詳解

摘要：實際上并不存在什么構造函數，只存在對于函數的構造調用發生構造函數的調用時，會自動執行下邊的操作創建一個全新的對象。說明綁定的優先級高于硬綁定。原文閱讀 ??js中的this是很容易讓人覺得困惑的地方，這篇文章打算說一下this綁定的幾種情況，相信可以解決大部分關于this的疑惑。 this是在運行的時候綁定的，不是在編寫的時候綁定的，函數調用的方式不同，就可能使this所綁定的對象不...

Mike617 2019-08-21 16:01 評論0 收藏0
徹底搞懂 JS 中 this 機制

摘要：的四種綁定規則的種綁定規則分別是默認綁定隱式綁定顯示綁定綁定。綁定中的操作符，和其他語言中如的機制是不一樣的。規則例外在顯示綁定中，對于和的綁定將不會生效。它也是作為機制的一種替換，解決之前綁定過程各種規則帶來的復雜性。徹底搞懂 JS 中 this 機制摘要：本文屬于原創，歡迎轉載，轉載請保留出處：https://github.com/jasonGeng88/blog 目錄 t...

李世贊 2019-08-22 16:05 評論0 收藏0