首頁 > web前端 > js教程 > 主體

JavaScript 中的 this使用方法詳解

巴扎黑
發布: 2017-09-20 09:29:28
原創
1745 人瀏覽過

想要確定this裡規則是什麼,其實方法很簡單,透過檢查它的呼叫位置,在函數被​​呼叫的時候確定this,下面就跟著腳本之家小編一起透過本文學習吧

幾條規則確定函數裡的this 是什麼。

想確定 this 是什麼其實非常簡單。總體的規則是,透過檢查它的呼叫位置,在函數被​​呼叫的時候確定 this。它遵循下面這些規則,接下來以優先順序說明。

規則

1、如果在呼叫函數時使用 new 關鍵字,那麼函數裡的 this 就是全新的物件。


function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }
登入後複製

2、如果使用 apply、call 或 bind 呼叫函數,那麼函數裡的 this 就是作為參數傳進去的物件。


function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }
登入後複製

3、如果函數作為一個方法調用,就是說如果使用點符號調用函數,那麼 this 就是擁有這個函數作為屬性的物件。換句話說,當一個點在函數呼叫的左邊時,this 就是這個點左邊的物件。


var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }
登入後複製

4、如果函數作為一個純粹的函數調用,也就是說,它在沒有上述任何條件的情況下被調用,那麼 this 就是全域物件。在瀏覽器裡,就是 window 物件。


function fn() {
  console.log(this);
}
// 如果在浏览器里调用:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
登入後複製

注意這個規則其實和第三個規則是一樣的,差別在於沒有宣告為方法的函數會自動成為全域物件 window 的屬性。因此,這其實是一個隱式的方法呼叫。當我們呼叫 fn(),其實就會被瀏覽器理解為 window.fn(),所以 this 就是 window。


console.log(fn === window.fn); // -> true
登入後複製

5、如果上述規則有多個適用,那麼優先權較高的就會設定 this 值。

6、如果是 ES2015 裡的箭頭函數,那麼它將忽略上述所有規則,並在創建的時候接收包含它的作用域作為 this 的值。想確定 this 具體是什麼的話,只需從創建箭頭函數那裡往上一行,看看那兒的 this 是什麼,箭頭函數裡的 this 值和它一樣。


const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }
登入後複製

看回第三個規則,當我們呼叫 obj.createArrowFn() 的時候,createArrowFn 裡的 this 是 obj,因為這是方法呼叫。因此,obj 會在 arrowFn 裡綁定到 this 上。如果我們在全域作用域建立一個箭頭函數,那麼 this 值就會是 window。

應用規則

讓我們來看一個程式碼範例,並應用這些規則。試試看能否弄清楚不同的函數呼叫下,this 是什麼。

確定應用了哪一條規則


var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
登入後複製

obj.printThis() 屬於第三條規則,方法呼叫。另一方面,print() 屬於第四條規則,純粹的函數呼叫。對於 print() 來說,我們在呼叫的時候沒有使用 new、bind/call/apply 或點符號,所以它對應了規則四,this 就是全域物件 window。

當適用多個規則的時候

當適用多個規則的時候,使用清單裡更高優先順序的規則。


var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };
登入後複製

如果規則二和規則三同時適用,那麼規則二佔優。


obj1.print.call(obj2); // -> { value: 17 }
登入後複製

如果規則一和規則三同時適用,那麼規則一佔優。


new obj1.print(); // -> {}
登入後複製

##有些函式庫有時候會故意將this 值綁定到某些函數裡。而通常會在函數裡將最有用的值綁定到 this 上使用。舉個例子,jQuery 把 this 綁定到 DOM 元素上,在回呼中觸發一個事件。如果某個函式庫出現一個不太符合上述規則的 this 值,那麼請仔細閱讀這個函式庫的文檔,它很有可能使用 bind 綁定了。

以上是JavaScript 中的 this使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板