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

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

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

原型繼承

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

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

var book ={
name:"js",
alikeBook:["css","html"]
};
//測(cè)試代碼
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" ]

寄生式繼承

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

//寄生式繼承var newBook = createBook(book);newBook.name = "js";newBook.alikeBook.push("new");var otherBook = createBook(book);otherBook.name = "bad";otherBook.alikeBook.push("other");
//聲明基對(duì)象
var book = {
name:"js book",
alikeBook: ["css","html"]
};
function createBook(obj) {
//通過(guò)原型繼承方式創(chuàng)建新對(duì)象
var o = new inheritObject(obj);
o.getName = function () {
console.log(name);
}
//返回拓展后的新對(duì)象
return o;
}
//測(cè)試代碼
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" ]