A guide to this in JavaScript

原文參考(medium.freecodecamp.org/a-guide-to-…)

this 關鍵詞是Javascript中最廣爲使用的而且使人誤解的詞。今天我將嘗試改變它。

當學習代詞時，讓咱們回到古老的學校時代。

菲爾普斯遊得很快，由於他想贏得比賽。

注意代詞he的使用。咱們在這不直接稱呼菲爾普斯可是用代詞he指代菲爾普斯。相似地，JavaScript使用this關鍵字做爲指示對象來引用上下文中的對象，即主題。

例如：

在上面的代碼中，咱們有一個對象car，它有make,model和fullName屬性。 fullName的值是一個function，它能夠用兩種不一樣的語法打印car的全稱

• 使用this => this.make+」 「 +this.model，這個this指向上下文中的對象，因此this.make其實是car.make,而且this.model也是如此

• 使用點表示法，咱們能夠訪問對象的屬性car.make和car.model。
  

這就是this!

如今咱們已經理解了this是什麼，這只是最基礎的用法，讓咱們來作一些規則以至於咱們能夠記住。

JS中的this關鍵詞指向它所屬的對象。

var car={
  make:'....'
  func:()=>{
    console.log(this.make)
  }
}
複製代碼

上面代碼片斷中的this屬於對象car

依賴於用法，它有不一樣的值

1. 在一個方法裏
2. 在一個函數裏
3. 單獨
4. 在一個事件中
5. call()和apply()

在一個方法裏

當this在一個方法裏使用，它指向方法全部者對象。

在一個對象中的定義的函數被叫作方法。讓咱們再舉一次car的例子。

var car= {
  make: "Lamborghini",
  model: "Huracán",
  fullName: function () {
    console.log(this.make+" " +this.model);
    console.log(car.make+ " " +car.model);
  }
}
car.fullName();
複製代碼

fullName()在這裏是一個方法。在這個方法裏的this屬於car

在一個函數裏

在一個函數裏，this有一點複雜。首先要理解的是，與全部對象都具備屬性同樣，函數也具備屬性。不管函數什麼時候執行，它都能獲取this屬性，該屬性是一個變量，其中包含調用它的對象的值。

若是函數沒有被對象調用，那麼函數內部的this屬於全局對象，稱之爲窗口。在這個案例裏，this將引用全局做用域中定義的值。讓咱們看一個更好理解的例子：

var make= "Mclaren";
var model= "720s"
function fullName(){ 
  console.log(this.make+ " " + this.model);
}
var car = {
    make:"Lamborghini",
    model:"Huracán",
    fullName:function () {
      console.log (this.make + " " + this.model);
    }
}
car.fullName(); // Lmborghini Huracán
window.fullName(); // Mclaren 720S
fullName(); // Mclaren 720S
複製代碼

這裏make，model和fullName是全局定義的，而car對象也有fullName的實現。當car對象被調用時，這指的是在對象內定義的屬性。另外一方面，其餘兩個函數調用是相同的並返回全局定義的屬性。

單獨

當單獨使用而不是在任何函數或對象內部時，this指的是全局對象。

var make = 'Mclaren';
var model = '720s'
var name = 'Ferrari';
console.log(this.name); //Ferrari
複製代碼

這裏的this指的是全局名稱屬性。

在一個事件中

事件能夠是任何類型，但爲了簡單和清晰起見，讓咱們進行點擊事件。

只要單擊一個按鈕並引起一個事件，它就能夠調用另外一個函數來根據點擊執行某個任務。若是this在函數內部使用，它將引用引起事件的元素。在DOM中，全部元素都存儲爲對象。這就是爲何當引起一個事件時它會引用該元素，由於該webpage元素其實是DOM中的一個對象。

好比：

<button onclick="this.style.display='none'">
  Remove Me!
</button>

複製代碼

call()、apply()& bind()

• bind：容許咱們在方法上設置this的值。
• call和apply：容許咱們借用函數並在函數調用上設置this的值。

未完待續···