ES6 类和ES5 构造函数

96
sunny519111
2018.03.21 17:48 字数 408

ES5的构造函数和ES6的Class区别

  1. ES5的构造函数的原型上的属性和方法可以遍历/ES6 不能够遍历
  2. ES6的类必须通过new调用,构造函数则可以不用
  3. 类不存在变量提升
  4. ES6的类没有私有方法和私有属性(正在提议中)
  5. class多了一个静态方法(static),里面的this指向的是类本身,静态方法可以被子类继承
  6. ES6的静态属性和静态方法
  7. ES6 类多了一个new Target 可以判定new 的构造函数

ES6的继承

实质区别

ES5的继承是通过先创建子类的实例对象this,然后再将父类的属性和方法添加到this上,ES6的实现有所不同,它是先创建父类的实例对象this(通过super方法),然后通过子类的构造函数修改this。

  1. 在super方法调用前,不能使用this

  2. 静态方法也会被子类继承

    class A {
        static hello() {
            console.log('hello')
        }
    }
    class B extends A {
        
    }
    B.hello()
    
  3. super关键字

    • 作为函数的时候,代表父类的构造函数,ES6 规定,子类的构造函数必须执行一次super函数。并且只能在子类的构造函数中使用,用在其他地方会报错。

      // 在子类中调用的时候,this指向的是子类的实例
      super()  ==> A.prototype.constructor.call(this)
      
    • 作为对象的时候,在子类的普通方法中,代表父类的原型对象,在静态方法中,代表父类

js