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

一、主要区别

  1. ES5 的继承实质上是先创建子类的实例对象, 然后再将父类的方法添加
    到 this 上(Parent.apply(this)) .

  2. ES6 的继承机制完全不同, 实质上是先创建父类的实例对象 this(所以必
    须先调用父类的 super()方法) , 然后再用子类的构造函数修改 this。

  3. ES5 的继承时通过原型或构造函数机制来实现。

  4. ES6 通过 class 关键字定义类, 里面有构造方法, 类之间通过 extends 关
    键字实现继承。

  5. 子类必须在 constructor 方法中调用 super 方法, 否则新建实例报错。 因
    为子类没有自己的 this 对象, 而是继承了父类的 this 对象, 然后对其进行加工。
    如果不调用 super 方法, 子类得不到 this 对象。

  6. 注意 super 关键字指代父类的实例, 即父类的 this 对象。

  7. 注意: 在子类构造函数中, 调用 super 后, 才可使用 this 关键字, 否则
    报错。

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

const bar = new Bar();  
// it's ok  
function Bar() {  
    this.bar = 42;  
}
const foo = new Foo();  
// ReferenceError: Foo is not defined
class Foo {  
    constructor() {  
        this.foo = 42;  
    }  
}  

二、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();  

三、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);  
// []  

四、class 的所有方法( 包括静态方法和实例方法) 都没有原型对象 prototype, 所以也没有 constructor, 不能使用 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  

必须使用 new 调用 class。

function Bar() {  
    this.bar = 42;  
}
// it's ok
const bar = Bar();  


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

五、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

相关推荐

  1. ES5/ES6 继承除了写法以外还有什么区别

    2024-06-08 21:08:04       45 阅读
  2. ES5/ES6 继承除了写法以外还有什么区别

    2024-06-08 21:08:04       31 阅读
  3. ES6ES5区别

    2024-06-08 21:08:04       51 阅读
  4. es5es6 区别

    2024-06-08 21:08:04       56 阅读
  5. es5es6区别

    2024-06-08 21:08:04       52 阅读
  6. Es6Es5区别

    2024-06-08 21:08:04       27 阅读
  7. es6es5类和 es6类 class 有什么区别

    2024-06-08 21:08:04       45 阅读
  8. this在Es5Es6区别

    2024-06-08 21:08:04       53 阅读
  9. 深入探究ES5ES6主要区别

    2024-06-08 21:08:04       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-08 21:08:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-08 21:08:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-08 21:08:04       82 阅读
  4. Python语言-面向对象

    2024-06-08 21:08:04       91 阅读

热门阅读

  1. Jetpack compose中State和Kotlin Flow对比

    2024-06-08 21:08:04       31 阅读
  2. django支持https

    2024-06-08 21:08:04       35 阅读
  3. 如何反编译jar并修改后还原为jar

    2024-06-08 21:08:04       30 阅读
  4. nacos新版踩坑

    2024-06-08 21:08:04       27 阅读
  5. Openresty人机验证流程

    2024-06-08 21:08:04       25 阅读
  6. 【重学C语言】十九、SDL2 图形化编程的使用

    2024-06-08 21:08:04       33 阅读
  7. SWD端口无法连接如何排查

    2024-06-08 21:08:04       31 阅读