一、前言
普通function定義的函數(shù)
‘運(yùn)行環(huán)境’也是對(duì)象，this指向運(yùn)行時(shí)所在的對(duì)象。
如下：
如果一個(gè)函數(shù)在全局環(huán)境運(yùn)行，this就指向頂層對(duì)象（瀏覽器中為window對(duì)象）；
如果一個(gè)函數(shù)作為某個(gè)對(duì)象的方法運(yùn)行，this就指向那個(gè)對(duì)象；
如果一個(gè)函數(shù)作為構(gòu)造函數(shù)，this指向它的實(shí)例對(duì)象。
箭頭函數(shù)
函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
本來記住這幾點(diǎn)已經(jīng)可以了，this最終找到是可能window，但是undefined是怎么又是怎么來的，本妹子下面將一步步分析。
二、問題點(diǎn):undefined是怎么來的
綜上所述，this指向運(yùn)行時(shí)所在的對(duì)象或指向定義時(shí)所在的對(duì)象，但是這個(gè)對(duì)象可能最后找到是window,但都不可能是undefined，那么undefined是怎么來的呢？
<html>
<script type="text/javascript">
var foo = function foo() {
console.log(this);
};
var foo1 = () => {
console.log(this);
};
foo(); //Window
foo1(); //Window
</script>
</html>
三、回答
我們一般寫js文件都是babel轉(zhuǎn)成ES6的，babel會(huì)自動(dòng)給js文件上加上嚴(yán)格模式。
用了嚴(yán)格模式"use strict"，嚴(yán)格模式下無法再意外創(chuàng)建全局變量，所以this不為window而為undefined
<html>
<script type="text/javascript">
"use strict";
var foo = function foo(){
console.log(this)
};
foo();//undefined
</script>
</html>
四、進(jìn)階問題：嚴(yán)格模式對(duì)箭頭函數(shù)沒有效果
嚴(yán)格模式為什么對(duì)箭頭函數(shù)沒有效果，返回還是window？
<html>
<script type="text/javascript">
"use strict";
var foo = () => {
console.log(this)
};
foo(); //Window
</script>
</html>
五、進(jìn)階問題回答
lexical means that this refers to the this value of a lexically enclosing function.
綜上所述，在箭頭函數(shù)中，this為lexical類型,lexical意味著這個(gè)this指是所在封閉函數(shù)中this，所以嚴(yán)格模式會(huì)自動(dòng)忽視use strict，所以this如下所示:
<html>
<script type="text/javascript">
var foo = () => {
"use strict";
console.log(this)
};
foo(); //Window
</script>
</html>
箭頭函數(shù)中，this指向運(yùn)行時(shí)所在的對(duì)象，而use strict被移到函數(shù)內(nèi)了，所以this為全局變量window。
Happy coding ~~ ^ ^
相關(guān)鏈接
ECMAScript 2015 Language Specification – ECMA-262 6th Edition
use strict in javascript not working for fat arrow? - Stack Overflow
