zoukankan      html  css  js  c++  java
  • 【ES6】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

    转自:https://blog.csdn.net/qq_43540219/article/details/108174314

  • 相关阅读:
    wamp集成环境安装后无法启动的问题
    jquery点击内层的click事件时会触发外层的click事件
    js 控制文本框只能输入数字
    第七届飞思卡尔智能车比赛的赛道边缘提取第一篇博客
    多级菜单,多级下拉列表解决方案(收藏) 西安
    ASP.NET 从Excel文件导入数据到数据库(笔记) 西安
    动态构造地址栏参数 西安
    我觉得我应该要回来了 西安
    SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志(转) 西安
    Web.Config 分析 西安
  • 原文地址:https://www.cnblogs.com/vickylinj/p/14433761.html
Copyright © 2011-2022 走看看