您好,登錄后才能下訂單哦!
小編給大家分享一下JS中原型式和寄生式繼承的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
道格拉斯 克勞克福德在2006年寫了一篇文章,題為Prototypal Inhertitance in JavaScript(JavaScript中的原型式繼承)。
在這篇文章中,他介紹了一種實現繼承的方法,這種方法并沒有使用嚴格意義上的構造函數。
他的想法是借助原型可以基于已有的對象創建新對象,同時還不必因此創建自定義類型。
為了達到這個目的,他給出了如下函數。
function object(o) { function F(){}; F.prototype = o; return new F(); }
在object()函數內部,先創建一個臨時性的構造函數,然后將傳入的對象作為這個構造函數的原型,最后返回了這個臨時類型的一個新實例對象。
從本質上講,object()對傳入的對象執行了一次淺復制。
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"]
克羅克福德主張的這種原型式繼承,要求你必須有一個對象可以作為另一個對象的基礎。
如果有這么一個對象的話,可以把它傳給object()函數,然后再根據具體需求對得到的對象加以修改即可。
ECMAscript5通過新增Object.create()方法規范了原型式繼承。
這個方法接收兩個參數: 一個用作新對象原型的對象和(可選的)一個為新對象定義額外屬性的對象。
在傳入一個參數的情況下,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()方法的第二個參數與Object.defienProperties()方法的第二個參數格式相同:
每個屬性都是通過自己的描述符定義的。
以這種方式指定的任何屬性都會覆蓋原型對象上的同名屬性。
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。
適用場景:
在沒有必要興師動眾地創建構造函數,而只想讓一個對象與另外一個對象保持類似的情況下,原型式繼承是完全可以勝任的。
千萬要記住,包含引用類型值的屬性始終都會共享相應的值,就像使用原型模式一樣。
寄生式(parasitic)繼承是與原型式繼承緊密相關的一種思路,并且也是由大神克勞克福推而廣之的。
寄生式繼承的思路與寄生構造函數和工廠模式類似。
創建一個僅用于封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最后再像真地是它做了所有工作一樣返回對象。
function object(o){ function F(){}; F.prototype = o; return new F(); } function createAnother(original) { var clone = object(original); //通過調用函數創建一個新對象 clone.sayHi = function(){ //以某種方式來增強這個對象 console.log("hi"); } return clone; //返回這個對象 }
在這個例子中, createAnother()函數接收了換一個參數,也就是將要作為新對象基礎的對象。
然后,把這個對象參數(original)傳遞給object()函數, 將返回的結果賦值給clone。
再為clone對象添加一個新方法sayHi(),最后返回clone對象。
可以像下面這樣來使用createAnother()函數:
function object(o){ function F(){}; F.prototype = o; return new F(); } function createAnother(original) { var clone = object(original); //通過調用函數創建一個新對象 clone.sayHi = function(){ //以某種方式來增強這個對象 console.log("hi"); } return clone; //返回這個對象 } var person = { name: "Shaw", friends: ["Sandy", "Sharon", "Van"] } var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi"
這個例子中的代碼基于person返回一個新對象——anotherPerson。新對象不僅具有person的所有屬性和方法,而且還有還有自己的sayHi()方法。
在主要考慮對象而不是自定義類型和構造函數的情況下,寄生式繼承也是一種有用的模式。
前面示范繼承模式時使用的object()函數不是必需的,任何能夠返回新對象的函數都適用于此模式。
以上是“JS中原型式和寄生式繼承的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。