[js高手之路]原型式繼承與寄生式繼承

標籤：原型式繼承   寄生式繼承   

一、原型式繼承本質其實就是個淺拷貝，以一個對象為模板複製出新的對象

function object( o ){            var G = function(){};            G.prototype = o;            return new G();        }        var obj = {            name : ‘ghostwu‘,            age : 22,            show : function(){                return this.name + ‘,‘ + this.age;            }        };        var obj2 = object( obj );        console.log( obj2.name, obj.age, obj.show() );

object函數中，以對象o為模板，在object函數體裡面，定義一個建構函式，讓建構函式的原型對象(prototype)指向o，

返回建構函式的一個執行個體，這樣就可以訪問到對象o的所有屬性和方法.

二、因為原型式繼承是個淺拷貝，所以參考型別的資料共用在不同的執行個體之間

function object( o ){            var G = function(){};            G.prototype = o;            return new G();        }        var obj = {            skills : [ ‘php‘, ‘javascript‘ ]        };        var obj2 = object( obj );        obj2.skills.push( ‘python‘ );        var obj3 = object( obj );        console.log( obj3.skills ); //php,javascript,python

obj2改變了skills數組，obj3的skills結果就是其他執行個體改變的結果

三、在es5中，新增了一個函數Object.create()實現了原型式繼承

var obj = {            skills : [ ‘php‘, ‘javascript‘ ]        };        var obj2 = Object.create( obj );        obj2.skills.push( ‘python‘ );        var obj3 = Object.create( obj );        console.log( obj3.skills ); //php,javascript,python

四，寄生式繼承就是把原型式繼承再次封裝，然後在對象上擴充新的方法，再把新對象返回

function object( o ){            var G = function(){};            G.prototype = o;            return new G();        }        function CreateObj( srcObj ){            var dstObj = object( srcObj );            dstObj.sayName = function(){                return this.userName;            }            return dstObj;        }        var obj = {            userName : ‘ghostwu‘,        };        var obj2 = CreateObj( obj );        console.log( obj2.sayName() ); //ghostwu

本文出自 “ghostwu” 部落格，請務必保留此出處http://ghostwu.blog.51cto.com/11192807/1962954

[js高手之路]原型式繼承與寄生式繼承