首頁  >  文章  >  web前端  >  詳解JavaScript繼承方式(二)

詳解JavaScript繼承方式(二)

零到壹度
零到壹度原創
2018-03-22 14:24:21972瀏覽

這篇開始寫幾個工具函數實作類別的擴充。每個工具函數都是針對特定的寫類方式(習慣)。這篇按照建構函數方式寫類別:屬性(字段)和方法都掛在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn