js各種繼承方式介紹
1.原型鏈繼承
function Parent () {
this.name = 'kevin';
}
Parent.prototype.getName = function () {
console.log(this.name);
}
function Child () {
}
Child.prototype = new Parent();
var child1 = new Child();
console.log(child1.getName()) // kevin
2.構(gòu)造繼承
function Parent () {
this.names = ['kevin', 'daisy'];
}
function Child () {
Parent.call(this);
}
var child1 = new Child();
child1.names.push('yayu');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy"]
3.組合繼承
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
var child1 = new Child('kevin', '18');
4.寄生繼承
function createAnother(original){
var clone = Object.create(original); //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
clone.sayHi = function(){ //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
alert("Hi");
};
return clone; //返回這個(gè)對(duì)象
}
var person = {
name: "Bob",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
5.寄生組合式繼承
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name);
}
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
function object(o) {
function F() { }
F.prototype = o;
return new F();
// 通過(guò)構(gòu)造一個(gè)介于 Parent 與 Child 之間的對(duì)象绒疗,并使該對(duì)象的 prototype 屬性指向 Parent 的 prototype對(duì)象故响,
// 來(lái)避開(kāi)通過(guò)調(diào)用 Parent 構(gòu)造函數(shù)的方式來(lái)產(chǎn)生一個(gè) prototype 指向Parent prototype對(duì)象的對(duì)象亭枷。
}
function prototype(child, parent) {
// 不直接child.prototype=parent.prototype呢河爹?
// 原因 : 當(dāng)我們想給 Child 的prototype里面添加共享屬性或者方法時(shí)植捎,如果其 prototype 指向的是 Parent 的 prototype贩挣,那么在 Child 的 prototype 里添加的屬性和方法也會(huì)反映在 Parent 的 prototype 里面剂碴,
// 這明顯是不合理的把将,這樣做的后果是當(dāng)我們只想使用 Parent 時(shí),也能看見(jiàn) Child 往里面扔的方法和屬性忆矛。
// 所以需要每個(gè)構(gòu)造函數(shù)都需要持有自己專用的prototype對(duì)象
var prototype = object(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
prototype(Child, Parent);
var child1 = new Child('kevin', '18');
console.log(child1);
這種方式的高效率體現(xiàn)它只調(diào)用了一次Parent構(gòu)造函數(shù)察蹲,并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性洪碳。與此同時(shí)递览,原型鏈還能保持不變;因此瞳腌,還能夠正常使用 instanceof 和 isPrototypeOf绞铃。開(kāi)發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。