在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
屬性,因此大家在用的時候,已定需要注意這一點