如何解釋Javascript中的this值？

在 JavaScript 中，this 的值是動態(tài)的，通常會由被使用的函數(shù)來決定。所以，影響 this 的值不是定義的時候，關(guān)鍵在于會在哪里被調(diào)用。

this 值 5 種判斷方式

• 函數(shù)調(diào)用
• 物體方法調(diào)用
• 構(gòu)造函數(shù)調(diào)用
• apply call bind 方法調(diào)用
• 箭頭函數(shù)中的 this

1.函數(shù)調(diào)用

當(dāng)一個函數(shù)不是屬于一個對象中的方法時，直接作為函數(shù)來調(diào)用時，this 會指向全局對象，在瀏覽器中，默認(rèn)為 Window。但有一點要注意的是，如果是在嚴(yán)格模式下，this 為 undefined。

例子如下，因為是一般函數(shù)調(diào)用，this 總是指向 Window，所以一個輸出結(jié)果是 Window。而因為在全局范圍中用 var 定義 name 變量。name 變量會綁定在 Window 對象上，第二個輸出結(jié)果也就等同于 window.name 的值（如果是用 let 定義，并不會綁定在 Window 對象上）

var name = "John";
function callThis() {
  console.log(this);
  console.log(this.name);
}
callThis();
// Window
// John

2.對象方法調(diào)用

當(dāng)一個函數(shù)是作為一個對象的方法來調(diào)用時，this 會指向這個對象

const john = {
  name: "john",
  callJohn() {
    console.log(`hello, ${this.name}`);
  },
};
john.callJohn(); // hello, john

關(guān)鍵反例：

const john = {
  name: "john",
  callJohn() {
    console.log(this.name);
  },
};
const fn = john.callJohn;
fn(); // undefined（或嚴(yán)格模式下報錯）

3.構(gòu)造函數(shù)調(diào)用

當(dāng)一個函數(shù)使用 new 調(diào)用的時候，會出現(xiàn)如下情況

重點來看this 指針的調(diào)用

第一處 this 指針

• 構(gòu)造函數(shù)執(zhí)行時，this 指向新創(chuàng)建的 object，所以 this.brand = brand 實際是在給 object 添加屬性。

第二處 this 指針

• 調(diào)用 newIPhone.getBrand() 時，因為是對象方法調(diào)用，this 自動指向 newIPhone，所以能正確返回該對象的 brand。

4.apply、call、bind 方法調(diào)用

我們也可以使用 apply、call、bind 方法來指定 this 指向的對象。

• apply 方法接受兩個參數(shù)，第一個是 this 綁定的對象，第二個要放入要傳入函數(shù)的數(shù)組參數(shù)，并執(zhí)行這個函數(shù)。
• call 方法類似為 apply，唯一不同的地方是，apply 第二個參數(shù)是數(shù)組，但 call 則是參數(shù)逐個傳。
• bind 方法傳入一個對象和要傳入的參數(shù)，不同于 apply 和 call，bind 不會立即執(zhí)行，而是會返回新的函數(shù)。

舉例如下：

function greet(greeting, punctuation) {
  console.log(`${greeting}, I am ${this.name}${punctuation}`);
}
const person = {
  name: "Alice",
};

apply —— 立即執(zhí)行，參數(shù)用數(shù)組傳

greet.apply(person, ["Hi", "～"]);
//Hi, I am Alice～

call —— 立即執(zhí)行，參數(shù)逐個傳

greet.call(person, "Hello", "!");
//Hi, I am Alice～

bind —— 不立即執(zhí)行，返回一個新函數(shù)

const boundGreet = greet.bind(person, "Hey");

此時：

• this 已經(jīng)被固定為 person
• “Hey” 被提前綁定為第一個參數(shù)
• 函數(shù)還沒執(zhí)行

執(zhí)行返回的新函數(shù)：

boundGreet("!!!");
// Hey, I am Alice!!!

補充知識點：

5.箭頭函數(shù)中的this

ES6 中介紹了一種新的函數(shù)形式 - 箭頭函數(shù)(arrow function)。但要注意的是，箭頭函數(shù)并沒有屬于自己的 this 值，箭頭函數(shù)的 this 會從他的外層函數(shù)繼承，若他的外層函數(shù)也同為箭頭函數(shù) ，則回繼續(xù)向上找，直到找到全局環(huán)境的預(yù)設(shè) this 值(例如：瀏覽器中就是 window)。

let getThis = () => this;
console.log(getThis() === window); // true

到此這篇關(guān)于如何解釋JavaScript 中 this 的值？的文章就介紹到這了,更多相關(guān)js this值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論