箭头函数是ES6 出现的新语法,比函数更加简洁;随着浏览器的支持或者使用 Babel 进行编译,使用的场景越来越多。我们知道箭头函数与普通函数相比,没有以下特性:
那箭头函数中的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 指向,但是箭头函数不会,因此是没有自己的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
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions