前言
箭头函数是ES6 出现的新语法，比函数更加简洁；随着浏览器的支持或者使用 Babel 进行编译，使用的场景越来越多。我们知道箭头函数与普通函数相比，没有以下特性：
- 没有自己的this
- 没有arguments
- 不能用作构造函数，创建对象
那箭头函数中的this 到底是如何确定的呢，this 又指向什么呢，以下将一一解答，并举一些实际例子来理解this 是如何确定的。
箭头函数this 指定
箭头函数具体定义大体如下：
代码语言：javascript复制(param1,param2..) => {
// do something;
}
更多的定义细节可以详见mdn，再看以下一个箭头函数的定义：
代码语言：javascript复制var width = 3;
var height = 3;
const shape = {
width: 2,
height: 2,
getArea: () => {
console.log(this)
return this.width * this.height;
}
}
shape.getArea();
其中getArea 中的this执行的是什么呢？在解答之前，我们先回顾一下普通函数的this 是如何确定的：
- 函数作为构造函数调用，那么this 指向新创建的对象；
- 作为对象的方法，通过对象调用比如 o.fn() 那么this 指向的是对象；
- 使用apply, call, bind 显示绑定函数，那么this 指向传入的对象；
- 在全局中调用，非严格模式下this 为window 对象，严格模式下为undefined;
普通函数在执行的时候会创建函数执行上下文，然后初始化this 指向，但是箭头函数不会，因此是没有自己的this的。this 的指定是词法作用域确定的，也即是说它只会从自己作用域的上一层继承this。因此在上面代码getArea 中this 会指向它的作用域全局对象window 对象，而不是 shape。
箭头函数实例
在了解了一些实例之后我们在看一个例子，你能知道输出的是什么，欢迎后台留言。
代码语言：javascript复制var name = 'window'
class Person {
constructor(name) {
this.name = name;
}
getName = () => {
console.log(this)
console.log(this.name); // this 指向什么呢
}
}
let p = new Person('person');
class Laborer extends Person {
constructor(age) {
super('test');
this.age = age;
}
getAge() {
console.log(this);
}
}
let l = new Laborer(23);
l.getAge();
console.log(l.hasOwnProperty('getName')); // true or false
console.log(l.hasOwnProperty('getAge')); // true or false
参考链接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
