JavaScript中this有幾種綁定規(guī)則

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

我們先說一個(gè)最簡(jiǎn)單的this在全局指向的是什么呢？

這個(gè)問題很簡(jiǎn)單在瀏覽器中測(cè)試this，全局指向的是window，不過在開發(fā)過程中this很少在全局使用，一般都是在函數(shù)內(nèi)的

this有幾種綁定規(guī)則？

綁定一：默認(rèn)綁定

// 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對(duì)象

// 2.案例二：

var obj = {

  age: "哈哈哈",

  eating: function （） {

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

  },

  running: function （） {

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

  }

}

obj.eating（）//obj對(duì)象

obj.running（）//obj對(duì)象

var fn = obj.eating

fn（）

//window,為什么是window呢因?yàn)榘裲bj.eating這個(gè)函數(shù)賦值給了fn，fn在全局調(diào)用的所以指向的是window

// 3.案例三：

var obj1 = {

  name: "obj1",

  foo: function （） {

    console.log（this）

  }

}

var obj2 = {

  name: "obj2",

  bar: obj1.foo

}

obj2.bar（）//obj2對(duì)象

綁定三：顯示綁定

function foo（） {

  console.log（"函數(shù)被調(diào)用了", this）

}

//1.foo直接調(diào)用和call/apply調(diào)用的不同在于this綁定的不同

//foo直接調(diào)用指向的是全局對(duì)象（window）

foo（）

var obj = {

  name: "obj",

  // age:foo//可以簡(jiǎn)寫這一步

}

//call/apply是可以指定this的綁定對(duì)象

foo.call（obj）//obj對(duì)象

foo.apply（obj）//obj對(duì)象

foo.apply（"aaaa"）//aaaa

// 2.call和apply有什么區(qū)別？

function sum（num1, num2, num3） {

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

}

sum.call（"call", 20, 30, 40）//傳遞參數(shù)后面可以傳無限個(gè)數(shù)值，都是用逗號(hào)分割

sum.apply（"apply", [20, 30, 40]）//傳遞參數(shù)用數(shù)組接收，一樣可以傳無限個(gè)數(shù)值，用逗號(hào)分割

// 3.call和apply在執(zhí)行函數(shù)時(shí)，是可以明確的綁定this, 這個(gè)綁定規(guī)則稱之為顯示綁定

綁定四：new綁定

// 我們通過一個(gè)new關(guān)鍵字調(diào)用一個(gè)函數(shù)時(shí)（構(gòu)造器）， 這個(gè)時(shí)候this是在調(diào)用這個(gè)構(gòu)造器時(shí)創(chuàng)建出來的對(duì)象

// this = 創(chuàng)建出來的對(duì)象

// 這個(gè)綁定過程就是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.函數(shù)在調(diào)用時(shí)，JavaScript會(huì)默認(rèn)給this綁定一個(gè)值；

2.this的綁定和定義的位置（編寫的位置）沒有關(guān)系；

3.this的綁定和調(diào)用方式以及調(diào)用的位置有關(guān)系；

4.this是在運(yùn)行時(shí)被綁定的;

最后說一下默認(rèn)綁定和顯示綁定bind沖突： 優(yōu)先級(jí)（顯示綁定）

以上就是關(guān)于“JavaScript中this有幾種綁定規(guī)則”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。