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

2024-06-08 21:04

本文主要是介绍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

这篇关于ES5/ES6 的继承除了写法以外还有什么区别?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1043300

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Before和BeforeClass的区别及说明

《Before和BeforeClass的区别及说明》:本文主要介绍Before和BeforeClass的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Before和BeforeClass的区别一个简单的例子当运行这个测试类时总结Before和Befor

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

mybatis的mapper对应的xml写法及配置详解

《mybatis的mapper对应的xml写法及配置详解》这篇文章给大家介绍mybatis的mapper对应的xml写法及配置详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录前置mapper 对应 XML 基础配置mapper 对应 xml 复杂配置Mapper 中的相

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.

Java 关键字transient与注解@Transient的区别用途解析

《Java关键字transient与注解@Transient的区别用途解析》在Java中,transient是一个关键字,用于声明一个字段不会被序列化,这篇文章给大家介绍了Java关键字transi... 在Java中,transient 是一个关键字,用于声明一个字段不会被序列化。当一个对象被序列化时,被