類定義與調(diào)用的區(qū)別
在 ES5 中主要是通過構(gòu)造函數(shù)方式和原型方式來定義一個(gè)類，但是在 ES6 新引入了 class 關(guān)鍵字，使之具有了正式類的能力，類（class）是ECMAScript 中新的基礎(chǔ)性語法糖結(jié)構(gòu)。雖然 ES6 類表面上看起來可以支持正式的面向?qū)ο缶幊蹋珜?shí)際上它背后使用的仍然是原型和構(gòu)造函數(shù)的概念。
使用 ES5 定義一個(gè)類并調(diào)用
|
1
2
3
4
5
6
7
8
9
10
|
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 定義一個(gè)類并調(diào)用
ES6中有兩種定義類的方式：類聲明和類表達(dá)式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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的類型時(shí)：console.log(typeof Person); //function,它的本質(zhì)仍然是函數(shù) |
在調(diào)用類時(shí)，不管是ES5還是ES6，都必須使用new操作符來進(jìn)行調(diào)用，不可以直接執(zhí)行。
兩者區(qū)別在于：
ES5這樣調(diào)用不會報(bào)錯(cuò)，可以正常執(zhí)行（因?yàn)镋S5中的類和普通函數(shù)幾乎沒有本質(zhì)上的區(qū)別）
|
1
2
3
4
5
6
7
8
9
10
|
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會報(bào)錯(cuò)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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í)行時(shí)會報(bào)錯(cuò)，說明ES6中用class定義的類無法實(shí)現(xiàn)變量提升。
函數(shù)受函數(shù)作用域的限制，但是類受塊作用域的限制
|
1
2
3
4
5
6
7
8
9
10
11
|
//變量提升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 |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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è)置函數(shù)、靜態(tài)類的方法。但是空的類定義照樣有效
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//空類定義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)成員每個(gè)類上只能有一個(gè)；
static聲明的靜態(tài)屬性和方法都可以被子類繼承。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class Person { constructor() { //添加到this的所有內(nèi)容都會存在于不同的實(shí)例上 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] |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
class Person { static name() { this.job(); //此處的this指向類 } static job() { console.log('Totora'); //不會出現(xiàn)在實(shí)例中 } job() { console.log('student'); }}Person.name(); //Totora |
繼承
ES5中的繼承實(shí)質(zhì)上是先創(chuàng)建子類的實(shí)例對象，再將父類的方法添加到this上（Parent.apply(this)），通過原型或構(gòu)造函數(shù)機(jī)制來實(shí)現(xiàn)
ES6的繼承實(shí)際上是先創(chuàng)建父類的實(shí)例對象this，然后再用子類的構(gòu)造函數(shù)修改this。
ES6中類之間通過extends關(guān)鍵字，就可以繼承任何擁有[[Construct]]和原型的對象，在很大程度上，這不僅i僅可以繼承一個(gè)類，也可以繼承普通的構(gòu)造函數(shù)（保持向后兼容）
ES6中派生類的方法可以通過super關(guān)鍵字引用它們的原型，這個(gè)關(guān)鍵字只能在派生類中使用，而且僅限于類的構(gòu)造函數(shù)、實(shí)例方法和靜態(tài)方法的內(nèi)部。在類構(gòu)造函數(shù)中使用super可以調(diào)用父類構(gòu)造函數(shù)。
|
1
2
3
4
5
6
7
8
9
10
|
//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); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//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實(shí)例化調(diào)用父類 }}const point = new child(1, 2, 3);console.log(point.childMethods()); |
總結(jié)
到此這篇關(guān)于ES5和ES6中類區(qū)別的文章就介紹到這了,更多相關(guān)ES5和ES6類的區(qū)別內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_46085073/article/details/111434764
