JavaScript中this有幾種綁定規則

這篇“JavaScript中this有幾種綁定規則”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript中this有幾種綁定規則”文章吧。

我們先說一個最簡單的this在全局指向的是什么呢？

這個問題很簡單在瀏覽器中測試this，全局指向的是window，不過在開發過程中this很少在全局使用，一般都是在函數內的

this有幾種綁定規則？

綁定一：默認綁定

// 1.案例一： 

function foo（） {

   console.log（this）

 }

 foo（）//window

// 2.案例二：

function foo1（） {

  console.log（this）

}

function foo2（） {

  console.log（this）

  foo1（）

}

function foo3（） {

  console.log（this）

  foo2（）

}

foo3（）//window

// 3.案例三：

var obj = {

  name: "why",

  foo: function（） {

    console.log（this）

  }

}

var bar = obj.foo

bar（） // window

綁定二：隱式綁定

// 1.案例一：

var obj = {

  name: "why",

  foo: foo

}

obj.foo（） // obj對象

// 2.案例二：

var obj = {

  age: "哈哈哈",

  eating: function （） {

    console.log（this + "在吃東西"）

  },

  running: function （） {

    console.log（this + "在跑步"）

  }

}

obj.eating（）//obj對象

obj.running（）//obj對象

var fn = obj.eating

fn（）

//window,為什么是window呢因為把obj.eating這個函數賦值給了fn，fn在全局調用的所以指向的是window

// 3.案例三：

var obj1 = {

  name: "obj1",

  foo: function （） {

    console.log（this）

  }

}

var obj2 = {

  name: "obj2",

  bar: obj1.foo

}

obj2.bar（）//obj2對象

綁定三：顯示綁定

function foo（） {

  console.log（"函數被調用了", this）

}

//1.foo直接調用和call/apply調用的不同在于this綁定的不同

//foo直接調用指向的是全局對象（window）

foo（）

var obj = {

  name: "obj",

  // age:foo//可以簡寫這一步

}

//call/apply是可以指定this的綁定對象

foo.call（obj）//obj對象

foo.apply（obj）//obj對象

foo.apply（"aaaa"）//aaaa

// 2.call和apply有什么區別？

function sum（num1, num2, num3） {

  console.log（num1 + num2 + num3, this）

}

sum.call（"call", 20, 30, 40）//傳遞參數后面可以傳無限個數值，都是用逗號分割

sum.apply（"apply", [20, 30, 40]）//傳遞參數用數組接收，一樣可以傳無限個數值，用逗號分割

// 3.call和apply在執行函數時，是可以明確的綁定this, 這個綁定規則稱之為顯示綁定

綁定四：new綁定

// 我們通過一個new關鍵字調用一個函數時（構造器）， 這個時候this是在調用這個構造器時創建出來的對象

// this = 創建出來的對象

// 這個綁定過程就是new 綁定

function Person（name, age） {

  this.name = name

  this.age = age

}

var p1 = new Person（"哈哈哈", 18）

console.log（p1.name, p1.age）//哈哈哈，18

var p2 = new Person（"呵呵呵", 30）

console.log（p2.name, p2.age）//呵呵呵，30

這些的案例可以給我們什么樣的啟示呢？

1.函數在調用時，JavaScript會默認給this綁定一個值；

2.this的綁定和定義的位置（編寫的位置）沒有關系；

3.this的綁定和調用方式以及調用的位置有關系；

4.this是在運行時被綁定的;

最后說一下默認綁定和顯示綁定bind沖突： 優先級（顯示綁定）

以上就是關于“JavaScript中this有幾種綁定規則”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。