JS繼承用法實(shí)例分析
更新時(shí)間：2015年02月05日 15:52:15 作者：magicfly9527
這篇文章主要介紹了JS繼承用法,實(shí)例分析了拷貝繼承、類繼承及原型繼承等的使用技巧,需要的朋友可以參考下
本文實(shí)例分析了JS繼承的用法。分享給大家供大家參考。具體分析如下：
繼承 : 子類不影響父類，子類可以繼承父類的一些功能 ( 代碼復(fù)用 )
屬性的繼承 : 調(diào)用父類的構(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ì)造成引用相同的問題
function extend(obj1,obj2){
for(var i in obj2){
obj1[i] = obj2[i]
}
}
var coder = new Worker('magicfly','frontEnd');
coder.showName();
2. 類繼承
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();
//通過建立一個(gè)臨時(shí)構(gòu)造函數(shù)來解決 ,也稱為代理函數(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或無new的時(shí)候都可以
類式繼承: new構(gòu)造函數(shù)
原型繼承: 無new的對(duì)象
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Javascript 數(shù)組添加一個(gè) indexOf 方法的實(shí)現(xiàn)代碼
Javascript 的字符串有個(gè) indexOf 的方法，能夠返回字符在指定的字符串中的位置，非常有用，本文介紹了如何給 Javascript 數(shù)組也添加一個(gè)類似的方法。2009-09-09
用js替換除數(shù)字與逗號(hào)以外的所有字符的代碼
用js實(shí)現(xiàn)的替換除數(shù)字與逗號(hào)以外的所有字符的代碼，因?yàn)樾枰コ貜?fù)，這樣的話就會(huì)有很多的逗號(hào)需要替換2014-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
javascript中的相等操作符(==與===區(qū)別)
這篇文章主要介紹了javascript中的相等操作符(==與===區(qū)別),需要的朋友可以參考下2019-12-12
在項(xiàng)目中我們往往要做很多很多的空值判斷進(jìn)行容錯(cuò)處理,往往伴隨著三目運(yùn)算、與或、if else來使用,下面這篇文章主要給大家介紹了關(guān)于JavaScript中?.?和??分別是什么的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了js輪播圖代碼，代碼簡(jiǎn)潔，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
這篇文章主要介紹了jquery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
最近在學(xué)習(xí)微信小程序，下面就學(xué)習(xí)的內(nèi)容進(jìn)行總結(jié)，這篇文章主要給大家介紹了關(guān)于微信小程序利用co處理異步流程的方法，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-05-05
使用bootstrapValidator插件進(jìn)行動(dòng)態(tài)添加表單元素并校驗(yàn)
動(dòng)態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則，調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過本文看下具體實(shí)現(xiàn)方法吧2016-09-09
在JavaScript中,幾乎每一個(gè)值都是某種特定類型的對(duì)象,于是ES6也著重提升了對(duì)象的功能性,下面這篇文章主要給大家介紹了關(guān)于es6新增對(duì)象實(shí)用方法的相關(guān)資料,需要的朋友可以參考下2022-05-05