js類式繼承與原型式繼承詳解
本文實(shí)例為大家分享了js類式繼承與原型式繼承相關(guān)代碼,供大家參考,具體內(nèi)容如下
1.js類式繼承
/* -- 類式繼承 -- */
//先聲明一個(gè)超類
function Person(name) {
this.name = name;
}
//給這個(gè)超類的原型對(duì)象上添加方法 getName
Person.prototype.getName = function() {
return this.name;
}
//實(shí)例化這個(gè)超
var a = new Person('Darren1')
console.log(a.getName());//Darren1
//再聲明類
function Programmer(name, sex) {
//這個(gè)類中要調(diào)用超類Person的構(gòu)造函數(shù),并將參數(shù)name傳給它
Person.call(this, name);
this.sex = sex;
}
//這個(gè)子類的原型對(duì)象等于超類的實(shí)例
Programmer.prototype = new Person();
//因?yàn)樽宇惖脑蛯?duì)象等于超類的實(shí)例,所以prototype.constructor這個(gè)方法也等于超類構(gòu)造函數(shù),你可以自己測(cè)試一下,如果沒這一步,console.log(Programmer.prototype.constructor這個(gè)是Person超類的引用,所以要從新賦值為自己本身
console.log(Programmer.prototype.constructor);
/*function Person(name) {
this.name = name;
} */
Programmer.prototype.constructor = Programmer;
console.log(Programmer.prototype.constructor);
/*function Programmer(name, sex) {
Person.call(this, name);
this.sex = sex;
}
*/
//子類本身添加了getSex 方法
Programmer.prototype.getSex = function() {
return this.sex;
}
//實(shí)例化這個(gè)子類
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//繼承超類的方法
console.log(_m.getName());//Darren2
2.js原型式繼承
/* -- 原型式繼承 -- */
//clone()函數(shù)用來創(chuàng)建新的類Person對(duì)象
var clone = function(obj) {
4
var _f = function() {};
//這句是原型式繼承最核心的地方,函數(shù)的原型對(duì)象為對(duì)象字面量
_f.prototype = obj;
return new _f;
}
//先聲明一個(gè)對(duì)象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定義一個(gè)Person的子類,只要執(zhí)行一次克隆即可
var Programmer = clone(Person);
//可以直接獲得Person提供的默認(rèn)值,也可以添加或者修改屬性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())
//聲明子類,執(zhí)行一次克隆即可
var Someone = clone(Programmer);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- javascript原型鏈學(xué)習(xí)記錄之繼承實(shí)現(xiàn)方式分析
- [js高手之路]原型式繼承與寄生式繼承詳解
- Javascript中類式繼承和原型式繼承的實(shí)現(xiàn)方法和區(qū)別之處
- 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)文章
JS使用new操作符創(chuàng)建對(duì)象的方法分析
這篇文章主要介紹了JS使用new操作符創(chuàng)建對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)類的定義、new操作符對(duì)象的創(chuàng)建及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
JS實(shí)現(xiàn)兼容性好,帶緩沖的動(dòng)感網(wǎng)頁右鍵菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)兼容性好,帶緩沖的動(dòng)感網(wǎng)頁右鍵菜單效果,可實(shí)現(xiàn)帶有彈性效果并且能夠自定義鼠標(biāo)事件的右鍵菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
Bootstrap中輪播圖插件叫作Carousel ,下面通過本文給大家詳細(xì)介紹了bootstrop中實(shí)現(xiàn)輪播圖效果,需要的朋友參考下2017-06-06
JS回調(diào)函數(shù) callback的理解與使用案例分析
這篇文章主要介紹了JS回調(diào)函數(shù) callback的理解與使用,結(jié)合具體案例形式分析了javascript回調(diào)函數(shù)的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-09-09
JavaScript在IE和Firefox上的差異及相互替代的實(shí)現(xiàn)方法
我們經(jīng)常在處理ie和firefox下的js總會(huì)碰到一些兼容問題,下面是些總結(jié),希望大家仔細(xì)看看研究2008-06-06
JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架,結(jié)合實(shí)例形式分析了javascript針對(duì)運(yùn)動(dòng)中的元素屬性檢測(cè)與判斷相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
JS封裝的自動(dòng)創(chuàng)建表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS封裝的自動(dòng)創(chuàng)建表格的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06

