当前位置: 首页 > 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…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...