DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js類式繼承與原型式繼承詳解
js類式繼承與原型式繼承詳解
編輯:關於JavaScript     

本文實例為大家分享了js類式繼承與原型式繼承相關代碼,供大家參考,具體內容如下

1.js類式繼承

/* -- 類式繼承 -- */
//先聲明一個超類

function Person(name) {
this.name = name;
}
//給這個超類的原型對象上添加方法 getName 
Person.prototype.getName = function() {
return this.name;
}
//實例化這個超
var a = new Person('Darren1')
console.log(a.getName());//Darren1

//再聲明類

function Programmer(name, sex) {
//這個類中要調用超類Person的構造函數,並將參數name傳給它
Person.call(this, name);
this.sex = sex;
}
//這個子類的原型對象等於超類的實例
Programmer.prototype = new Person();
//因為子類的原型對象等於超類的實例,所以prototype.constructor這個方法也等於超類構造函數,你可以自己測試一下,如果沒這一步,console.log(Programmer.prototype.constructor這個是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;
}
//實例化這個子類
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//繼承超類的方法
console.log(_m.getName());//Darren2

2.js原型式繼承

/* -- 原型式繼承 -- */
//clone()函數用來創建新的類Person對象
var clone = function(obj) {
4
var _f = function() {};
//這句是原型式繼承最核心的地方,函數的原型對象為對象字面量
_f.prototype = obj;
return new _f;
}
//先聲明一個對象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定義一個Person的子類,只要執行一次克隆即可
var Programmer = clone(Person);
//可以直接獲得Person提供的默認值,也可以添加或者修改屬性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())

//聲明子類,執行一次克隆即可
var Someone = clone(Programmer);

以上就是本文的全部內容,希望對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved