[JavaScript][ES6]ES5/ES6 的继承除了写法以外还有什么区别？

缺乏、安全感 2022-11-30 01:41 214阅读 0赞

## ES5/ES6 的继承除了写法以外还有什么区别？ ##

#### 1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。 ####

const bar = new Bar(); // it's ok
    function Bar() { 
      this.bar = 42;
    }
    
    const foo = new Foo(); 
    //Cannot access 'Foo' before initialization
    //初始化前不能访问Foo
    //说明在这行代码下面的Foo的声明被提升了,只是还没有初始化
    //与var变量的提升作对比，var变量的提升会初始化为undefined
    class Foo { 
      constructor() { 
        this.foo = 42;
      }
    }

#### 2.class 声明内部会启用严格模式。 ####

// 引用一个未声明的变量
    function Bar() { 
      baz = 42; // it's ok，调用后会自动声明为一个全局变量
    }
    const bar = new Bar();
    
    class Foo { 
      constructor() { 
        fol = 42; // ReferenceError: fol is not defined
      }
    }
    const foo = new Foo();

#### 3.class 的所有方法（包括静态方法和实例方法）都是不可枚举的。 ####

// 引用一个未声明的变量
    function Bar() { 
      this.bar = 42;
    }
    Bar.answer = function() { 
      return 42;
    };
    Bar.prototype.print = function() { 
      console.log(this.bar);
    };
    const barKeys = Object.keys(Bar); // ['answer']
    const barProtoKeys = Object.keys(Bar.prototype); // ['print']
    
    class Foo { 
      constructor() { 
        this.foo = 42;
      }
      static answer() { 
        return 42;
      }
      print() { 
        console.log(this.foo);
      }
    }
    const fooKeys = Object.keys(Foo); // []
    const fooProtoKeys = Object.keys(Foo.prototype); // []

#### 4.class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有\[\[construct\]\]，不能使用 new 来调用。 ####

function Bar() { 
      this.bar = 42;
    }
    Bar.prototype.print = function() { 
      console.log(this.bar);
    };
    
    const bar = new Bar();
    const barPrint = new bar.print(); // it's ok
    
    class Foo { 
      constructor() { 
        this.foo = 42;
      }
      print() { 
        console.log(this.foo);
      }
    }
    const foo = new Foo();
    const fooPrint = new foo.print(); // TypeError: foo.print is not a constructor

#### 5.必须使用 new 调用 class。 ####

function Bar() { 
      this.bar = 42;
    }
    const bar = Bar(); // it's ok
    
    class Foo { 
      constructor() { 
        this.foo = 42;
      }
    }
    const foo = Foo(); // TypeError: Class constructor Foo cannot be invoked without 'new'

#### 6.class 内部无法重写类名。 ####

function Bar() { 
      Bar = 'Baz'; // it's ok
      this.bar = 42;
    }
    const bar = new Bar();
    // Bar: 'Baz'
    // bar: Bar {bar: 42} 
    
    class Foo { 
      constructor() { 
        this.foo = 42;
        Foo = 'Fol'; // TypeError: Assignment to constant variable
      }
    }
    const foo = new Foo();
    Foo = 'Fol'; // it's ok

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript、ES5和ES6的介绍和区别

JavaScript简介 JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。 JavaScript由三部分组成：

末蓝、/ 2023年08月17日 17:38/ 0 赞/ 121 阅读

相关 ES5和ES6中的继承

Javascript中的继承一直是个比较麻烦的问题，prototype、constructor、\_\_proto\_\_在构造函数，实例和原型之间有的复杂的关系，不仔细捋下很

男娘i/ 2023年06月15日 12:28/ 0 赞/ 16 阅读

相关 [JavaScript][ES6]ES5/ES6 的继承除了写法以外还有什么区别？

ES5/ES6 的继承除了写法以外还有什么区别？ 1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

缺乏、安全感/ 2022年11月30日 01:41/ 0 赞/ 215 阅读

相关 JavaScript、ES5和ES6的介绍和区别

什么是JavaScript JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了）动态：在运行

柔情只为你懂/ 2022年08月28日 09:55/ 0 赞/ 205 阅读

相关 JavaScript、ES5和ES6的介绍和区别

距离[ES6][]发布已有半年，对于ES6和ES5，你了解多少？这篇文章讲了[JavaScript][]，ES5，ES6的一些介绍和区别，挺详细的，结尾附录：[ES5, ES6

冷不防/ 2022年05月28日 06:56/ 0 赞/ 258 阅读

相关 JavaScript、ES5和ES6的介绍和区别

转载出处：[https://www.cnblogs.com/fuheng01/articles/JS.html][https_www.cnblogs.com_fuheng01_

小灰灰/ 2022年05月10日 08:06/ 0 赞/ 240 阅读

相关 ES5和ES6继承的区别

ES5的继承方法可以看这篇： [https://blog.csdn.net/qq593249106/article/details/83098432][https_blog

Dear 丶/ 2022年05月09日 15:26/ 0 赞/ 255 阅读

相关 ES5和ES6继承

ES5常用七种继承方案和ES6的类继承，有八种继承方案。 ES5：原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、混入方式继承

深碍√TFBOYSˉ_/ 2022年04月24日 15:14/ 0 赞/ 359 阅读

相关 JavaScript、ES5和ES6的介绍和区别

什么是JavaScript JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给[HTML][]网页增加动态功能。（好吧，概念什么最讨厌了）动态

柔情只为你懂/ 2022年02月21日 02:11/ 0 赞/ 352 阅读

相关 ES5和ES6继承

1.ES6继承 class Book{ constructor(title,pages,isbn){ this.title = tit

骑猪看日落/ 2022年01月23日 05:11/ 0 赞/ 355 阅读