Javascript 原型属性阴影

Question

我对 Javascript 原型制作机制有点困惑。我有以下代码：

function Person () {
  this.name = "no name";
  this.setName = function (n) {
    this.name = n;
  }
}

function Student () {
  this.id = "123";
}
Student.prototype = new Person();

s = new Student();
s.setName("Klaus");

代码执行后对象s有两个名字。对象本身中的名称 "Klaus" 及其原型中的名称 "no name"。我知道属性被遮蔽并且工作正常，但这感觉不自然？！有没有更好的方法只使用原型的属性？

Answer 1

您可以直接在原型属性上工作，但这会花费不成比例的工作量，并且可能不是最佳实践。相反，您可以在正确的 this 上下文中调用 Person 构造函数。

首先，强烈推荐使用Object.create而不是new运算符，当赋值给函数的prototype属性时。使用 new 运算符，会调用 Person 构造函数，但在错误的 this 上下文中。为防止这种情况，您可以 link 他们这样：

Student.prototype = Object.create(Person.prototype);

相反，如果您想在 Student 中调用原型 Link (Person) 的构造函数，您可以 call 在构造函数中使用正确的 this 上下文：

function Student () {
  Person.call(this);
  this.id = "123";
}

此外，除非您想为每个实例创建一个函数，否则我会将 setName 函数移动到 Person 的 [[Prototype]]:

function Person () {
  this.name = "no name";
}

Person.prototype.setName = function (n) {
  this.name = n;
}

function Student () {
  Person.call(this); // Call the Person constructor
  this.id = "123";
}
Student.prototype = Object.create(Person.prototype);

s = new Student();
// s.name is 'no name'
s.setName("Klaus");
// s.name is 'Klaus'

或者，正如@Teemu 提到的，您也可以将 name 属性放在 Person.prototype 上以将其用作默认值：

function Person () {
}

Person.prototype.setName = function (n) {
  this.name = n;
}

Person.prototype.name = "no name"; // Define the name directly

function Student () {
  Person.call(this); // you only need this, if there are other things happening in the Person constructor that you need as well
  this.id = "123";
}
Student.prototype = Object.create(Person.prototype);

s = new Student();
// s.name is 'no name'
s.setName("Klaus");
// s.name is 'Klaus'

Javascript 原型属性阴影

Javascript prototype property shadowed

javascript

prototype

shadowing

Javascript 原型 属性 阴影

Javascript prototype property shadowed

javascript

prototype

shadowing

Javascript 原型属性阴影