Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Class降级

Class降级

原创
作者头像
剁椒鱼鳞
修改于 2023-06-26 10:29:55
修改于 2023-06-26 10:29:55
25500
代码可运行
举报
文章被收录于专栏:前端小学生前端小学生
运行总次数:0
代码可运行

下列ES6的代码降级为ES5

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Product {
    static count = 0;
    constructor(name, unitPrice, number) {
        this.name = name;
        this.unitPrice = unitPrice;
        this.number = number;
        Product.count++;
    }
    get totalPrice() { // ES6访问器,注意:会同时存在原型和实例上,而且不可枚举(控制台打印即灰色),不能被for-of、for-in等遍历到
        return this.number * this.unitPrice;
    }
    increase() { // 注意:不可枚举,且只能当作普通方法调用,不能通过new形式(new product.increase(),只能product.increase()来使用)来调用
        this.number++;
    }
}
const product = new Product();

分析: 1. class同let、const,有作用域死区,即先声明再使用,没有变量提升,包括方法等参数名也不能一样

2. class必须通过new来进行调用,否则就会报错

3. ES6访问器不可枚举,同时会存在在原型和实例上

4. ES6的方法不可枚举,同时只能当作普通方法调用,不能通过new形式来调用

5. ES6的继承是先将父类实例对象的属性和方法,添加到this上(所以必须先调用super()方法),然后再调用字累的构造函数修改this;ES5的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上。class继承可以实现与安生构造函数的继承,而ES5的不可以。

6. class是在严格模式下执行的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var Product = (function (_Parent) {
    _Parent && _inherits(Product, _Parent);
    function Product(name, unitPrice, number) {
        if (Object.getPrototypeOf(this) !== Product.prototype) { // 当然也是可以绕开,如:var p = Product(); Product.call(p);
            // if (this.__protyo__ !== Product.prototype) { // ES不推荐使用__proto__
            // if (!new.target) { // ES6写法
            throw new TypeError('不能不使用new来调用');
        }
        this.name = name;
        this.unitPrice = unitPrice;
        this.number = number;
        Product.count++;
    }
    Object.defineProperty(Product.prototype, 'totalPrice', {
        get() {
            this.number * this.unitPrice;
        },
        enumerable: false,
    });
    Object.defineProperty(this, 'totalPrice', {
        get() {
            this.number * this.unitPrice;
        },
        enumerable: false,
    });
    Object.defineProperty(Product.prototype, 'increase', {
        value: function () {
            if (Object.getPrototypeOf(this) !== Product.prototype.increase.prototype) { // 当然也是可以绕开,如:var p = Product(); Product.call(p);
                /*
                new product.increase(); increase的this指向了increase的实例
                product.increase(); // increase的this指向了product
                通过以上,判断this指向是不是相同即可
                */
                throw new TypeError('不能不使用new来调用');
            }
            this.number++;
        },
        enumerable: false,
    });
    Product.count = 0;
    // Product.prototype.increase = function () { // 不能这么创建,不然increase会被枚举
    //     this.number++;
    // }
    return Product;
})();

function _inherits(subClass, superClass) {
    if (typeof superClass !== 'function' && superClass !== null) {
        throw new TypeError('superClass expression must either be null or a function, not ' + typeof superClass);
    }
    // 利用寄生继承继承父类原型
    superClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
        }
    })
    // 将子构造函数的__proto__指向父类构造函数,这里的setPrototypeOf方法和create类似,可以看出class继承同时存在两条继承链:子类构造函数的__proto__指向父类,子类原型的__proto__指向父类原型
    if (superClass) {
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
    }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES5的继承和ES6的继承有什么区别?让Babel来告诉你
如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩!
街角小林
2022/03/21
6910
ES5的继承和ES6的继承有什么区别?让Babel来告诉你
JS原生方法原理探究(六)从 Babel 转译过程浅谈 ES6 实现继承的原理
都说 ES6 的 Class 是 ES5 的语法糖,那么 ES6 的 Class 是如何实现的呢?其实现继承的原理又是什么呢?不妨我们通过 Babel 转译代码的方式,看看其中有什么门道。
Chor
2021/06/08
1.2K0
【THE LAST TIME】一文吃透所有JS原型相关知识点
首先我想说,【THE LAST TIME】系列的的内容,向来都是包括但不限于标题的范围。
Nealyang
2019/11/04
1.1K0
JS 继承
用过 React的读者知道,经常用 extends继承 React.Component:
grain先森
2019/03/28
3K0
JS 继承
JavaScript继承的实现方式:原型语言对象继承对象原理剖析
对象的继承:A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。
周陆军
2021/08/14
8290
前端-如何继承 Date 对象?由一道题彻底弄懂 JS 继承
于是,随手用JS中经典的组合寄生法写了一个继承,然后,刚准备完美收工,一运行,却出现了以下的情景:
grain先森
2019/03/29
1.1K0
前端-如何继承 Date 对象?由一道题彻底弄懂 JS 继承
ES5和ES6函数你不知道的区别【面试篇】 前言1. PolyFill2.性能上3 hooks和 class 的性能4.用法上5.总结
1.利用原生 js 撸一个简单的 class; 2.根据上面的用法知道 class 必须通过 new 调用,不能直接调用;
火狼1
2020/05/09
2K0
ES6 + Babel + React低版本浏览器采坑记录
IMWeb前端团队
2018/01/08
1.8K0
自己实现一个VUE响应式--VUE响应式原理
这里的响应式(Reactive)不同于CSS布局的响应式(Responsive), 这里的响应式是指数据和视图的绑定,数据一旦更新,视图会自动更新。下面让我们来看看Vue是怎么实现响应式的,Vue 2.0和Vue 3.0的实现原理还不一样,我们来分开讲。
蒋鹏飞
2020/10/15
6640
自己实现一个VUE响应式--VUE响应式原理
我的 Web 前端面试经历——百度
面试是个漫长的过程,从海投到收获电话面试,一面、二面、三面,一个步骤出错那么后面就宣告终结。同时,面试过程中你也可能会遇到一些面试官的刁难,甚至部分面试官会说些比较打击你的话,但是大部分面试官都是很棒的!
李才哥
2019/07/10
6640
我的 Web 前端面试经历——百度
玩转ES6(四)Set、Map、Class类和decorator 装饰器
在看Class之前建议看一下js的面向对象 https://juejin.im/post/5b8a8724f265da435450c591
前端迷
2019/12/03
8730
Babel下的ES6兼容性与规范
IMWeb前端团队
2017/12/28
2.1K0
Object 中的几个很相似的方法
这里主要讨论这么几个方法,他们用法很相似,但又有所不同。在实际开发中就有可能陷入其中,搞不清到底用哪个方法比较好。下面就开始一一介绍。
多云转晴
2019/10/23
6170
Object 中的几个很相似的方法
前端面试 【JavaScript】— JS如何实现继承?
这样写的时候子类虽然能够拿到父类的属性值,但是问题是父类原型对象中一旦存在方法那么子类无法继承。
越陌度阡
2021/11/22
7800
前端面试 【JavaScript】— JS如何实现继承?
ES6-标准入门·Class 类
直至 ES6,JavaScript 终于有了“类”的概念,它简化了之前直接操作原型的语法,也是我最喜欢的新特性之一,但此类非彼类,它不同于熟知的如 Java 中的类,它本质上只是一颗语法糖。
数媒派
2022/12/01
2900
es6类和继承的实现原理
javascript使用的是原型式继承,我们可以通过原型的特性实现类的继承, es6为我们提供了像面向对象继承一样的语法糖。
ConardLi
2019/09/08
1.7K0
JS面向对象编程
通过instanceof来判断当前的的对象是否是实例化出来的,如果是实例化出来的this指向实例化出来的对象,也就是这里的Person,否则作为普通函数来说当前的this指向window
小丞同学
2021/08/16
4.1K0
类_TypeScript笔记4
TypeScript里的类的定义与ES6 Class规范一致,静态属性,实例属性,访问器等都支持:
ayqy贾杰
2019/06/12
7640
babel到底将代码转换成什么鸟样?
前言 将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代
李成熙heyli
2018/01/05
2.2K0
babel到底将代码转换成什么鸟样?
【ES6基础】Object的新方法
Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6、ES7、ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法。
前端达人
2019/06/04
5340
【ES6基础】Object的新方法
推荐阅读
相关推荐
ES5的继承和ES6的继承有什么区别?让Babel来告诉你
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验