這在JavaScript中

this是一個值,根據使用位置的不同而有所不同。不知道JavaScript的微小細節會引起很多麻煩,因此值得花5分鐘學習所有技巧

this是根據其使用位置而具有不同值的關鍵字。

不知道JavaScript的微小細節會引起很多麻煩,因此值得花5分鐘來學習所有技巧。

this在嚴格模式下

在任何物體之外,this嚴格模式總是undefined

注意,我提到了嚴格模式。如果嚴格模式被禁用(默認狀態,如果您未明確添加'use strict'在您的文件頂部),您就在所謂的馬虎模式, 和this-除非下面有某些特殊情況,否則-具有全局對象的值。

意思是window在瀏覽器上下文中。

this在方法中

方法是附加到對象的功能。

您可以以多種形式查看它。

這是一個:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

car.drive() //Driving a Ford Fiesta car!

在這種情況下,使用常規函數,this自動綁定到對象。

注意:以上方法聲明與drive: function() {…,但更短:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive: function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

在此示例中,相同的工作原理:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

car.drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }

car.drive() //Driving a Ford Fiesta car!

箭頭函數與按詞法綁定的工作方式不同:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive: () => { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

car.drive() //Driving a undefined undefined car!

綁定箭頭功能

您不能像使用普通函數那樣將值綁定到箭頭函數。

由於它們的工作方式,這是不可能的。this詞彙約束,這意味著其值是從定義它們的上下文中派生的。

顯式傳遞一個對像用作this

JavaScript提供了幾種映射方式this到您想要的任何對象。

使用bind(),在功能聲明步:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) }.bind(car)

drive() //Driving a Ford Fiesta car!

您還可以綁定現有的對象方法以重新映射其this價值:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

drive() { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car!) } }

const anotherCar = { maker: ‘Audi’, model: ‘A4’ }

car.drive.bind(anotherCar)() //Driving a Audi A4 car!

使用call()或者apply(),在函數調用步:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function(kmh) { console.log(Driving a </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">maker</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">model</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> car at </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">kmh</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> km/h!) }

drive.call(car, 100) //Driving a Ford Fiesta car at 100 km/h! drive.apply(car, [100]) //Driving a Ford Fiesta car at 100 km/h!

您傳遞給的第一個參數call()或者apply()總是綁定到this。 call()和apply()之間的區別只是第二個要使用數組作為參數列表,而第一個要接受可變數量的參數,這些參數作為函數參數傳遞。

瀏覽器事件處理程序的特殊情況

在事件處理程序回調中,this引用接收事件的HTML元素:

document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this) //HTMLElement
}

您可以使用綁定

document.querySelector('#button').addEventListener(
  'click',
  function(e) {
    console.log(this) //Window if global, or your context
  }.bind(this)
)

免費下載我的JavaScript初學者手冊


更多js教程: