一、前言
普通function定义的函数
‘运行环境’也是对象,this
指向运行时所在的对象。
如下:
如果一个函数在全局环境运行,this就指向顶层对象(浏览器中为window对象);
如果一个函数作为某个对象的方法运行,this就指向那个对象;
如果一个函数作为构造函数,this指向它的实例对象。
箭头函数
函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
本来记住这几点已经可以了,this
最终找到是可能window
,但是undefined
是怎么又是怎么来的,本妹子下面将一步步分析。
二、问题点:undefined是怎么来的
综上所述,this指向运行时所在的对象或指向定义时所在的对象,但是这个对象可能最后找到是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
转成ES6
的,babel
会自动给js文件上加上严格模式。
用了严格模式"use strict",严格模式下无法再意外创建全局变量,所以this
不为window
而为undefined
<html>
<script type="text/javascript">
"use strict";
var foo = function foo(){
console.log(this)
};
foo();//undefined
</script>
</html>
四、进阶问题:严格模式对箭头函数没有效果
严格模式为什么对箭头函数没有效果,返回还是window
?
<html>
<script type="text/javascript">
"use strict";
var foo = () => {
console.log(this)
};
foo(); //Window
</script>
</html>
五、进阶问题回答
lexical means that this refers to the this value of a lexically enclosing function.
综上所述,在箭头函数中,this
为lexical
类型,lexical
意味着这个this
指是所在封闭函数中this
,所以严格模式会自动忽视use strict
,所以this
如下所示:
<html>
<script type="text/javascript">
var foo = () => {
"use strict";
console.log(this)
};
foo(); //Window
</script>
</html>
箭头函数中,this
指向运行时所在的对象,而use strict
被移到函数内了,所以this
为全局变量window
。
Happy coding ~~ ^ ^
相关链接
ECMAScript 2015 Language Specification – ECMA-262 6th Edition
use strict in javascript not working for fat arrow? - Stack Overflow