你不知道的箭头函数

前端知知

发布于 2022-09-29 19:14:06

1800

发布于 2022-09-29 19:14:06

文章被收录于专栏：前端知知

前言

箭头函数是ES6 出现的新语法，比函数更加简洁；随着浏览器的支持或者使用 Babel 进行编译，使用的场景越来越多。我们知道箭头函数与普通函数相比，没有以下特性：

没有自己的this
没有arguments
不能用作构造函数，创建对象

那箭头函数中的this 到底是如何确定的呢，this 又指向什么呢，以下将一一解答，并举一些实际例子来理解this 是如何确定的。

箭头函数this 指定

箭头函数具体定义大体如下：

(param1,param2..) => {
 // do something;
}

更多的定义细节可以详见mdn，再看以下一个箭头函数的定义：

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。

箭头函数实例

在了解了一些实例之后我们在看一个例子，你能知道输出的是什么，欢迎后台留言。

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