this綁定規則

默認綁定

最經常使用的函數調用類型：獨立函數調用，這條規則能夠看做沒法應用其餘規則時的默認規則

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:

1. 建立(或者說構造)一個全新的對象
2. 這個對象會綁定到函數調用的this
3. 若是函數沒有返回其餘對象，那麼new表達式中的函數調用會自動返回這個新對象

示例代碼：

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

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

判斷this綁定規則

1. 函數是否在new中調用（new綁定）？若是是的話this綁定的是新建立的對象
2. 函數是否經過call、apply（顯示綁定）或者硬綁定調用？若是是的話，this綁定是指定的對象
3. 函數是否在某個上下文對象中調用（隱式綁定）？若是是的話，this綁定的是那個上下文對象
4. 若是都不是，使用默認綁定，若是在嚴格模式下就綁定到undefined，不然綁定到全局對象

以上綁定規則優先級由高到低，感興趣的能夠本身去動手驗證一下

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