为什么惰性 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。
考虑以下代码:
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);
注意:您可以删除带有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。