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 { 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());
總結
到此這篇關於ES5和ES6中類區別的文章就介紹到這瞭,更多相關ES5和ES6類的區別內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!