ES5 构造函数与ES6 Class的区别

news/2025/1/7 21:17:28/
  • Class 类中不存在变量提升
    // es5var bar  = new Bar(); // 可行function Bar() {this.bar = 42;}//es6const foo = new Foo(); // Uncaught ReferenceErrorclass Foo {constructor() {this.foo = 42;}}

  • class内部会启用严格模式
    // es5function Bar() {// 引用一个未声明的变量baz = 42; // it's ok}var bar  = new Bar(); // es6class Foo {constructor(){// 引入一个未声明的变量fol = 42;// Uncaught ReferenceError: fol is not defined}}let foo = new Foo();

  • class的所有方法都是不可枚举的
  // es5function Bar() {}   Bar.answer = function () {};Bar.prototype.print = function () {};console.log(Object.keys(Bar));// ["answer"]console.log(Object.keys(Bar.prototype))// ["print"]// es6class Foo {constructor(){}static answer() {}print(){}}console.log(Object.keys(Foo))// []console.log(Object.keys(Foo.prototype));// []

  • class 必须使用new调用
 // es5function Bar(){ }var bar = Bar();// it's ok;// es6class Foo {}let foo = Foo();// Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'

  • class 内部无法重写类名
 // es5 function Bar() {Bar = 'Baz';this.bar = 42;}var bar = new Bar();console.log(bar);// Bar {bar: 42}console.log(Bar);// 'Baz'// es6class Foo {constructor(){this.foo = 42;Foo = 'Fol'; // Uncaught TypeError: Assignment to constant variable.}}let foo = new Foo();Foo = 'Fol';// it's ok
  • class 的继承有两条继承链

一条是: 子类的__proto__ 指向父类

另一条: 子类prototype属性的__proto__属性指向父类的prototype属性.

es6的子类可以通过__proto__属性找到父类,而es5的子类通过__proto__找到Function.prototype

    // es5function Super() {}function Sub() {}Sub.prototype = new  Super();Sub.prototype.constructor = Sub;var sub = new Sub();console.log( Sub.__proto__ === Function.prototype);// true// es6class Super{}class Sub extends Super {}let sub = new Sub();console.log( Sub.__proto__ === Super);// true
  • es5 与 es6子类this的生成顺序不同。

es5的继承是先建立子类实例对象this,再调用父类的构造函数修饰子类实例(Surper.apply(this))。

es6的继承是先建立父类实例对象this,再调用子类的构造函数修饰this。即在子类的constructor方法中必须使用super(),之后才能使用this,如果不调用super方法,子类就得不到this对象。

  • 正是因为this的生成顺序不同,所有es5不能继承原生的构造函数,而es6可以继承
      // es5function MyES5Array() {Array.apply(this, arguments);// 原生构造函数会忽略apply方法传入的this,即this无法绑定,先生成的子类实例,拿不到原生构造函数的内部属性。}MyES5Array.prototype = Object.create(Array.prototype, {constructor: {value: MyES5Array,writable: true,configurable: true,enumerable: true}})var arrayES5 = new MyES5Array();arrayES5[0] = 3;console.log(arrayES5.length);// 0 arrayES5.length = 0;console.log(arrayES5[0]);// 3// es6class arrayES6 extends Array {constructor(...args){super(...args);}}let arrayes6 = new arrayES6();arrayes6[0] = 3;console.log(arrayes6.length);// 1arrayes6.length = 0;console.log(arrayes6[0]);// undefined


http://www.ppmy.cn/news/83220.html

相关文章

o3de 安装

工具依赖: Microsoft Visual Studio 2019 version 16.11.x. 或 Microsoft Visual Studio 2022 version 17.3.x.CMake 3.22.0 or later,建议3.26安装git安装 Git LFS,否则资源无法更新 下载源码: 建立根目录:o3de_dev/…

一次培训带来的思考

“有没有可能做的更好点”, 这是我从我的TL学到的最受益的一句。 背景 故事要从一次培训开始。话说要给部门做一次安全的培训,提升部门里所有人的安全意识。起初的设计是有讲解还有实操,所以最好在线下举行,人数限制而且时间较长…

【SpringBoot】k8s部署使用actuator做健康检查

环境介绍 开发依赖版本Spring Boot3.0.6JDK20 主要的pom依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId> </dependency> <dependency><groupId>org.springframework…

Redis-数据结构

前言 ​ 了解Redis&#xff0c;都大概知道Redis有5种基本数据类型&#xff1a;字符串(string)、列表(list)、哈希(hash)、集合(set)、有序集合(zset)、5.0中Stream数据类型。但是这些数据类型的底层都是按照对象结构与对应的编码组合而成。这也就是说有的底层数据结构可以是多…

代码随想录补打卡 121买卖股票的最佳时机 122 买卖股票的最佳时机 二123买卖股票的最佳时机 三

代码如下 func maxProfit(prices []int) int { //建立一个二维数组 dp[i][0]表示持有股票的最大金钱 dp[i][1] 表示不持有股票的最大金钱 dp : make([][]int,len(prices)) for i,_ : range dp { dp[i] make([]int,2) } dp[0][0] -prices[0] // 第0天持有股票&#xff0c;…

熟练掌握这5招,让Pandas DataFrame列随你调整

熟练运用Pandas进行数据处理和分析的你&#xff0c;是否遇到过DataFrame列顺序排列不顺的情况? 今天教你5种灵活方法&#xff0c;轻松调整Pandas DataFrame的列顺序&#xff0c;让数据处理更得心应手。 1. 使用loc索引器 可以传入一个列序列表给loc索引器来重新排列列顺序。例…

换个花样玩C++(14) 全方位认识C++的左值,右值,左值引用,右值引用,亡值

早期学习C语言的时候,认为可以被修改的左值是放在左边的,右边的则通常放置右值,后来转C++之后,随着C++不断地完善更新,发现有时候越来越捉摸不透C++了,右值已经与它最初的概念完全不一样了,越来越丰富。 这篇文章我尽可能用一些浅显易懂的文字和简要的代码示例来解释下左…

为何AI无法完全理解人类情感?GPT-4能否理解人类的情绪?

在科幻小说和电影里&#xff0c;我们经常看到超级AI人工智能机器人可以理解、感知甚至模拟人类的情感&#xff0c;但在现实世界中&#xff0c;我们距离这个目标还有一段相当长的距离&#xff0c;即使是强大的GPT-4甚至未来的GPT-5。过高夸大AI的体验和性能&#xff0c;往往并不…