当前位置: 首页 > news >正文

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 的继承除了写法以外还有什么区别?

一、主要区别 ES5 的继承实质上是先创建子类的实例对象, 然后再将父类的方法添加 到 this 上(Parent.apply(this)) . ES6 的继承机制完全不同, 实质上是先创建父类的实例对象 this(所以必 须先调用父类的 super()方法…...

LeetCode 第401场周赛个人题解

100325. 找出 K 秒后拿着球的孩子 原题链接 100325. 找出 K 秒后拿着球的孩子 思路分析 数据很小,暴力或者数学方法都行 数学方法就是对 n - 1做带余除法,看跑了奇数还是偶数趟,余数如何,确定位置 时间复杂度:O(…...

C#面:请解释web.config⽂件中的重要节点

在C#中&#xff0c;web.config文件是一个XML格式的配置文件&#xff0c;用于配置ASP.NET应用程序的各种设置。web.config文件中包含了许多重要的节点&#xff0c;下面是一些常见的重要节点及其作用&#xff1a; <configuration>节点&#xff1a;web.config文件的根节点&…...

30分钟吃掉 Pytorch 转 onnx

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学. 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总合集&…...

KEIL5如何打开KEIL4的GD工程

GD官方提供的很多KEIL例程为KIEL4的版本&#xff0c;读者使用的时候可能会碰到使用KEIL5打开KEIL4的工程会报错以及无法找到芯片选型的问题&#xff0c;具体表现如下图所示。 我们该怎么办呢&#xff1f; 下面为大家介绍两种方法&#xff1a; 第一种方法是在keil4的工程后缀u…...

大前端技术分类

1 基础 2 语言 3 类库 4 框架 5 跨栈 6 架构 7 领域 7.1 中后台 7.2 跨平台 7.3 可视化 7.4 智能化 7.5 工程化 7.5.1 规范化 7.5.2 流程化 —— 前端工程化工具系列 7.5.3 模板化 7.5.4 自动化 7.5.5 平台化 7.6 其他 7.6.1 音视频 7.6.2 Web3 7.6.3 区块…...

Android AAudio——C API控制音频流(四)

上一篇文章我们介绍了 C API 中音频流的创建流程,以及打开音频流操作,这里我们再来看一下音频流的其他操作流程 一、音频流操作介绍 1、操作流程图 下图是状态变化流程图,虚线框表示瞬时状态,实线框表示稳定状态。 2、操作函数 上图中主要包含下面几个操作函数: aaudio…...

万能嗅探:视频号下载神器

万能嗅探是一款比较好用资源嗅探软件&#xff0c;界面干净&#xff0c;可以抓取浏览器的网页&#xff0c;不过想必各位主要用来抓取视频号&#xff0c;下面是使用方法。 使用方法 打开万能嗅探客户端&#xff0c;然后打开浏览器&#xff0c;产生网络请求即可&#xff0c;看看…...

python数据分析-ZET财务数据分析

一、公司背景 中兴通讯股份有限公司是一家总部位于中国深圳的跨国公司&#xff0c;致力于为全球客户提供通信设备和解决方案。公司成立于1985年&#xff0c;自成立以来一直致力于为客户提供创新的通信技术和服务。中兴通讯的业务涵盖多个领域&#xff0c;包括但不限于高端路由…...

Leetcode学习

回文数 反转一半数字 第一个想法是将数字转换为字符串&#xff0c;并检查字符串是否为回文。 但是&#xff0c;这需要额外的非常量空间来创建问题描述中所不允许的字符串。 第二个想法是将数字本身反转&#xff0c;然后将反转的数字与原始数字比较&#xff0c;如果它们是相同…...

python 列出面板数据所有变量名

在Python中&#xff0c;处理面板数据&#xff08;Panel Data&#xff09;通常使用pandas库&#xff0c;特别是当数据以DataFrame或Panel&#xff08;尽管Panel在较新版本的pandas中已被弃用&#xff09;的形式存在时。然而&#xff0c;由于Panel的弃用&#xff0c;现代做法通常…...

知乎网站只让知乎用户看文章,普通人看不了

知乎默认不显示全部文章&#xff0c;需要点击展开阅读全文 然而点击后却要登录&#xff0c;这意味着普通人看不了博主写的文章&#xff0c;只有成为知乎用户才有权力查看文章。我想这不是知乎创作者希望的情况&#xff0c;他们写文章肯定是希望所有人都能看到。 这个网站篡改…...

web前端的实习记录:探索、挑战与成长

web前端的实习记录&#xff1a;探索、挑战与成长 踏入web前端实习的旅程&#xff0c;我怀揣着对未知的好奇与对技术的渴望&#xff0c;开始了一段全新的学习与实践。在这个过程中&#xff0c;我经历了四个方面的技术探索&#xff0c;五个方面的挑战应对&#xff0c;六个方面的…...

正则表达式的详解带你认识正则表达式的意义

前言 ​ 我们都知道协议通常通过添加固定的字符、报头、特定的数字等来定义数据的结构和格式。将正确的信息提取出来是十分重要的&#xff0c;而正则表达式可以用来描述和匹配这些固定的结构&#xff0c;从而提取出所需的信息。并且正则表达式还可以处理大量复杂的字符串。这篇…...

中国现在最厉害的书法家颜廷利:东方伟大思想家哲学家教育家

中国书法界名人颜廷利教授&#xff0c;一位在21世纪东方哲学、科学界及当代中国教育领域内具有深远影响力的泰斗级人物&#xff0c;不仅以其深厚的国学修为和对易经姓名学的独到见解著称&#xff0c;还因其选择在济南市历城区的龙泉大街以及天桥区的凤凰山庄与泉星小区等地设立…...

OS常用操作

目录 1 文件和目录操作 1. 1 创建目录 1.2 删除目录 1.3 列出目录内容 1.4 删除文件 1.5 打开和关闭文件描述符 1.6 修改文件权限 1.7 获取和设置文件属性 2 路径操作 2.1 获取当前工作目录 2.2 改变工作目录 2.3 路径操作 2.4 添加 Python 的模块搜索路径列表 3 …...

【IC验证】03 UVM

...

Jira的原理及应用详解(六)

本系列文章简介&#xff1a; 在当今快速发展的软件开发和项目管理领域&#xff0c;有效的团队协作和精确的项目进度追踪是确保项目成功的关键。Jira作为一款广受欢迎的项目和问题追踪工具&#xff0c;以其强大的功能、灵活的定制性以及卓越的用户体验&#xff0c;赢得了全球众多…...

Linux进程间通信之System V

目录 认识system V&#xff1a; system V共享内存&#xff1a; 共享内存的基本原理&#xff1a; 共享内存的数据结构&#xff1a; 共享内存的建立与释放&#xff1a; 共享内存的建立&#xff1a; 共享内存的释放&#xff1a; 共享内存的关联&#xff1a; 共享内存的去关联…...

力扣hot100:394. 字符串解码(递归/括号匹配,字符串之间相对顺序)

LeetCode&#xff1a;394. 字符串解码 本题容易想到用递归处理&#xff0c;在写递归时主要是需要明确自己的递归函数的定义。 不过我们也可以利用括号匹配的方式使用栈进行处理。 1、递归 定义递归函数string GetString(string & s,int & i); 表示处理处理整个numbe…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...