需要在引擎盖下进行解释。在javaScript中的获取和设置

Question

给出下面的代码，即使参数的名称位于开头的firstName，在使用setter设置它并查看对象的属性后，它变成了_firstName。我有 Java 开发背景，这对我来说似乎不合逻辑。有人可以解释一下吗？

class Person {
constructor(firstName, DOB, sport) {
        this.firstName = firstName;
        this.DOB = DOB;
        this.sport = sport;
    }   
get firstName() {  
        return this._firstName;
    }
set firstName(firstName) {
        this._firstName = firstName;   
    }
}

const person1 = new Person('Marko', '2002', 'tennis');`

person1.firstName = 'Luka'; 之后的对象

(Person {_firstName: 'Luka', DOB: '1256', _sport: 'tennis'}
DOB: "1256"
_firstName: "Luka"
_sport: "tennis"
DO: undefined
firstName: (...)
sport: (...)
[[Prototype]]: Object)

我尝试了 person1.firstName = 'Luka'; 并期望对象字段保持firstName，但它变成了_firstName（带下划线） 。我看到我在这一行 this._firstName = firstName; 中进行了此更改，但我不明白如何覆盖变量名称

Answer 1

this.firstName 是设置属性 this._firstName 的方法。

调用 setter 方法 this.firstName = "Marko" 的工作方式与调用 this.firstName("Marko") 等标准方法类似。由于您在构造函数中使用该方法，因此当您实际使用方法 this.firstName 时，“看起来”您正在设置属性 this.firstName 来设置属性 this._firstName。

修改 this.firstName 方法有助于理解这一点：

class Person {
    constructor(firstName, DOB, sport) {
        this.firstName = firstName;
        this.DOB = DOB;
        this.sport = sport;
    }   
get firstName() {  
        return this._firstName;
    }
set firstName(firstName) {
        //this will output on the console whenever the method is being used
        console.log("setter method used");
        this._firstName = firstName;   
    }
}
const person1 = new Person('Marko', '2002', 'tennis');

您应该在控制台上看到 setter 方法被使用过一次。现在尝试将构造函数的第一行更改为 this._firstName = firstName;