快捷導(dǎo)航

ES5和ES6中類的區(qū)別總結(jié)

更新時間：2020年12月21日 15:49:53 作者：Totora6

這篇文章主要給大家介紹了ES5和ES6中類的區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

類定義與調(diào)用的區(qū)別

在 ES5 中主要是通過構(gòu)造函數(shù)方式和原型方式來定義一個類，但是在 ES6 新引入了 class 關(guān)鍵字，使之具有了正式類的能力，類（class）是ECMAScript 中新的基礎(chǔ)性語法糖結(jié)構(gòu)。雖然 ES6 類表面上看起來可以支持正式的面向?qū)ο缶幊?，但實際上它背后使用的仍然是原型和構(gòu)造函數(shù)的概念。

使用 ES5 定義一個類并調(diào)用

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 定義一個類并調(diào)用

ES6中有兩種定義類的方式：類聲明和類表達式

class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
let person = new Person();
person.sayName();
//當(dāng)我們使用typeof檢測Person的類型時：
console.log(typeof Person); //function,它的本質(zhì)仍然是函數(shù)

在調(diào)用類時，不管是ES5還是ES6，都必須使用new操作符來進行調(diào)用，不可以直接執(zhí)行。

兩者區(qū)別在于：

ES5這樣調(diào)用不會報錯，可以正常執(zhí)行（因為ES5中的類和普通函數(shù)幾乎沒有本質(zhì)上的區(qū)別）

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'

變量提升

通過以下對比可以發(fā)現(xiàn)，當(dāng)用class聲明類執(zhí)行時會報錯，說明ES6中用class定義的類無法實現(xiàn)變量提升。

函數(shù)受函數(shù)作用域的限制，但是類受塊作用域的限制

//變量提升
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中類的構(gòu)成

類可以包含構(gòu)造函數(shù)方法、實例方法、獲取函數(shù)、設(shè)置函數(shù)、靜態(tài)類的方法。但是空的類定義照樣有效

//空類定義
class Foo {}
//有構(gòu)造函數(shù)的類
class Bar {
 constructor() {}
}
//有獲取函數(shù)的類
class Baz {
 get myBaz() {}
}
//有靜態(tài)方法的類
class Qux {
 static myQux() {}
}

class中的靜態(tài)方法

可以在類上定義靜態(tài)方法。靜態(tài)類成員在類定義中使用static關(guān)鍵字作為前綴，在靜態(tài)成員中，this引用類自身；

與原型成員類似，靜態(tài)成員每個類上只能有一個；

static聲明的靜態(tài)屬性和方法都可以被子類繼承。

class Person {
 constructor() {
  //添加到this的所有內(nèi)容都會存在于不同的實例上
  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'); //不會出現(xiàn)在實例中
 }
 job() {
  console.log('student');
 }
}
Person.name(); //Totora

繼承

ES5中的繼承實質(zhì)上是先創(chuàng)建子類的實例對象，再將父類的方法添加到this上（Parent.apply(this)），通過原型或構(gòu)造函數(shù)機制來實現(xiàn)

ES6的繼承實際上是先創(chuàng)建父類的實例對象this，然后再用子類的構(gòu)造函數(shù)修改this。

ES6中類之間通過extends關(guān)鍵字，就可以繼承任何擁有[[Construct]]和原型的對象，在很大程度上，這不僅i僅可以繼承一個類，也可以繼承普通的構(gòu)造函數(shù)（保持向后兼容）

ES6中派生類的方法可以通過super關(guān)鍵字引用它們的原型，這個關(guān)鍵字只能在派生類中使用，而且僅限于類的構(gòu)造函數(shù)、實例方法和靜態(tài)方法的內(nèi)部。在類構(gòu)造函數(shù)中使用super可以調(diào)用父類構(gòu)造函數(shù)。

//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調(diào)用父類
  this.c = c;
 }
 childMethods() {
  return this.c + ',' + super.parentMethods() //通過super實例化調(diào)用父類
 }
}
const point = new child(1, 2, 3);
console.log(point.childMethods());