在JavaScript中调用一个带名字的getter函数？

Question

当我在JavaScript中创建一个类，比如这个类。

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"(加上其他函数)

我可以使用function fullName的名字来调用它。

me[“fullName”]();

John Doe

但是，用它的名字调用getter函数会产生一个错误。

me[“get firstName”]();

Uncaught TypeError: me.get firstName is not a function

为什么会发生这种行为？

EDIT：谢谢大家的回复。我知道我可以而且应该把它作为一个属性来访问。但我想知道为什么用它的名字和括号来访问它不能工作。这是否意味着JavaScript有不同种类的函数，因为对一个函数有效的行为对另一个函数无效（当它的名字中有空格时就是getter或setter）？

Answer 1

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

• 函数的名称
• 变量属性的名称

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

这里有一个简单的对象，它的属性是 "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"

这可能会给人一种错误的印象 两个名字都是同一个字符串 但这不可能是真的，因为... 一样 函数对象可能被分配给 不同 属性。

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

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

Getters

getter的情况可能会让人感到困惑，因为表达式中的 obj.a.name 将不会检索函数的名称，但会检索到 謼 然后尝试访问 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 财产 的名称不一定与该产品的名称一致。功能 可能是该财产的价值。

• 财产的识别方法是 财产 名称，而不是可能与之相关联的函数名称。

• 作为getter属性的函数对象，可以用 Object.getOwnPropertyDescriptor(object, propertyName).get

Answer 2

你应该把它作为一个普通的属性来访问，就像这样。

me["firstName"];

但是，如果你已经知道名字，你可以像这样访问firstName的值。

me.firstName

通常情况下，如果你想使用一个变量来访问一个对象的属性，你会使用第一种形式，就像这样。

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

如果你想了解更多关于getter和setter的信息，请查看以下内容 这个 和 这个.

遵循一个完全有效的例子。

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 3

当这样做时：

get firstName() {
    return this._firstName;
}

它定义了一个属性，你必须调用它。

me.firstName;

像这样做：

getFirstName() {
    return this._firstName;
}

其实就是定义了一个getter函数，你可以这样调用它。

me.getFirstName();

也许这对你有帮助 https:/developer.mozilla.orgdedocsWebJavaScriptReferenceFunctions get