詳解JavaScript繼承方式（二）

這篇開始寫幾個工具函數實作類別的擴充。每個工具函數都是針對特定的寫類方式（習慣）。這篇按照建構函數方式寫類別：屬性（字段）和方法都掛在this上。以下分別提供了個類，分別作為父類和子類。

/

/  父类Person
function Person(nationality) {
    this.nationality = nationality;
    this.setNationality = function(n) {this.nationality=n;};
    this.getNationality = function() {return this.nationality;};
}
// 子类Man
    function Man(name) {
    this.name = name;
    this.setName = function(n){this.name=n;};
    this.getName = function(){return this.name;};
}

1，繼承工具函數一

/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 * @param {Object} param 父类构造参数
 */
function extend(subCls, superCls, param) {
superCls.call(subCls.prototype, param);
}

使用如下

extend(Man, Person, 'China');
var m = new Man('jack');
console.log(m.nationality);//China
console.log(m.setNationality('Japan'));
console.log(m.getNationality('Japan'));//Japan

輸出可以看到Man繼承了Person的屬性及所有方法。這種繼承方式於java的很不一樣哦，

class Animal {
int legs;
Animal(int l) {
legs = l;
}
int getLegs() {
return legs;
}
}
public class Person extends Animal{
//属性（字段）
String name;
//构造方法（函数）
Person(int legs, String name) {
super(legs);//调用父类构造器
this.name = name;
}
//方法
String getName() {
return this.name;
}
public static void main(String[] args) {
Person p = new Person(2,"jack");
System.out.println(p.legs);
}
}

Java中，子類別Person在自身建構方法中呼叫父類別建構方法super(legs)，在建立物件的時候直接將父類別建構參數legs:2傳進去，不只傳自己的name:jack。上面JavaScript繼承是在extend時傳父類別建構參數（extend函數的第三個參數），而不是在new Man時將父類別構造參數傳過去。好，模擬Java來實作下extend，這裡巧妙的在子類別上暫存了父類別引用。

 

2，繼承工具函數二

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls, superCls) {
subCls.supr = superCls;
}

還是以Person為父類，來實作子類別Woman

function Woman(nationality, name) {
Woman.supr.call(this, nationality);//和java有点类似哦，在子类中调用父类构造器
this.name = name;
this.setName = function(n){this.name=n;};
this.getName = function(){return this.name;};
}
extend(Woman, Person);

最後，建立物件的方式和java也類似，也就是new的時候同時將父類別建構參數(nationality:Japan)傳進去。

var w = new Woman('Japan', 'lily');
console.log(w.nationality);//Japan
w.setNationality('U.S.A');
console.log(w.getNationality());//U.S.A

以上是詳解JavaScript繼承方式（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！