Question

我理解箭头功能中的“ this”在上执行上下文中指向此。

var name = 'aaa';
const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}
person.getName();

所以我知道getName（）正在上面的代码中记录全局对象的名称。

const name = 'aaa';
const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}
const test = new Person();
test.getName();

但是，此代码中的测试对象是作为Person构造函数创建的对象。因此，我认为测试对象的getName（）与上述代码在对象的方法中使用的相同。我理解错了什么？

Answer 1

const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}

通过这种方式，您已经定义了具有2个属性person和name的对象名称getName。 name的类型是字符串，而getName的类型是函数（箭头函数）。普通功能和箭头功能之间的区别之一是使用this关键字的方式。

由于person是对象而不是函数，因此无法创建该对象的新实例：

var p = new person(); // Error: person is not a constructor

否则，如果Person是一个函数

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}

然后，您可以创建它的新实例：

const test = new Person();

此函数也具有2个属性。这两个属性的类型与第一个属性相同。

对于您的问题，建议您检查函数内的this对象：

const person = {
    name: 'bbb',
    getName: () => {console.log(this)}
}

person.getName();

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {console.log(this)}
}
const test = new Person();
test.getName();

Answer 2

箭头函数中的

this由封闭的词法上下文定义。常规对象未在对象本地定义this。因此，查找继续向外进行，您获得了全局对象。另一方面，将new运算符与函数一起使用时，它会创建一个对象并显式设置this指向该对象。这是箭头函数将看到的this的值，因为这是直接词法上下文中this的值。

这令人困惑，因为常规函数使用不同的规则来定义this。例如，这适用于普通对象：

const person = {
    name: 'bbb',
    // non-arrow function
    getName() { console.log(this.name)}
}
person.getName();

通过组合示例，向外看，可以看到箭头函数定义this的方式：

const Person = function() {
    this.fname = 'Bob';
    this.obj = {
      getName: () => { console.log(this.fname)}
    }
   
}
const test = new Person();
test.obj.getName();

两个箭头功能有什么区别？

2 个答案: