ES5
類
ES5中并沒有直接定義類的方法,需要我們手動來完成類的定義。
ES5中可以使用構造器函數來創建一個實例,構造器函數和普通函數的區別在于調用方式,構造器函數通過new
操作符來調用。按照慣例,這個構造器的首字母大寫,普通的函數和方法首字母小寫。
通過new
操作符來調用構造器函數,會產生一個新的對象,并把這個對象賦值給構造器函數的this
變量,然后在執行完構造器函數后返回它(如果有顯示的指定返回值,則返回指定的值)。
function Class(arg) {
this.arg = arg; // 定義一個類的屬性
}
// 類的方法則定義在原型上(如果定義在構造器中的話,那么每個實例都會創建方法
// ,這樣造成每個實例都擁有方法(每個方法都不相等),而不是引用同一個方法。)
Class.prototype.method = function () {};
繼承
ES5中可以使用原型鏈來實現繼承。
構造器函數有一個prototype
屬性指向實例的原型對象,而實例的原型對象則有一個constrcutor
屬性指向構造器函數(ES6中實例可以通過__proto__
屬性來訪問原先對象)。
// 定義一個超類
function Super(supArg) {
this.supArg = supArg;
}
Super.prototype.method = function () {};
// 定義一個子類繼承上面的超類
function Sub(supArg, subArg) {
Sub._super = Super.prototype; // 定義一個_super屬性,方便Sub中的方法來引用它。
Super.call(this, supArg); // 實例化超類中的屬性。 也可以這樣Sub._super.constructor.call(this, supArg);
this.subArg = subArg;
}
Sub.prototype = Object.create(Super.prototype); // 設置原型為超類,繼承原型中的方法。
Sub.prototype.constructor = Sub; // 手動指定constructor屬性
Sub.prototypr.method = function () {
Sub._super.method.call(this);
};
ES6
類
ES6中可以使用class
關鍵字來定義一個類。類聲明是不提升的。類的內部只能定義方法,不能定義數據屬性。各方法直接不需要逗號分割。
class A {
constructor(arg) {
this.arg = arg;
}
method() {}
static sMethod() {}
}
繼承
class B {
constructor(bArg) {
this.bArg = bArg;
}
method() {}
static sMethod() {}
}
class A extends B {
constructor(bArg, arg) {
super(bArg);
this.arg = arg;
}
method() {
super.method();
}
}
TypeScript
類
繼承
待續~~~