建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下JS中原型式和寄生式繼承的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
為漳平等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及漳平網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、漳平網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
原型式繼承
道格拉斯 克勞克福德在2006年寫了一篇文章，題為Prototypal Inhertitance in JavaScript(JavaScript中的原型式繼承)。
在這篇文章中，他介紹了一種實(shí)現(xiàn)繼承的方法，這種方法并沒(méi)有使用嚴(yán)格意義上的構(gòu)造函數(shù)。
他的想法是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象，同時(shí)還不必因此創(chuàng)建自定義類型。
為了達(dá)到這個(gè)目的，他給出了如下函數(shù)。
function object(o) {
function F(){};
F.prototype = o;
return new F();
}在object()函數(shù)內(nèi)部，先創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù)，然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型，最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例對(duì)象。
從本質(zhì)上講，object()對(duì)傳入的對(duì)象執(zhí)行了一次淺復(fù)制。
function object(o){
function F(){};
F.prototype = o;
return new F();
}
var person = {
name: "Shaw",
friends: ["Sharon", "Sandy", "Van"]
}
var person1 = object(person);
/*
person1 = function object(person){
function F(){};
F.prototype = person1;
return new F();
}()
person1 = function object({
name: "Shaw",
friends: ["Sharon", "Sandy", "Van"]
}){
function F(){};
F.prototype = {
name: "Shaw",
friends: ["Sharon", "Sandy", "Van"]
}
return {
}
}
person1 = {
};
{}.__proto__ = {
name: "Shaw",
friends: ["Sharon", "Sandy", "Van"]
}
*/
person1.name = "Roc";
person1.friends.push("Roster");
var person2 = object(person);
person2.name = "Linda";
person2.friends.push("Jobs");
console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Jobs"]克羅克福德主張的這種原型式繼承，要求你必須有一個(gè)對(duì)象可以作為另一個(gè)對(duì)象的基礎(chǔ)。
如果有這么一個(gè)對(duì)象的話，可以把它傳給object()函數(shù)，然后再根據(jù)具體需求對(duì)得到的對(duì)象加以修改即可。
ECMAscript5通過(guò)新增Object.create()方法規(guī)范了原型式繼承。
這個(gè)方法接收兩個(gè)參數(shù)： 一個(gè)用作新對(duì)象原型的對(duì)象和（可選的）一個(gè)為新對(duì)象定義額外屬性的對(duì)象。
在傳入一個(gè)參數(shù)的情況下，Object.create()與object()方法的行為相同。
var person = {
name: "Shaw",
friends: ["Sharon", "Sandy", "Van"]
}
var person1 = Object.create(person);
person1.name = "Roc";
person1.friends.push("Roster");
var person2 = Object.create(person);
person2.name = "Linda";
person2.friends.push("Messi");
console.log(person.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person1.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]
console.log(person2.friends); //["Sharon", "Sandy", "Van", "Roster", "Messi"]Object.create()方法的第二個(gè)參數(shù)與Object.defienProperties()方法的第二個(gè)參數(shù)格式相同：
每個(gè)屬性都是通過(guò)自己的描述符定義的。
以這種方式指定的任何屬性都會(huì)覆蓋原型對(duì)象上的同名屬性。
var person = {
name: "Shaw",
friends: ["Sharon", "Sandy", "Selina"]
}
var person1 = Object.create(person, {
name: {
value: "Roc"
}
})
console.log(person1.name); //"Roc"支持Object.create()方法的瀏覽器有IE9+, Firefox 4+, Opera 12+ 和 Chrome。
適用場(chǎng)景：
在沒(méi)有必要興師動(dòng)眾地創(chuàng)建構(gòu)造函數(shù)，而只想讓一個(gè)對(duì)象與另外一個(gè)對(duì)象保持類似的情況下，原型式繼承是完全可以勝任的。
千萬(wàn)要記住，包含引用類型值的屬性始終都會(huì)共享相應(yīng)的值，就像使用原型模式一樣。
寄生式繼承
寄生式（parasitic）繼承是與原型式繼承緊密相關(guān)的一種思路，并且也是由大神克勞克福推而廣之的。
寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似。
創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來(lái)增強(qiáng)對(duì)象，最后再像真地是它做了所有工作一樣返回對(duì)象。
function object(o){
function F(){};
F.prototype = o;
return new F();
}
function createAnother(original) {
var clone = object(original); //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
clone.sayHi = function(){ //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
console.log("hi");
}
return clone; //返回這個(gè)對(duì)象
}在這個(gè)例子中， createAnother()函數(shù)接收了換一個(gè)參數(shù)，也就是將要作為新對(duì)象基礎(chǔ)的對(duì)象。
然后，把這個(gè)對(duì)象參數(shù)(original)傳遞給object()函數(shù)， 將返回的結(jié)果賦值給clone。
再為clone對(duì)象添加一個(gè)新方法sayHi()，最后返回clone對(duì)象。
可以像下面這樣來(lái)使用createAnother()函數(shù)：
function object(o){
function F(){};
F.prototype = o;
return new F();
}
function createAnother(original) {
var clone = object(original); //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
clone.sayHi = function(){ //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
console.log("hi");
}
return clone; //返回這個(gè)對(duì)象
}
var person = {
name: "Shaw",
friends: ["Sandy", "Sharon", "Van"]
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"這個(gè)例子中的代碼基于person返回一個(gè)新對(duì)象——anotherPerson。新對(duì)象不僅具有person的所有屬性和方法，而且還有還有自己的sayHi()方法。
在主要考慮對(duì)象而不是自定義類型和構(gòu)造函數(shù)的情況下，寄生式繼承也是一種有用的模式。
前面示范繼承模式時(shí)使用的object()函數(shù)不是必需的，任何能夠返回新對(duì)象的函數(shù)都適用于此模式。
以上是“JS中原型式和寄生式繼承的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站欄目：JS中原型式和寄生式繼承的示例分析
標(biāo)題URL：http://fisionsoft.com.cn/article/jpihgi.html
