前言
本章將專門介紹與執行背景關系創建階段直接相關的最后一個細節——this是什么？以及它的指向到底是什么，
了解this
也許你在其他面向物件的編程語言曾經看過this，也知道它會指向某個構造器(constructor)所建立的物件，但事實上在JavaScript里面，this所代表的不僅僅是那個被建立的物件，
先來看看ECMAScript 標準規范對this 的定義：
「The this keyword evaluates to the value of the ThisBinding of the current execution context.」
「this 這個關鍵字代表的值為當前執行背景關系的ThisBinding，」
然后再來看看MDN 對this 的定義：
「In most cases, the value of this is determined by how a function is called.」
「在大多數的情況下，this 其值取決于函式的呼叫方式，」
好，如果上面兩行就看得懂的話那么就不用再往下看了，Congratulations！
… 我想應該不會，至少我光看這兩行還是不懂，
先來看個例子吧：
var getGender = function() {
return people1.gender;
};
var people1 = {
gender: 'female',
getGender: getGender
};
var people2 = {
gender: 'male',
getGender: getGender
};
console.log(people1.getGender()); // female
console.log(people2.getGender()); // female
what?怎么people2變性了呢，這不是我想要的結果啊，為什么呢？
因為getGender()回傳(return)寫死了people1.gender的關系，結果自然是’female’，
那么，如果我們把getGender稍改一下：
var getGender = function() {
return this.gender;
};
這個時候，你應該會分別得到female與male兩種結果，
所以回到前面講的重點，從這個例子可以看出，即便people1與people2的getGender方法參照的都是同一個getGender function，但由于呼叫的物件不同，所以執行的結果也會不同，
現在我們知道了第一個重點，**this實際上是在函式被呼叫時發生的系結，它指向什么完全取決于函式的呼叫方式，**如何的區分this呢？
this到底是誰
看完上面的例子，還是有點似懂非懂吧？那接下來我們來看看不同的呼叫方式對 this 值的影響，
情況一：全域物件&呼叫普通函式
在全域環境中，this 指向全域物件，在瀏覽器中，它就是 window 物件，下面的示例中，無論是否是在嚴格模式下，this 都是指向全域物件，
var x = 1
console.log(this.x) // 1
console.log(this.x === x) // true
console.log(this === window) // true
如果普通函式是在全域環境中被呼叫，在非嚴格模式下，普通函式中 this 也指向全域物件；如果是在嚴格模式下，this 將會是 undefined，ES5 為了使 JavaScript 運行在更有限制性的環境而添加了嚴格模式，嚴格模式為了消除安全隱患，禁止了 this 關鍵字指向全域物件，
var x = 1
function fn() {
console.log(this); // Window 全域物件
console.log(this.x); // 1
}
fn();
使用嚴格模式后：
"use strict" // 使用嚴格模式
var x = 1
function fn() {
console.log(this); // undefined
console.log(this.x); // 報錯 "Cannot read property 'x' of undefined"，因為此時 this 是 undefined
}
fn();
情況二：作為物件方法的呼叫
我們知道，在物件里的值如果是原生值（primitive type；例如，字串、數值、布林值），我們會把這個新建立的東西稱為「屬性（property）」；如果物件里面的值是函式（function）的話，我們則會把這個新建立的東西稱為「方法（method）」，
如果函式作為物件的一個方法時，并且作為物件的一個方法被呼叫時，函式中的this指向這個上一級物件，
var x = 1
var obj = {
x: 2,
fn: function() {
console.log(this);
console.log(this.x);
}
}
obj.fn()
// obj.fn()結果列印出;
// Object {x: 2, fn: function}
// 2
var a = obj.fn
a()
// a()結果列印出:
// Window 全域物件
// 1
在上面的例子中，直接運行 obj.fn() ，呼叫該函式的上一級物件是 obj，所以 this 指向 obj，得到 this.x 的值是 2；之后我們將 fn 方法首先賦值給變數 a，a 運行在全域環境中，所以此時 this 指向全域物件Window，得到 this.x 為 1，
我們再來看一個例子，如果函式被多個物件嵌套呼叫，this 會指向什么，
var x = 1
var obj = {
x: 2,
y: {
x: 3,
fn: function() {
console.log(this); // Object {x: 3, fn: function}
console.log(this.x); // 3
}
}
}
obj.y.fn();
為什么結果不是 2 呢，因為在這種情況下記住一句話：this 始侄訓指向直接呼叫函式的上一級物件，即 y，上面例子實際執行的是下面的代碼，
var y = {
x: 3,
fn: function() {
console.log(this); // Object {x: 3, fn: function}
console.log(this.x); // 3
}
}
var x = 1
var obj = {
x: 2,
y: y
}
obj.y.fn();
物件可以嵌套，函式也可以，如果函式嵌套，this 會有變化嗎？我們通過下面代碼來探討一下，
var obj = {
y: function() {
console.log(this === obj); // true
console.log(this); // Object {y: function}
fn();
function fn() {
console.log(this === obj); // false
console.log(this); // Window 全域物件
}
}
}
obj.y();
在函式 y 中，this 指向了呼叫它的上一級物件 obj，這是沒有問題的，但是在嵌套函式 fn 中，this 并不指向 obj，嵌套的函式不會從呼叫它的函式中繼承 this，當嵌套函式作為函式呼叫時，其 this 值在非嚴格模式下指向全域物件，在嚴格模式是 undefined，所以上面例子實際執行的是下面的代碼，
function fn() {
console.log(this === obj); // false
console.log(this); // Window 全域物件
}
var obj = {
y: function() {
console.log(this === obj); // true
console.log(this); // Object {y: function}
fn();
}
}
obj.y();
情況三：作為建構式呼叫
我們可以使用 new 關鍵字，通過建構式生成一個實體物件，此時，this 便指向這個新物件，
var x = 1;
function Fn() {
this.x = 2;
console.log(this); // Fn {x: 2}
}
var obj = new Fn(); // obj和Fn(..)呼叫中的this進行系結
console.log(obj.x) // 2
使用new來呼叫Fn(..)時，會構造一個新物件并把它（obj）系結到Fn(..)呼叫中的this，還有值得一提的是，如果建構式回傳了非參考型別（string，number，boolean，null，undefined），this 仍然指向實體化的新物件，
var x = 1
function Fn() {
this.x = 2
return {
x: 3
}
}
var a = new Fn()
console.log(a.x) // 3
因為Fn()回傳(return)的是一個物件（參考型別），this 會指向這個return的物件，如果return的是一個非參考型別的值呢？
var x = 1
function Fn() {
this.x = 2
return 3
}
var a = new Fn()
console.log(a.x) // 2
情況四：call 和 apply 方法呼叫
如果你想改變 this 的指向，可以使用 call 或 apply 方法，它們的第一個引數都是指定函式運行時其中的this指向，如果第一個引數不傳（引數為空）或者傳 null 、undefined，默認 this 指向全域物件（非嚴格模式）或 undefined（嚴格模式），
var x = 1;
var obj = {
x: 2
}
function fn() {
console.log(this);
console.log(this.x);
}
fn.call(obj)
// Object {x: 2}
// 2
fn.apply(obj)
// Object {x: 2}
// 2
fn.call()
// Window 全域物件
// 1
fn.apply(null)
// Window 全域物件
// 1
fn.call(undefined)
// Window 全域物件
// 1
使用 call 和 apply 時，如果給 this 傳的不是物件，JavaScript 會使用相關建構式將其轉化為物件，比如傳 number 型別，會進行new Number()操作，如傳 string 型別，會進行new String()操作，如傳 boolean 型別，會進行new Boolean()操作，
function fn() {
console.log(Object.prototype.toString.call(this))
}
fn.call('love') // [object String]
fn.apply(1) // [object Number]
fn.call(true) // [object Boolean]
call 和 apply 的區別在于，call 的第二個及后續引數是一個引數串列，apply 的第二個引數是陣列，引數串列和引數陣列都將作為函式的引數進行執行，
var x = 1
var obj = {
x: 2
}
function Sum(y, z) {
console.log(this.x + y + z)
}
Sum.call(obj, 3, 4) // 9
Sum.apply(obj, [3, 4]) // 9
情況五：bind 方法呼叫
呼叫 f.bind(someObject) 會創建一個與 f 具有相同函式體和作用域的函式，但是在這個新函式中，新函式的 this 會永久的指向 bind 傳入的第一個引數，無論這個函式是如何被呼叫的，
var x = 1
var obj1 = {
x: 2
};
var obj2 = {
x: 3
};
function fn() {
console.log(this);
console.log(this.x);
};
var a = fn.bind(obj1);
var b = a.bind(obj2);
fn();
// Window 全域物件
// 1
a();
// Object {x: 2}
// 2
b();
// Object {x: 2}
// 2
a.call(obj2);
// Object {x: 2}
// 2
在上面的例子中，雖然我們嘗試給函式 a 重新指定 this 的指向，但是它依舊指向第一次 bind 傳入的物件，即使是使用 call 或 apply 方法也不能改變這一事實，即永久的指向 bind 傳入的第一次引數，
情況六：箭頭函式中this指向
值得一提的是，從ES6 開始新增了箭頭函式，先來看看MDN 上對箭頭函式的說明
An arrow function expression has a shorter syntax than a function expression and does notbind its own
this,arguments,super, ornew.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
這里已經清楚了說明了，箭頭函式沒有自己的this系結，箭頭函式中使用的this，其實是直接包含它的那個函式或函式運算式中的this，在前面情況二中函式嵌套函式的例子中，被嵌套的函式不會繼承上層函式的 this，如果使用箭頭函式，會發生什么變化呢？
var obj = {
y: function() {
console.log(this === obj); // true
console.log(this); // Object {y: function}
var fn = () => {
console.log(this === obj); // true
console.log(this); // Object {y: function}
}
fn();
}
}
obj.y()
和普通函式不一樣，箭頭函式中的 this 指向了 obj，這是因為它從上一層的函式中繼承了 this，你可以理解為箭頭函數修正了 this 的指向，所以箭頭函式的this不是呼叫的時候決定的，而是在定義的時候處在的物件就是它的this，
換句話說，箭頭函式的this看外層的是否有函式，如果有，外層函式的this就是內部箭頭函式的this，如果沒有，則this是window，
var obj = {
y: () => {
console.log(this === obj); // false
console.log(this); // Window 全域物件
var fn = () => {
console.log(this === obj); // false
console.log(this); // Window 全域物件
}
fn();
}
}
obj.y()
上例中，雖然存在兩個箭頭函式，其實this取決于最外層的箭頭函式，由于obj是個物件而非函式，所以this指向為Window全域物件，
同 bind 一樣，箭頭函式也很“頑固”，我們無法通過 call 和 apply 來改變 this 的指向，即傳入的第一個引數被忽略，
var x = 1
var obj = {
x: 2
}
var a = () => {
console.log(this.x)
console.log(this)
}
a.call(obj)
// 1
// Window 全域物件
a.apply(obj)
// 1
// Window 全域物件
上面的文字描述過多可能有點干澀，那么就看以下的這張流程圖吧，我覺得這個圖總結的很好，圖中的流程只針對于單個規則，
小結
本篇文章介紹了 this 指向的幾種情況，不同的運行環境和呼叫方式都會對 this 產生影響，總的來說，函式 this 的指向取決于當前呼叫該函式的物件，也就是執行時的物件，在這一節中，你需要掌握：
- this 指向全域物件的情況；
- 嚴格模式和非嚴格模式下 this 的區別；
- 函式作為物件的方法呼叫時 this 指向的幾種情況；
- 作為建構式時 this 的指向，以及是否 return 的區別；
- 使用 call 和 apply 改變呼叫函式的物件；
- bind 創建的函式中 this 的指向；
- 箭頭函式中的 this 指向，
最后
關于JavaScript的面試題小編也整理出來了，有需要的小伙伴請自行領取哦！資料領取直通車：JS面試題資料
對于JS的初學者而言，JS當中的this指向很難讓人摸準其脈絡，經常會給你一種模糊美、朦朧美的感覺！因為this并不是固定不變的，它會根據自身所執行的環境的不同而不同，而且在開發的程序中，經常因為對this的不了解出現這樣或那樣的錯誤！所以搞定this的指向是非常非常有必要的！喜歡這篇文章的請評論點贊支持轉發哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275497.html
標籤：其他