为什么惰性 getter 使用原型而不是 类?

Why do lazy getters work with prototypes but not with classes?

考虑以下代码:

const defclass = prototype => {
    const constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
};

const Person = defclass({
    constructor: function Person(firstname, lastname) {
        this.firstname = firstname;
        this.lastname  = lastname;
    },
    get fullname() {
        delete this.fullname; // doesn't delete on instances
        return this.fullname = this.firstname + " " + this.lastname;
    }
});

const john = new Person("John", "Doe");
const jane = new Person("Jane", "Doe");

console.log(john.fullname); // John Doe
console.log(jane.fullname); // Jane Doe

之所以有效,是因为 this 上的 属性 赋值隐藏了不存在的 setter。


现在,考虑使用 ES6 的相同代码 类:

class Person {
    constructor(firstname, lastname) {
        this.firstname = firstname;
        this.lastname  = lastname;
    }

    get fullname() {
        delete this.fullname; // doesn't delete on instances
        return this.fullname = this.firstname + " " + this.lastname;
    }
}

const john = new Person("John", "Doe");
const jane = new Person("Jane", "Doe");

console.log(john.fullname); // throws an error because there is no setter
console.log(jane.fullname);

中解释了它不起作用的原因。这是因为我们在原型链中找到了 属性 而它没有 setter。那么,为什么我们使用常规原型时不会抛出相同的错误?

注意:您可以删除带有delete关键字的行而不影响代码的行为。

得到与第一个代码相同的错误:

const defclass = prototype => {
    const constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
};

const Person = defclass({
    constructor: function Person(firstname, lastname) {
        this.firstname = firstname;
        this.lastname  = lastname;
    },
    get fullname() {
        "use strict";
//      ^^^^^^^^^^^^
        return this.fullname = this.firstname + " " + this.lastname;
    }
});

const john = new Person("John", "Doe");
const jane = new Person("Jane", "Doe");

console.log(john.fullname); // John Doe
console.log(jane.fullname); // Jane Doe

只是class代码默认在strict mode

在草率模式下,赋值不起作用但会被忽略,右侧的值是 return 从 getter 编辑而来的。再次访问 .fullname 将再次 运行 getter。