this綁定規(guī)則

this在全局作用域下指向

• 全局作用域下的this指向window
• 如果給元素的事件行為綁定函數(shù)，那么函數(shù)中的this指向當(dāng)前被綁定的那個(gè)元素
• 函數(shù)中的this，要看函數(shù)執(zhí)行前有沒有., 有.的話，點(diǎn)前面是誰(shuí)，this就指向誰(shuí)，如果沒有點(diǎn)，指向window
• 自執(zhí)行函數(shù)中的this永遠(yuǎn)指向window
• 定時(shí)器中函數(shù)的this指向window
• 構(gòu)造函數(shù)中的this指向當(dāng)前的實(shí)例
• call、apply、bind可以改變函數(shù)的this指向
• 箭頭函數(shù)中沒有this，如果輸出this，就會(huì)輸出箭頭函數(shù)定義時(shí)所在的作用域中的this

this的指向和函數(shù)所處的位置無(wú)關(guān)，與函數(shù)被調(diào)用的方式有關(guān)

默認(rèn)綁定

當(dāng)函數(shù)是直接調(diào)用，而沒有被綁定到某個(gè)對(duì)象上進(jìn)行調(diào)用時(shí)，this指向window

const obj = {
	name: '張三',
  foo: function () {
    console.log(this)
  }
}
const fn = obj.foo
fn() // window

隱式綁定

通過(guò)某個(gè)對(duì)象進(jìn)行調(diào)用

const obj1 = {
  name:'obj1',
  foo: function () {
    console.log(this)
  }
}

const obj2 = {
  name:'obj1',
  // 只是讓foo指向0bj1.foo，但是并沒有調(diào)用
  foo: obj1.foo
}

// foo函數(shù)是由obj2進(jìn)行調(diào)用的
obj2.foo() // {name: 'obj1', foo: ?}

顯式綁定

通過(guò)call()、apply()、bind()方法進(jìn)行調(diào)用，明確的改變函數(shù)的this指向

function sum (num1, num2, num3) {
  console.log(num1 + num2 + num3, this);
}
sum.call('call', 1, 2, 3); // 6 String {'call'}
sum.apply('apply', [1, 2, 3]); // String {'apply'}
const fn = sum.bind('bind', 1, 2, 3);
fn(); // 6 String {'bind'}

默認(rèn)綁定和顯示綁定沖突時(shí)，顯示綁定的優(yōu)先級(jí)更高

new綁定

1. JavaScript中的函數(shù)可以當(dāng)做一個(gè)類的構(gòu)造函數(shù)來(lái)使用，也就是使用new關(guān)鍵字

2. 使用new關(guān)鍵字來(lái)調(diào)用函數(shù)是，會(huì)執(zhí)行如下的操作：

   1. 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象，如obj
   2. 對(duì)新創(chuàng)建的對(duì)象obj執(zhí)行prototype連接（obj.__proto__ = 函數(shù).prototype）
   3. 讓this指向這個(gè)新的對(duì)象obj
   4. 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)對(duì)象添加屬性和方法
   5. 返回這個(gè)新對(duì)象obj（所以構(gòu)造函數(shù)里面不需要return）

   function Person (name) {
     this.name = name
   }
   
   const person1 = new Person('張三');
   person1.name // 張三
   const person2 = new Person('李四');
   person2.name // 李四
   

綁定優(yōu)先級(jí)

默認(rèn)規(guī)則this綁定的優(yōu)先級(jí)最低

顯示綁定優(yōu)先級(jí)高于隱式綁定

function foo () {
  console.log(this);
}
const obj = {
  name: '張三',
  fn: foo.bind('bind')
}
obj.fn() // String {'bind'}

new綁定優(yōu)先級(jí)高于隱式綁定

const obj = {
  name: '張三',
  foo: function () {
    console.log(this);
  }
}
var fn = new obj.foo(); // foo {}

new綁定優(yōu)先級(jí)高于顯示綁定（new綁定優(yōu)先級(jí)最高）

function Foo () {
  console.log(this) // Foo {}
}
var bar = Foo.bind('bind')
var foo = new Foo()

• 注意new關(guān)鍵字無(wú)法和call()/apply()一起使用，因?yàn)?code>new、call()、apply()都是直接調(diào)用函數(shù)

特殊情況的this

• 箭頭函數(shù)：不遵循上述規(guī)則，this由外層作用域決定
• DOM事件處理函數(shù)：通常this指向觸發(fā)事件的元素
• setTimeout/setInterval回調(diào)：在非嚴(yán)格模式下默認(rèn)指向全局對(duì)象

到此這篇關(guān)于深入理解JavaScript this綁定規(guī)則的文章就介紹到這了,更多相關(guān)JavaScript this綁定規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評(píng)論