[js高手之路]原型式繼承與寄生式繼承
阿新 • • 發佈:2017-09-06
原型式繼承 寄生式繼承
一、原型式繼承本質其實就是個淺拷貝,以一個對象為模板復制出新的對象
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高手之路]原型式繼承與寄生式繼承