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

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

1         function object( o ){
 2             var G = function(){};
 3             G.prototype = o;
 4             return new G();
 5         }
 6         var obj = {
 7             name : 'ghostwu',
 8             age : 22,
 9             show : function(){
10                 return this.name + ',' + this.age;
11             }
12         };
13         var obj2 = object( obj );
14         console.log( obj2.name, obj.age, obj.show() );      

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

傳回構造函數的一個執行個體，這樣就可以通路到對象o的所有屬性和方法.

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

1         function object( o ){
 2             var G = function(){};
 3             G.prototype = o;
 4             return new G();
 5         }
 6         var obj = {
 7             skills : [ 'php', 'javascript' ]
 8         };
 9         var obj2 = object( obj );
10         obj2.skills.push( 'python' );
11         var obj3 = object( obj );
12         console.log( obj3.skills ); //php,javascript,python      

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

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

1         var obj = {
2             skills : [ 'php', 'javascript' ]
3         };
4         var obj2 = Object.create( obj );
5         obj2.skills.push( 'python' );
6         var obj3 = Object.create( obj );
7         console.log( obj3.skills ); //php,javascript,python      

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

1         function object( o ){
 2             var G = function(){};
 3             G.prototype = o;
 4             return new G();
 5         }
 6         function CreateObj( srcObj ){
 7             var dstObj = object( srcObj );
 8             dstObj.sayName = function(){
 9                 return this.userName;
10             }
11             return dstObj;
12         }
13         var obj = {
14             userName : 'ghostwu',
15         };
16         var obj2 = CreateObj( obj );
17         console.log( obj2.sayName() ); //ghostwu      

作者:ghostwu, 出處:http://www.cnblogs.com/ghostwu

部落格大多數文章均屬原創，歡迎轉載，且在文章頁面明顯位置給出原文連接配接