js 属性继承易错点

在js世界中，原型继承是一个最普通的行为，但是这里面有一个易错点需要我们多加留意。

如下是创建了两个类Person, Student,我们分别在Person的构造函数和原型对象上设置了两个属性：country, gender。
随后定了一个Student类，其拥有自身属性age,同时继承了Person

first

function Person() {
  this.country = 'china'
}

Person.prototype.gender = 'man'

function Student() {
  this.age = 16
}

Student.prototype = new Person

const s = new Student

window.console.log(`s.age=${s.age},s.country=${s.country},s.gender=${s.gender}`); 

上面的console.log打印结果如下：

// s.age=16,s.country=china,s.gender=man

s实例拥有age,country,gender三个属性。

second

我们将person的原型对象属性country设置为japan

Person.prototype.country = 'japan'

我们将其打印

window.console.log(`s.age=${s.age},s.country=${s.country},s.gender=${s.gender}`);

得到的结果如下：

 // s.age=16,s.country=china,s.gender=man

我们看到country没有发生变化，并不等于japan

third

我们将Person的原型对象gender设置为girl

Person.prototype.gender = 'girl'

打印结果如下：

window.console.log(`s.age=${s.age},s.country=${s.country},s.gender=${s.gender}`); 
// s.age=16,s.country=china,s.gender=girl

结论

当Student继承Person实例后，其直接原型对象已经是实例，其祖父类才是Person的原型对象，所以当我们s.country时，其在实例p上已经寻找到了country,并不会去Person.prototype上寻找country，同理，s.gender发生了变化是因为在前两个对象没有找到gender属性，因此大家在用的时候，已定需要注意这一点