this为什么会为undefined?-京东云开发者社区

### 一、前言
#### 普通function定义的函数
‘运行环境’也是对象，`this`指向[运行时所在的对象](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)。
如下：

> 如果一个函数在全局环境运行，this就指向顶层对象（浏览器中为window对象）；
> 如果一个函数作为某个对象的方法运行，this就指向那个对象；
> 如果一个函数作为构造函数，this指向它的实例对象。

#### 箭头函数

函数体内的`this`对象，就是[定义时所在的对象](http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0)，而不是使用时所在的对象。

本来记住这几点已经可以了，`this`最终找到是可能`window`，但是`undefined`是怎么又是怎么来的，本妹子下面将一步步分析。

### 二、问题点:undefined是怎么来的

综上所述，this指向运行时所在的对象或指向定义时所在的对象，但是这个对象可能最后找到是`window`,但都不可能是`undefined`，那么`undefined`是怎么来的呢？
```html
<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文件上加上严格模式。

![image.png](https://raoenhui.github.io/images/190815/1.jpg)

用了严格模式**"use strict"**，[严格模式下无法再意外创建全局变量]([https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)
)，所以`this`不为`window`而为`undefined`
```html
<html>
<script type="text/javascript">
"use strict";  
var foo = function foo(){
    console.log(this)
};
foo();//undefined
</script>
</html>
```

### 四、进阶问题：严格模式对箭头函数没有效果

严格模式为什么对箭头函数没有效果，返回还是`window`？
```html
<html>
<script type="text/javascript">
"use strict";
var foo = () => {
    console.log(this)
};
foo(); //Window
</script>
</html>
```
### 五、进阶问题回答

[Given that `this` comes from the surrounding lexical context, `strict mode` rules with regard to `this` are ignored.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Relation_with_strict_mode)

[lexical means that this refers to the this value of a lexically enclosing function. ](http://www.ecma-international.org/ecma-262/6.0/#sec-math.exp)

综上所述，在箭头函数中，`this`为`lexical `类型,`lexical`意味着这个`this`指是所在封闭函数中`this`，所以严格模式会自动忽视`use strict`，所以`this`如下所示:
```html
<html>
<script type="text/javascript">
var foo = () => {
    "use strict";
    console.log(this)
};
foo(); //Window
</script>
</html>
```
箭头函数中，`this`指向运行时所在的对象，而`use strict`被移到函数内了，所以`this`为全局变量`window`。

Happy coding ~~ ^ ^

### 相关链接

> [严格模式 - JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)

> [Arrow functions - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Relation_with_strict_mode)

> [ECMAScript 2015 Language Specification – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-math.exp)

> [函数的扩展 - ECMAScript 6入门](http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0)

> [use strict in javascript not working for fat arrow? - Stack Overflow](https://stackoverflow.com/questions/36427862/use-strict-in-javascript-not-working-for-fat-arrow)