- Class 類中不存在變量提升
? // es5
? ? ? ? var bar ?= new Bar(); // 可行
? ? ? ? function Bar() {
? ? ? ? ? ? this.bar = 42;
? ? ? ? }
? ??
//es6
? ? ? ? const foo = new Foo(); // Uncaught ReferenceError
? ? ? ? class Foo {
? ? ? ? ? ? constructor() {
? ? ? ? ? ? ? ? this.foo = 42;
? ? ? ? ? ? }
? ? ? ? }
- class內(nèi)部會(huì)啟用嚴(yán)格模式
? ? // es5
? ?function Bar() {
? ? ? ?// 引用一個(gè)未聲明的變量
? ? ? ?baz = 42; // it's ok
? ?}
? ?var bar ?= new Bar();?
? ?// es6
? ?class Foo {
? ? ? ?constructor(){
? ? ? ? ? ?// 引入一個(gè)未聲明的變量
? ? ? ? ? ?fol = 42;// Uncaught ReferenceError: fol is not defined
? ? ? ?}
? ?}
? ?let foo = new Foo();
- class的所有方法都是不可枚舉的
? // es5
? function Bar() {} ??
? Bar.answer = function () {};
? Bar.prototype.print = function () {};
? console.log(Object.keys(Bar));// ["answer"]
? console.log(Object.keys(Bar.prototype))// ["print"]
? // es6
? class Foo {
? ? ? constructor(){}
? ? ? static answer() {}
? ? ? print(){}
? }
? console.log(Object.keys(Foo))// []
? console.log(Object.keys(Foo.prototype));// []
- class 必須使用new調(diào)用
// es5
? ? function Bar(){ }
? ? var bar = Bar();// it's ok;
? ? // es6
? ? class Foo {
? ? }
? ? let foo = Foo();// Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'
- class 內(nèi)部無法重寫類名
?// es5?
? ? function Bar() {
? ? ? ? Bar = 'Baz';
? ? ? ? this.bar = 42;
? ? }
? ? var bar = new Bar();
? ? console.log(bar);// Bar {bar: 42}
? ? console.log(Bar);// 'Baz'
? ? // es6
? ? class Foo {
? ? ? ? constructor(){
? ? ? ? ? ? this.foo = 42;
? ? ? ? ? ? Foo = 'Fol'; // Uncaught TypeError: Assignment to constant variable.
? ? ? ? }
? ? }
? ? let foo = new Foo();
? ? Foo = 'Fol';// it's ok
- class 的繼承有兩條繼承鏈
一條是: 子類的__proto__ 指向父類
另一條: 子類prototype屬性的__proto__屬性指向父類的prototype屬性.
es6的子類可以通過__proto__屬性找到父類,而es5的子類通過__proto__找到Function.prototype
? ? // es5
? ? function Super() {}
? ? function Sub() {}
? ? Sub.prototype = new ?Super();
? ? Sub.prototype.constructor = Sub;
? ? var sub = new Sub();
? ? console.log( Sub.__proto__ === Function.prototype);// true
? ? // es6
? ? class Super{}
? ? class Sub extends Super {}
? ? let sub = new Sub();
? ? console.log( Sub.__proto__ === Super);// true
- es5 與 es6子類this的生成順序不同。
es5的繼承是先建立子類實(shí)例對(duì)象this,再調(diào)用父類的構(gòu)造函數(shù)修飾子類實(shí)例(Surper.apply(this))。文章來源:http://www.zghlxwxcb.cn/news/detail-462718.html
es6的繼承是先建立父類實(shí)例對(duì)象this,再調(diào)用子類的構(gòu)造函數(shù)修飾this。即在子類的constructor方法中必須使用super(),之后才能使用this,如果不調(diào)用super方法,子類就得不到this對(duì)象。文章來源地址http://www.zghlxwxcb.cn/news/detail-462718.html
- 正是因?yàn)閠his的生成順序不同,所有es5不能繼承原生的構(gòu)造函數(shù),而es6可以繼承
? // es5 ? function MyES5Array() { ? ? ? Array.apply(this, arguments); ? ? ? // 原生構(gòu)造函數(shù)會(huì)忽略apply方法傳入的this,即this無法綁定,先生成的子類實(shí)例,拿不到原生構(gòu)造函數(shù)的內(nèi)部屬性。 ? } ? MyES5Array.prototype = Object.create(Array.prototype, { ? ? ? constructor: { ? ? ? ? ? value: MyES5Array, ? ? ? ? ? writable: true, ? ? ? ? ? configurable: true, ? ? ? ? ? enumerable: true ? ? ? } ? }) ? var arrayES5 = new MyES5Array(); ? arrayES5[0] = 3; ? console.log(arrayES5.length);// 0? ? arrayES5.length = 0; ? console.log(arrayES5[0]);// 3 ? // es6 ? class arrayES6 extends Array { ? ? ? constructor(...args){ ? ? ? ? ? super(...args); ? ? ? } ? } ? let arrayes6 = new arrayES6(); ? arrayes6[0] = 3; ? console.log(arrayes6.length);// 1 ? arrayes6.length = 0; ? console.log(arrayes6[0]);// undefined
到了這里,關(guān)于ES5 構(gòu)造函數(shù)與ES6 Class的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!