ES5 與 ES6 中類的區別
類定義與調用的區別
在 ES5 中主要是通過構造函數方式和原型方式來定義一個類，但是在 ES6 新引入了 class 關鍵字，使之具有了正式類的能力，類（class）是ECMAScript 中新的基礎性語法糖結構。雖然 ES6 類表面上看起來可以支持正式的面向對象編程，但實際上它背後使用的仍然是原型和構造函數的概念。
- 使用 ES5 定義一個類並調用
function Person(name, age, job) {
this.name = "Totora";
this.age = 19;
this.job = "student";
this.sayName = function() {
console.log(this.name);
};
}
let person = new Person();
person.sayName();
-
使用 ES6 定義一個類並調用
-
ES6中有兩種定義類的方式：類聲明和類表達式
class Person {}和const Person = class {};
-
class Person {
constructor() {
this.name = "Totora";
this.age = 19;
this.job = "student";
}
sayName() {
console.log(this.name);
}
}
let person = new Person();
person.sayName();
//當我們使用typeof檢測Person的類型時：
console.log(typeof Person); //function,它的本質仍然是函數
在調用類時，不管是ES5還是ES6，都必須使用new操作符來進行調用，不可以直接執行。
兩者區別在於：
- ES5這樣調用不會報錯，可以正常執行（因爲ES5中的類和普通函數幾乎沒有本質上的區別）
function Person(name, age, job) {
this.name = "Totora";
this.age = 19;
this.job = "student";
this.sayName = function() {
console.log(this.name);
};
}
let person = Person();
console.log(person); //undefined
- ES6會報錯
class Person {
constructor() {
this.name = "Totora";
this.age = 19;
this.job = "student";
}
sayName() {
console.log(this.name);
}
}
let person =Person();
console.log(person);
person.sayName(); //Class constructor Person cannot be invoked without 'new'
變量提升
-
通過以下對比可以發現，當用class聲明類執行時會報錯，說明ES6中用class定義的類無法實現變量提升。
-
函數受函數作用域的限制，但是類受塊作用域的限制
//變量提升
let person = new Person()
function Person(name, age, job) {
this.name = "Totora";
this.age = 19;
this.job = "student";
this.sayName = function() {
console.log(this.name);
};
}
person.sayName(); //Totora
let person = new Person();
class Person {
constructor() {
this.name = "Totora";
this.age = 19;
this.job = "student";
}
sayName() {
console.log(this.name);
}
}
person.sayName(); // Cannot access 'Person' before initialization
class中類的構成
類可以包含構造函數方法、實例方法、獲取函數、設置函數、靜態類的方法。但是空的類定義照樣有效
//空類定義
class Foo {
}
//有構造函數的類
class Bar {
constructor() {
}
}
//有獲取函數的類
class Baz {
get myBaz() {
}
}
//有靜態方法的類
class Qux {
static myQux() {
}
}
class中的靜態方法
- 可以在類上定義靜態方法。靜態類成員在類定義中使用static關鍵字作爲前綴，在靜態成員中，this引用類自身；
- 與原型成員類似，靜態成員每個類上只能有一個；
- static聲明的靜態屬性和方法都可以被子類繼承。
class Person {
constructor() {
//添加到this的所有內容都會存在於不同的實例上
this.locate = () => console.log('instance', this);
}
//定義在類的原型對象上
locate() {
console.log('prototype', this);
}
//定義在類本身上
static locate() {
console.log('class', this);
}
}
let p = new Person();
p.locate(); //instance Person { locate: [Function (anonymous)] }
Person.prototype.locate(); //prototype {}
Person.locate(); //class [class Person]
class Person {
static name() {
this.job(); //此處的this指向類
}
static job() {
console.log('Totora'); //不會出現在實例中
}
job() {
console.log('student');
}
}
Person.name(); //Totora
繼承
- ES5中的繼承實質上是先創建子類的實例對象，再將父類的方法添加到this上（Parent.apply(this)），通過原型或構造函數機制來實現
- ES6的繼承實際上是先創建父類的實例對象this，然後再用子類的構造函數修改this。
- ES6中類之間通過extends關鍵字，就可以繼承任何擁有[[Construct]]和原型的對象，在很大程度上，這不僅i僅可以繼承一個類，也可以繼承普通的構造函數（保持向後兼容）
- ES6中派生類的方法可以通過super關鍵字引用它們的原型，這個關鍵字只能在派生類中使用，而且僅限於類的構造函數、實例方法和靜態方法的內部。在類構造函數中使用super可以調用父類構造函數。
//ES5中的繼承
function parent(a,b) {
this.a = a;
this.b = b;
}
function child(c) {
this.c = c;
}
parent.call(child, 1, 2); //子級來繼承父級
child.prototype = new parent(1, 2);
//ES6中的繼承
class parent {
constructor(a, b) {
this.a = a;
this.b = b;
}
parentMethods() {
return this.a + this.b
}
}
class child extends parent {
constructor(a, b, c) {
super(a, b); //通過super調用父類
this.c = c;
}
childMethods() {
return this.c + ',' + super.parentMethods() //通過super實例化調用父類
}
}
const point = new child(1, 2, 3);
console.log(point.childMethods());