javaScript面向?qū)ο缶幊?繼承（二）

scwang90 發(fā)布于2019-08-23 12:03 / 2395人閱讀

摘要：原型繼承原型繼承是對類式繼承的一種封裝，其中的過渡對象就相當(dāng)于類式繼承中的子類，只是在原型式中作為一個過渡對象出現(xiàn)，目的是創(chuàng)建要返回的新的實(shí)例化對象。寄生式繼承聲明基對象通過原型繼承方式創(chuàng)建新對象返回拓展后的新對象測試代碼

原型繼承

原型繼承是對類式繼承的一種封裝，其中的過渡對象就相當(dāng)于類式繼承中的子類，只是在原型式中作為一個過渡對象出現(xiàn)，目的是創(chuàng)建要返回的新的實(shí)例化對象。和類式繼承一樣，父類對象book中指類型的屬性被復(fù)制，引用類型的屬性被共有。

//原型是繼承
function inheritObject(o) {
//聲明一個過渡函數(shù)對象
function F(){}
//過渡對象的原型繼承父類
F.prototype = o;
//返回過渡對象的一個實(shí)例，該實(shí)例的原型繼承了父對象
return new F();
}

var book ={
name:"js",
alikeBook:["css","html"]
};
//測試代碼
var newBook = inheritObject(book);
newBook.name ="ajax";
newBook.alikeBook.push("new xml book");
var otherBook = inheritObject(book);
otherBook.name ="flash";
otherBook.alikeBook.push("other as book");
console.log(newBook.name);//ajax
console.log(newBook.alikeBook);//[ "css", "html", "new xml book", "other as book" ]
console.log(otherBook.name);//flash
console.log(otherBook.alikeBook);//[ "css", "html", "new xml book", "other as book" ]
console.log(book.name);//js
console.log(book.alikeBook);//[ "css", "html", "new xml book", "other as book" ]

寄生式繼承

寄生式繼承是對原型繼承的第二次封裝，并且在封裝的過程中對繼承對象進(jìn)行了擴(kuò)展，這樣新創(chuàng)建的對象不僅僅有父類中的屬性和方法，而且添加了新的屬性和方法。

//寄生式繼承var newBook = createBook(book);newBook.name = "js";newBook.alikeBook.push("new");var otherBook = createBook(book);otherBook.name = "bad";otherBook.alikeBook.push("other");
//聲明基對象
var book = {
name:"js book",
alikeBook: ["css","html"]
};
function createBook(obj) {
//通過原型繼承方式創(chuàng)建新對象
var o = new inheritObject(obj);
o.getName = function () {
console.log(name);
}
//返回拓展后的新對象
return o;
}
//測試代碼
var newBook = createBook(book);
newBook.name = "js";
newBook.alikeBook.push("new");
var otherBook = createBook(book);
otherBook.name = "bad";
otherBook.alikeBook.push("other");
console.log(newBook.name);//ajax
console.log(newBook.alikeBook);//[ "css", "html", "new xml book", "other as book" ]
console.log(otherBook.name);//flash
console.log(otherBook.alikeBook);//[ "css", "html", "new xml book", "other as book" ]
console.log(book.name);//js
console.log(book.alikeBook);//[ "css", "html", "new xml book", "other as book" ]