使用 JavaScript 中的名称调用 getter 函数？

Question

当我在 JavaScript 中创建一个像这样的 class 时：

class Person {
    _firstName = "";
    _lastName = "";

    constructor(firstName, lastName) {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    get firstName() {
        return this._firstName;
    }

    get lastName() {
        return this._lastName;
    }

    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

let me = new Person("John", "Doe");

它创建了一个变量 me，它是 Person 的一个实例。它的原型有一些名为“fullName”和“get firstName”的函数（加上其他函数）

我可以通过名称调用函数 fullName 使用：

me[“fullName”]();

John Doe

但是，按名称调用 getter 函数会引发错误：

me[“get firstName”]();

Uncaught TypeError: me.get firstName is not a function

为什么会发生这种行为？

编辑：感谢您的回复。我知道我可以而且应该以属性的形式访问它。但我想了解为什么用方括号符号按名称访问它不起作用。这是否意味着 JavaScript 具有不同类型的功能，因为适用于一个功能的行为不适用于另一个功能（当它的名称中有 space / 是 getter 或 setter)?

Answer 1

您应该像这样正常访问它属性：

me["firstName"];

但是，如果您已经知道名字，则可以像这样访问 firstName 值：

me.firstName

通常情况下，如果您想使用如下变量访问对象的属性，则使用第一种形式：

const person = new Person("John", "Doe");
const propertyName = "firstName";
const firstName = person[propertyName];

如果您想了解更多关于 getter 和设置器的信息，请查看 this and this。

下面是一个完整的示例：

class Person {
    _firstName = "";
    _lastName = "";

    constructor(firstName, lastName) {
        this._firstName = firstName;
        this._lastName = lastName;
    }

    get firstName() {
        return this._firstName;
    }

    get lastName() {
        return this._lastName;
    }

    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

const me = new Person("John", "Doe");
const propertyName = "firstName";
console.log(me["firstName"])
console.log(me.firstName)
console.log(me[propertyName])

Answer 2

执行此操作时：

get firstName() {
    return this._firstName;
}

它正在定义一个属性，你必须调用它：

me.firstName;

这样做：

getFirstName() {
    return this._firstName;
}

实际上是在定义一个getter函数，你可以这样调用它：

me.getFirstName();

也许这有帮助：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/get

Answer 3

当一个函数被分配给一个变量或作为一个属性值（可能是一个getter）时，涉及两个名称：

函数名称
variable/property

这些名称是不同的实体，不一定要相同。

这是一个带有属性 "a" 的简单对象，它的值是一个名为 "b":

的函数

let obj = {
    a: function b() { }
};

console.log("property: ", Object.keys(obj)[0]); // "a"
console.log("function: ", obj.a.name); // "b"

现在当函数没有明确的名字时，它被赋予一个：

let obj = {
    a() { }
};

console.log("property: ", Object.keys(obj)[0]); // "a"
console.log("function: ", obj.a.name); // "a"

这可能给人一种错误的印象，即两个名称是同一个字符串，但这不可能是真的，因为 same 函数对象可能被分配给不同属性：

let obj = {
    a() { }
};
obj.c = obj.a;

console.log("property: ", Object.keys(obj)[1]); // "c"
console.log("function: ", obj.c.name); // "a"

吸气剂

getter 的情况可能会令人困惑，因为表达式 obj.a.name 不会检索函数的名称，但会调用 getter然后尝试访问返回值的name属性

要仍然获得 getter 函数的名称，您可以使用 Object.getOwnPropertyDescriptor 如下：

let obj = {
    get a() { }
};

console.log("property: ", Object.keys(obj)[0]); // "a"
console.log("function: ", Object.getOwnPropertyDescriptor(obj, "a").get.name); // "get a"

getter的函数名默认是这样设置的。但是，您可以使用 Object.defineProperty 将其明确设置为您的愿望，如下所示：

let obj = {};
Object.defineProperty(obj, "a", { 
    get: function b() {},
    enumerable: true 
});

console.log("property: ", Object.keys(obj)[0]); // "a"
console.log("function: ", Object.getOwnPropertyDescriptor(obj, "a").get.name); // "b"

结论

A 属性名称不一定与 function 的名称匹配属性的值。
A 属性由属性名称标识，而不是可能与其关联的函数名称。
可以使用 Object.getOwnPropertyDescriptor(object, propertyName).get

使用 JavaScript 中的名称调用 getter 函数？

Call a getter function with its name in JavaScript?

javascript

ecmascript-6

es6-class

吸气剂

结论