1. 程式人生 > >[js高手之路]原型式繼承與寄生式繼承

[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高手之路]原型式繼承與寄生式繼承