js中this指向有幾種情況，箭頭函數的this指向誰_你好，我是 JavaScript 的 this

JavaScript 有個關鍵字 this, 時不時冒出來，讓你猜一猜，“我到底指向誰？”

js中this指向有幾種情況。這個 this 指向 window, 那個 this 又是剛剛 new 出來的新對象，這里又冒出來一個指向 call 函數的第一個參數的。

到底什么鬼？一團亂麻。

線索

快刀斬亂麻，這里的快刀同學只會說一句話："this 指向函數執行的環境對象。"

怎么理解

es6箭頭函數this指向？帶著上面的線索，去幾個場景，來看一看，this 在各種情況下，到底指向哪位。

函數調用

function a() {console.log(this)
}a() // window

在瀏覽器中，a 的執行環境即為 window, 所以 this 指向了 window.

方法調用

let obj = {b: function () {console.log(this)}
}obj.b() // obj

當作為對象的方法時，函數的 this 指向其所屬對象。

構造函數

window.age = 100 function GirlFriend () {this.age = 18
}const girlFriend = new GirlFriend()
console.log(girlFriend.age) // 18

箭頭函數和普通函數的區別，從 girlFriend.age 為 18 可以看出，以構造函數的形式執行函數時，this 指向其返回的對象。

改變 this 指向

window.hello = 'Hello, I am window.'let obj = {hello: 'Hello, I am obj.'
}function sayHello () {console.log(this.hello)
}sayHello() // 'Hello, I am window.'
sayHello.call(obj) // 'Hello, I am obj.'
sayHello.apply(obj) // 'Hello, I am obj.'const hi = sayHello.bind(obj)
hi() // 'Hello, I am obj.'

call 方法和 apply 方法接收的第一個參數，是一個為函數指定的 this. 上面的代碼中，第一次函數調用形式執行 sayHello, this 指向的是 window. 后面的 call 和 apply 指定的 this 是對象 obj, sayHello 函數執行這兩個方法時，this 指向了 obj.

bind 方法的第一個參數也是指定的 this, 執行 bind 方法，返回一個擁有指定 this 的函數。上面代碼中的 hi 指向一個函數，這個函數是 this 為 obj 的 sayHello.

箭頭函數

window.hello = 'Hello, I am window.'let obj = {hello: 'Hello, I am obj.',foo: function () {return () => {console.log(this.hello)}}
}let a = obj.foo()
a() // 'Hello, I am obj.'let b = obj.foo
let c = b()
c() // 'Hello, I am window.'

箭頭函數沒有自己的 this, 當箭頭函數內部出現 this, 可將它理解為一個變量——“我沒有這個變量，去我的外面一層找一找有沒有”。所以，箭頭函數的 this, 指向的是定義箭頭函數時的外部環境。

上面代碼中，對象 obj 的方法 foo, 返回一個箭頭函數，該箭頭函數打印 this.hello.

變量 a 的值是 obj.foo() 的返回值，即為箭頭函數。obj.foo() 是方法調用，此時，foo 的 this 指向的是對象 obj. 而 foo 中的箭頭函數用到的 this 是從箭頭函數的外部（即 foo）拿到的，也指向 obj.

對象 obj 的 foo 賦值給了變量 b, let b = obj.foo 相當于下面的代碼：

let b = function () {return () => {console.log(this.hello)}
}

接下來執行 b, 把返回的箭頭函數賦值給 c. 此時，執行 b 是一次函數調用，函數 b 的 this 指向的是它的運行環境 window. 箭頭函數拿到的 this, 是它外層函數的 this, 也就是 window.

嚴格模式

'use strict'window.hello = 'Hello, I am window.'function sayHello () {console.log(this.hello)
}sayHello() // Uncaught TypeError: Cannot read property 'hello' of undefined.

在嚴格模式下，函數調用的情景會受到影響。這個時候，函數內的 this 不再指向全局對象。

總結

this 指向函數執行的環境對象。