[js高手之路]原型式繼承與寄生式繼承詳解
一、原型式繼承本質(zhì)其實(shí)就是個(gè)淺拷貝,以一個(gè)對(duì)象為模板復(fù)制出新的對(duì)象
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函數(shù)中,以對(duì)象o為模板,在object函數(shù)體里面,定義一個(gè)構(gòu)造函數(shù),讓構(gòu)造函數(shù)的原型對(duì)象(prototype)指向o,
返回構(gòu)造函數(shù)的一個(gè)實(shí)例,這樣就可以訪問到對(duì)象o的所有屬性和方法.
二、因?yàn)樵褪嚼^承是個(gè)淺拷貝,所以引用類型的數(shù)據(jù)共享在不同的實(shí)例之間
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數(shù)組,obj3的skills結(jié)果就是其他實(shí)例改變的結(jié)果
三、在es5中,新增了一個(gè)函數(shù)Object.create()實(shí)現(xiàn)了原型式繼承
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
四,寄生式繼承就是把原型式繼承再次封裝,然后在對(duì)象上擴(kuò)展新的方法,再把新對(duì)象返回
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
以上這篇[js高手之路]原型式繼承與寄生式繼承詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式分析
- Javascript中類式繼承和原型式繼承的實(shí)現(xiàn)方法和區(qū)別之處
- js類式繼承與原型式繼承詳解
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
- JS繼承--原型鏈繼承和類式繼承
- javascript學(xué)習(xí)筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
- JavaScript原型式繼承實(shí)現(xiàn)方法
相關(guān)文章
JavaScript異步回調(diào)的Promise模式封裝實(shí)例
這篇文章主要介紹了JavaScript異步回調(diào)的Promise模式封裝實(shí)例,本文通過分析easyjs的源碼得出,實(shí)例均參考easyjs,需要的朋友可以參考下2014-06-06JS+CSS實(shí)現(xiàn)滾動(dòng)數(shù)字時(shí)鐘效果
本篇文章教給大家用JS代碼配合CSS樣式來實(shí)現(xiàn)滾動(dòng)時(shí)鐘的動(dòng)畫效果,一起來學(xué)習(xí)下。2017-12-12Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼
通過控制器創(chuàng)建一個(gè)Index視圖,寫入下列HTML代碼,這里我創(chuàng)建了一個(gè)分部視圖,不創(chuàng)建直接寫在同一個(gè)頁(yè)面也是一樣的效果。這篇文章主要介紹了Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單 ,需要的朋友可以參考下2018-09-09js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作實(shí)例詳解
這篇文章主要介紹了js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實(shí)例形式分析了哈希表的原理、哈希鍵值對(duì)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
這篇文章主要介紹了JS數(shù)據(jù)雙向綁定原理與用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)據(jù)雙向綁定相關(guān)原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11