ES6中的class是如何实现的？（附Babel编译的ES5代码详解）

最新推荐文章于 2024-10-28 22:12:08 发布
最新推荐文章于 2024-10-28 22:12:08 发布
阅读量676 收藏 1
点赞数
文章标签： 面试 前端 javascript ViewUI
原文链接：https://juejin.im/post/5cde42c8518825259c1777e8
版权

序言

这篇文章主要讲解面试某大厂遇到的一个问题 - ES6中的class语法的实现？

ECMAScript 6 实现了class，class是一个语法糖，使得js的编码更清晰、更人性化、风格更接近面向对象的感觉；也使 IDE 、编译期类型检查器、代码风格检查器等工具更方便地检测代码语法，做静态分析。同样的，这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js。

ES6 class 的 ES5 代码实现

JavaScript语言的传统方法是通过构造函数定义并生成新对象，这种写法和传统的面向对象语言差异较大。所以，ES6引入了Class这个概念作为对象的模板。

constructor

效果：ES6创建一个class会默认添加constructor方法，并在new调用时自动调用该方法。

ES5：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.toString = function () {
    return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
复制代码

ES6：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    toString() {
        return '(' + this.name + ',' + this.age + ')';
    }
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
复制代码

ES6的class中constructor是构造方法，对应的是ES5中的构造函数Person，this关键字则代表实例对象。

里面的class类可以看做是构造函数的另一种写法，由typeof Person === 'function'为true；Person === Person.prototype.constructor为true可以得出，类的数据类型就是函数，类本身指向构造函数。也可以说class的底层依然是function构造函数。

类的公共方法都定义在类的prototype属性上。可以使用Object.assign一次向类添加多个方法。

特别的：class的内部定义的方法都是不可枚举的（non-enumerable），这一点与ES5的行为不一致。

ES5：

Object.keys(Person.prototype); // ['toString']
复制代码

ES6：

Object.keys(Person.prototype); // Person {}
复制代码

不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。

new调用

效果：class类必须使用new调用，否则会报错。

ES5：

Person()// undefined
复制代码

ES6：

Person() // TypeError: Class constructor Person cannot be invoked without 'new'
复制代码

实例的属性

效果：实例的属性是显式定义在this对象上，否则都是定义在原型上。类的所有实例共享一个原型对象，与ES5行为一致。

ES5：

function Person() {
    this.grade = {
        count: 0
    };
}
复制代码

ES6：

class Person {
    constructor() {
        this.grade = {
            count: 0
        };
    }
}
复制代码

此外还要关注新提案，Babel已经支持实例属性和静态属性新的写法。

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

注意：如果静态方法包含this关键字，指的是类。

ES5：

function Person() { }
Person.toSay = function () {
    return 'I love JavaScript.';
};
Person.toSay(); // I love JavaScript.
复制代码

ES6：

class Person {
    static toSay() {
        return 'I love JavaScript.';
    }
}
Person.toSay(); // I love JavaScript.
复制代码

getter 和 setter

ES6提供 get 和 set 关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为，和ES5行为一致。

ES5：

function Person(name) {}
Person.prototype = {
    get name() {
        return 'mia';
    },
    set name(newName) {
        console.log('new name：' + newName);
    }
}
复制代码

ES6：

class Person {
    get name() {
        return 'mia';
    }
    set name(newName) {
        console.log('new name：' + newName);
    }
}
复制代码

其他class特性：

  • 不存在变量提升
  • 不能覆盖声明

ES6 class 底层实现原理 - Babel是如何编译class的

下文主要用babel转码器分别对class中几个主要的方法进行转码，分析ES5的实现方式。 将下面的代码使用babel转码器转换成ES5代码，按照代码结构和功能分块进行讲解。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    toString() {
        return '(' + this.name + ',' + this.age + ')';
    }
}
var p = new Person('Mia', 18);
复制代码

运行模式

"use strict";//class默认开启严格模式
复制代码

私有函数

JS开发者在变量名或函数名前缀加下划线，一般表示私有。

前缀加下划线表示私有仅仅是一个约定俗成的习惯，澄清意图，并没有做其他处理。由于ECMAScript草案中并没有定义私有变量的方法，所以在此限定之下仍可以在函数外或作用域外访问该函数或变量。

_instanceof和_classCallCheck的作用

检查声明的class类是否通过new的方式调用，否则会报错。

function _instanceof(left, right) {
    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
        return right[Symbol.hasInstance](left);
    } else {
        return left instanceof right;
    }
}
function _classCallCheck(instance, Constructor) {
    if (!_instanceof(instance, Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}
复制代码

_createClass和_defineProperties的作用

_createClass函数有三个参数，Constructor是传入构造函数Person，protoProps 是要添加到原型上的函数数组，staticProps 是要添加到构造函数本身的函数，即静态方法。这里的第二个和第三个参数是可以缺省的，会在_createClass 函数体内判断。

_createClass 函数的作用是收集公有函数和静态方法，将方法添加到构造函数或构造函数的原型中，并返回构造函数。

defineProperties 是将方法添加到构造函数或构造函数的原型中的主要逻辑，遍历函数数组，分别声明其描述符。若enumerable 没有被定义为true，则默认为fals，设置 configurable 为true。以上两个布尔值是为了限制 Object.keys() 之类的方法被遍历到。如果存在 value，就为 descriptor 添加 value 和 writable 属性，如果不存在，就直接使用 get 和 set 属性。

最后，使用 Object.defineProperty 方法为构造函数添加属性。

function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
}
复制代码

class类实现主体代码

var Person =
    /*#__PURE__*/
    function () {
        function Person(name, age) {
            _classCallCheck(this, Person);

            this.name = name;
            this.age = age;
        }

        _createClass(Person, [{
            key: "toString",
            value: function toString() {
                return '(' + this.name + ',' + this.age + ')';
            }
        }]);

        return Person;
    }();

var p = new Person('Mia', 18);
复制代码

解析：

  • 不使用new调用时，this指向window，所以instance instanceof Constructor为false，抛出异常。
  • 通过调用_createClass函数，遍历函数数组。key为方法名，若有value说明是有具体的 function 声明，若无 value 说明使用了get 或 set 方法。
  • Person类是通过声明一个IIFE实现的，IIFE是立即执行函数，创建即执行。可以保证变量的作用域限制在函数内，避免命名冲突。

结尾

读到这相信大家对class的实现有了更深的理解。笔者也是一边在忙毕业设计，一边整理了这道阿里前端面试题的解析。希望大家有所收获。

评论区欢迎对ES6 class实现原理相关问题进行讨论。另外，class中的extend也是很有趣的实现，在下一篇文章会对class实现继承进行解析。

weixin_34413103
关注
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
11-27
Babel编译器将ES6的`class`语法转换为ES5代码，以便在不支持ES6的环境中运行。转换后，我们可以看到`class`实际上是转换为了函数和原型链的操作。理解这一过程有助于我们更好地理解`class`在JavaScript中的工作原理...
ES6 Class 与 ES5 构造函数对比（Babel编译）
weixin_33743880的博客
05-30 188
Class User类被编译以后转化为构造函数。被编译后生成了_classCallCheck,_instanceof方法。 class User{ } const user = new User(); console.log(user); // {} //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ "...
在使用es6语法class的时候，babel到底做了什么？
weixin_34381687的博客
06-01 214
自从有了webpack之后，我们这些jscoder似乎得到了前所未有的解放，箭头函数，对象解构，let，const关键字，以及class、extends等等关键字使用得不亦乐乎，反正，webpack会帮我们把这些es6代码转换成浏览器能够识别的es5代码，那么，我们有多少人真正的看过，babel转换之后的代码呢？今天，我就来看一下，当我们...
如何用babel将ES6转换为指定的版本的ES代码
缘自世界
01-20 9910
由于新版本的ECMASscript的强大特性，使我们写js代码更加得心应手，例如：calss，let，for…of，promise等等，但可惜的是这些js新特新只被最新版本的浏览器支持，那么指定范围的低版本的浏览器的支持就需要一个专门的工具，babel就是这样的一块前端工具。 但是babel系列的插件现在越来越多，对于初次接触使用它的人来说需要花费不少的时间，尤其是讨厌英文的人。 babel-
es6class类继承的实现原理
weixin_65859689的博客
04-18 489
关于es6class继承的实现原理
es6中Class转成es5原理
weixin_34106122的博客
11-13 1977
首先创建一个Parent父类 class Parent { constructor(name) { this.name = name;// 实例的私有属性 } // 属于实例的公有属性，也就是相当于原型上的属性 getName() { console.log(this.name); } } let p = new Parent('xxx'); p.getNa...
详解Webpack+Babel+React开发环境的搭建的方法步骤
08-28
Babel则是一个JavaScript编译器，它的主要作用是将最新的JavaScript语法（如ES6、ES7等）转换为广泛支持的老版本JavaScript（通常是ES5），以确保代码在各种浏览器环境下都能正常运行。React是Facebook开源的一个...
es6-boiletplate:ES6 for Humans书中的ES6 Boilerplate项目
03-21
整个项目通过Webpack、Babel等工具将ES6代码转换为浏览器可执行的ES5代码，并进行模块化管理和资源优化。 综上所述，`ES6 Boilerplate`项目旨在提供一个现代JavaScript开发的基础框架，利用ES6的新特性提高开发效率...
es6-boilerplate
06-11
1. **Babel**：将 ES6+ 代码转换为浏览器可理解的 ES5 代码，确保兼容性。 2. **Webpack**：模块打包工具，可以将多个模块打包成一个或多个文件，支持代码分割、热模块替换等。 3. **npm 或 yarn**：包管理器，...
详解ES6中class的实现原理
01-18
一、在ES6以前实现类和继承 　　实现类的代码如下： function Person(name, age) { this.name = name; this.age = age; } Person.prototype.speakSomething = function () { console.log(I can speek chinese); }; 　　实现继承的代码如下：一般使用原型链继承和call继承混合的形式 function Person(name) { this.name = name; } Person.prototype.showName = funct
详解如何用babel转换es6的class语法
12-12
babel是一个转码器，目前开发react、vue项目都要使用到它。它可以把es6+的语法转换为es5，也可以转换JSX等语法。 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码，例如env、stage-0等。 实际上babel可以通过自定义插件的方式实现任何代码的转换，接下来我们通过一个“把es6的 class 转换为es5”的例子来了解一下babel。 内容如下： webpack环境配置 大家应该都配置过babel-core这个loader，它的作用是提供babel的核心Api,实际上我们的代码转换都是通过插件来实现的。 接下来我们不用第三方的插件，自己实现一个es6类转
使用ES5实现ES6的Class
前端开发博客
11-06 1687
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步作者：happy137https://juejin.im/post/6844903886034042893ES5的寄生组合...
ES6之Class原理分析
夕山雨的博客
01-12 2060
目录一、概述二、class的实现1. 基本原理2. class语法规范(1). 取值函数（getter）和存值函数（setter）(2). 属性表达式(3). class表达式(4). this的指向三、class的继承1. 继承的概念2. 继承的基本原理3. 继承的相关语法(1). super关键字(2). 原生构造函数的继承总结 一、概述 遥想ES6刚刚问世时，不少曾经从事过后端开发的程序员都...
ES5 如何实现 Class
weixin_33964094的博客
05-03 1468
原文地址：https://github.com/catchonme/blog/issues/3 我们知道Class最大的作用就是能够实现继承，这样子类通过继承父类，从而尽可能的对代码进行复用。 那么问题来了 如何实现子类继承父类的属性和函数， 子类继承父类时，为什么子类的同名函数不会覆盖父类的同名函数 我们通过分析prototype.js 来看看ES5 是如何实现Class 的 prototy...
全面理解JavaScript中class的实现原理
wosifp的博客
02-07 1349
一、class类概念与语法 ES5之前不存在类的概念，创建对象使用的构造函数，通过new操作符来创建； 为使JS更像面向对象，ES6版本引入class概念，其基本语法： class Cat{ constructor(name,age){ this.name = name; this.age = age; } Say(){ re...
babel ES6 转换 ES5 实现原理
杏子
02-12 5291
babel ES6 转换 ES5 实现原理
ES5到ES6—class的学习
weixin_44003391的博客
12-07 624
ES6的class定义与继承
Apache Paimon主键表的一些最佳实践
最新发布
微信搜：import_bigdata，大数据领域硬核原创作者
10-28 869
今天我们说说Paimon主键表的一些使用上的注意事项。一、主键表主键表是Paimon的一种表类型。用户可以插入、更新或删除表中的记录。说的直白点就是，允许你设置唯一主键，然后覆盖更新。Bucket选择无论分区表还是未分区表，Bucket都是最小的读写单元。每个Bucket包含一个LSM树及其变更日志文件。用户可以通过提供bucket-key选项来指定分桶列。如果未指定bucket-key，那么就根...
ES6 class实现原理与Babel编译详解
本文将深入解析ES6中的`class`语法及其在ES5中的实现原理。ES6引入`class`关键字是为了提升JavaScript编程的可读性和面向对象编程的体验，它提供了一种简洁的语法来定义类和构造函数。虽然`class`是语法糖，但它实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值