JS繼承用法實(shí)例分析
本文實(shí)例分析了JS繼承的用法。分享給大家供大家參考。具體分析如下:
繼承 : 子類(lèi)不影響父類(lèi),子類(lèi)可以繼承父類(lèi)的一些功能 ( 代碼復(fù)用 )
屬性的繼承 : 調(diào)用父類(lèi)的構(gòu)造函數(shù) call
方法的繼承 : for in : 拷貝繼承 (jquery也是采用拷貝繼承extend)
1. 拷貝繼承
function Person (name){ this.name = name; } Person.prototype.showName =function (){ alert(this.name); } function Worker(name,job){ Person.call(this,name); this.job = job; } extend(Worker.prototype, Person.prototype); //如果用Worker.prototype=Person.prototype的話,會(huì)造成引用相同的問(wèn)題 function extend(obj1,obj2){ for(var i in obj2){ obj1[i] = obj2[i] } } var coder = new Worker('magicfly','frontEnd'); coder.showName();
2. 類(lèi)繼承
function Person (name){ this.name = name; } Person.prototype.showName =function (){ alert(this.name); } function Worker(name,job){ Person.call(this,name); this.job = job; } //Worker.prototype = new Person(); // 這樣繼承會(huì)繼承父級(jí)的不必要屬性 function F(){}; F.prototype = Person.prototype; Worker.prototype = new F(); //通過(guò)建立一個(gè)臨時(shí)構(gòu)造函數(shù)來(lái)解決 ,也稱(chēng)為代理函數(shù) var coder = new Worker('MAGICFLY','START'); coder.showName();
3. 原型繼承
var a = { name : '小明' }; var b = cloneObj(a); b.name = '小強(qiáng)'; //alert( b.name ); alert( a.name ); function cloneObj(obj){ var F = function(){}; F.prototype = obj; return new F(); }
適用情況
拷貝繼承: 通用型的 有new或無(wú)new的時(shí)候都可以
類(lèi)式繼承: new構(gòu)造函數(shù)
原型繼承: 無(wú)new的對(duì)象
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js動(dòng)態(tài)生成按鈕并動(dòng)態(tài)生成8位隨機(jī)數(shù)
用js生成按鈕,動(dòng)態(tài)生成8位隨機(jī)數(shù)的腳本2008-09-09js繪制購(gòu)物車(chē)拋物線動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了js繪制購(gòu)物車(chē)拋物線動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器,平臺(tái),語(yǔ)言的接口,使得你可以訪問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04Open and Print a Word Document
Open and Print a Word Document...2007-06-06基于JS實(shí)現(xiàn)bookstore靜態(tài)頁(yè)面的實(shí)例代碼
本文給大家分享一段核心代碼基于js實(shí)現(xiàn)的bookstore靜態(tài)頁(yè)面,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02如何在uniapp項(xiàng)目中嵌套H5 頁(yè)面
在UniApp中可以通過(guò)使用 web-view 組件來(lái)嵌入H5頁(yè)面,大概思路是在該頁(yè)面的template部分添加web-view組件,設(shè)置src屬性為所需嵌入的H5頁(yè)面地址,感興趣的朋友跟隨小編一起看看吧2024-02-02微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值,用于表單驗(yàn)證。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11老生常談js動(dòng)態(tài)添加事件--- 事件委托
下面小編就為大家?guī)?lái)一篇老生常談js動(dòng)態(tài)添加事件--- 事件委托。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07