• 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))。

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)！