备案控制台
开发者社区 开发与运维 文章 正文

玩转JS基础——class 和构造函数区别

2022-05-30 293
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： class 和构造函数区别

经典真题

  • 根据下面 ES6 构造函数的书写方式，要求写出 ES5 的
class Example { 
  constructor(name) { 
    this.name = name;
  }
  init() { 
    const fun = () => { console.log(this.name) }
    fun(); 
  } 
}
const e = new Example('Hello');
e.init();

回顾 class 的写法

上面的这道面试题，典型的就是考察 ES6 中新增的 class 和以前构造函数上面的区别是什么，以及如果通过 ES5 去模拟的话，具体如何实现。

那么在此之前，我们就先来回顾一下 ES6 中的 class 写法。

代码如下：

class Computer {
    // 构造器
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
    // 原型方法
    showSth() {
        console.log(`这是一台${this.name}电脑`);
    }
    // 静态方法
    static comStruct() {
        console.log("电脑由显示器，主机，键鼠组成");
    }
}

上面的代码非常的简单，我们定义了一个名为 Computer 的类，该类存在 name、price 这两个实例属性，一个 showSth 的原型方法以及一个 comStruct 的静态方法。

我们可以简单的实例化一个对象出来，例如：

var apple = new Computer("苹果", 15000);
console.log(apple.name); // 苹果
console.log(apple.price); // 15000
apple.showSth(); // 这是一台苹果电脑
Computer.comStruct(); // 电脑由显示器，主机，键鼠组成

在上面的代码中，我们从 Computer 类中实例化出来了一个 apple 的实例对象，然后简单访问了该对象的属性和方法。

回顾构造函数的写法

那么，在 ES6 出现之前，我们是如何实现类似于其他语言中的“类”的呢？

没错，我们是通过的构造函数，然后将方法挂在原型上面。例如：

function Computer(name, price){
    this.name = name;
    this.price = price;
}
Computer.prototype.showSth = function(){
    console.log(`这是一台${this.name}电脑`);
}
Computer.comStruct = function(){
    console.log("电脑由显示器，主机，键鼠组成");
}

var apple = new Computer("苹果", 15000);
console.log(apple.name); // 苹果
console.log(apple.price); // 15000
apple.showSth(); // 这是一台苹果电脑
Computer.comStruct(); // 电脑由显示器，主机，键鼠组成

上面的代码就是我们经常在 ES5 中所书写的代码，通过构造函数来模拟类，实例方法挂在原型上面，静态方法就挂在构造函数上。

仿佛 ES6 的 class 写法就是上面构造函数写法的一种语法糖，但是事实真的如此么？

class 和构造函数区别上的细则

接下来我们来详细比较一下两种写法在细节上面的一些差异。

首先我们书写两个“类”，一个用 ES5 的构造函数书写，一个用 ES6 的类的写法来书写，如下：

class Computer1 {
    // 构造器
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
    // 原型方法
    showSth() {
        console.log(`这是一台${this.name}电脑`);
    }
    // 静态方法
    static comStruct() {
        console.log("电脑由显示器，主机，键鼠组成");
    }
}

function Computer2(name, price){
    this.name = name;
    this.price = price;
}
Computer2.prototype.showSth = function(){
    console.log(`这是一台${this.name}电脑`);
}
Computer2.comStruct = function(){
    console.log("电脑由显示器，主机，键鼠组成");
}

我们知道，构造函数也是函数，既然是函数，那么就可以通过函数调用的形式来调用该函数，例如：

var i = Computer2();
console.log(i); // undefined

运行上面的代码，代码不会报错，因为没有使用 new 的方式来调用，所以不会生成一个对象，返回值就为 undefined。

但是如果我们这样来调用 ES6 书写的类，会直接报错：

Computer1();
// TypeError: Class constructor Computer1 cannot be invoked without 'new'

可以看到，ES6 所书写的 class ，虽然我们认为背后就是构造函数实现的，但是明显是做了特殊处理的，必须通过 new 关键字来调用。

接下来，我们来针对两种写法，各自实例化一个对象，代码如下：

var apple = new Computer2("苹果", 15000);
for(var i in apple){
    console.log(i); 
}
console.log('-------');
var huawei = new Computer1("华为", 12000);
for(var i in huawei){
    console.log(i); 
}

在上面的代码中， apple 对象是 ES5 构造函数的形式创建的实例，huawei 是 ES6 类的形式创建的实例。有了这两个对象后，我们遍历这两个对象的键，结果如下：

name
price
showSth
-------
name
price

可以看到，ES6 中的原型方法是不可被枚举的，说明 ES6 对此也是做了特殊处理的。

另外，ES6 的 class 中的所有代码均处于严格模式之下，这里我们也可以进行一个简单的验证。例如，对两种方式的 showSth 原型方法稍作修改，如下：

class Computer1 {
    ...
    // 原型方法
    showSth(i,i) {
        console.log(`这是一台${this.name}电脑`);
    }
       ...
}
function Computer2(name, price){
   ...
}
Computer2.prototype.showSth = function(j,j){
    i = 10;
    console.log(`这是一台${this.name}电脑`);
}
...

在上面的代码中，我们为各自的 showSth 方法添加了重复的形式参数。我们知道，在严格模式中方法书写重复形参是不被允许的。

所以在运行代码时，ES6 的 class 声明方式会报错，错误信息如下：

// SyntaxError: Duplicate parameter name not allowed in this context

还有就是，如果是 ES6 形式所声明的类，原型上的方法是不允许通过 new 来调用的。

这里我们也可以做一个简单的测试，如下：

function Computer2(name, price){
    this.name = name;
    this.price = price;
}
Computer2.prototype.showSth = function(){
    i = 10;
    console.log(`这是一台${this.name}电脑`);
}
Computer2.comStruct = function(){
    console.log("电脑由显示器，主机，键鼠组成");
}

var apple = new Computer2("苹果", 15000);
var i = new apple.showSth(); // 这是一台undefined电脑
console.log(i); // {}

在上面的代码中，我们首先实例化了一个 apple 对象，在该对象的原型上面拥有一个 showSth 的实例方法，然后我们对其进行了 new 操作，可以看到返回了一个对象。

但是如果是 ES6 形式所声明的类，上面的做法将不被允许。示例如下：

class Computer1 {
    // 构造器
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
    // 原型方法
    showSth() {
        console.log(`这是一台${this.name}电脑`);
    }
    // 静态方法
    static comStruct() {
        console.log("电脑由显示器，主机，键鼠组成");
    }
}
var huawei = new Computer1("华为", 12000);
var i = new huawei.showSth(); // TypeError: huawei.showSth is not a constructor
console.log(i);

在上面的代码中，我们企图对 Computer1 实例对象 huawei 的原型方法 showSth 进行 new 操作，可以看到，这里报出了 TypeError。

Babel 中具体的实现

通过上面的各种例子，我们可以知道 ES6 中的 class 实现并不是我们单纯所想象的就是之前 ES5 写构造函数的写法，虽然本质上是构造函数，但是内部是做了各种处理的。

这里，我们就来使用 Babel 对下面的代码进行转义，转义之前的代码如下：

class Computer {
    // 构造器
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
    // 原型方法
    showSth() {
        console.log(`这是一台${this.name}电脑`);
    }
    // 静态方法
    static comStruct() {
        console.log("电脑由显示器，主机，键鼠组成");
    }
}

转义后的代码如下：

"use strict";
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

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;
}

var Computer = /*#__PURE__*/function () {
    // 构造器
    function Computer(name, price) {
        _classCallCheck(this, Computer);

        this.name = name;
        this.price = price;
    } // 原型方法


    _createClass(Computer, [{
        key: "showSth",
        value: function showSth() {
            console.log("\u8FD9\u662F\u4E00\u53F0".concat(this.name, "\u7535\u8111"));
        } // 静态方法

    }], [{
        key: "comStruct",
        value: function comStruct() {
            console.log("电脑由显示器，主机，键鼠组成");
        }
    }]);

    return Computer;
}();
var apple = new Computer("苹果", 15000);
console.log(apple.name); // 苹果
console.log(apple.price); // 15000
apple.showSth(); // 这是一台苹果电脑
Computer.comStruct(); // 电脑由显示器，主机，键鼠组成

可以看到，果然没有我们想象的那么简单，接下来我们就来一点一点剖析转义的结果。

首先整体来讲分为下面几块：

"use strict";
function _classCallCheck(instance, Constructor) { ... }

function _defineProperties(target, props) { ... }

function _createClass(Constructor, protoProps, staticProps) { ... }

var Computer = /*#__PURE__*/function () { ... }();

我们一块一块的来看。

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

第一个方法叫做 classCallCheck，从名字上面我们也可以看出，这个方法是核对构造方法的调用形式的，接收两个参数，一个是实例对象，另一个是构造函数，通过 instanceof 来看参数 instance 是否是 Constructor 的实例，如果不是就抛出错误。

接下来是  _defineProperties 方法，我们对此方法稍作了修改，打印 target 和 props 的值

function _defineProperties(target, props) {
    console.log("target:::",target);
    console.log("props:::",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);
    }
}

结果如下：

target::: {}
props::: [ { key: 'showSth', value: [Function: showSth] } ]
target::: [Function: Computer]
props::: [ { key: 'comStruct', value: [Function: comStruct] } ]

可以看出，该方法就是设置对象方法的属性描述符，包含是否可遍历呀，是否可写呀等信息，设置完成后将方法挂在 target 对象上面。

下一个是  _createClass 函数，我们仍然将三个参数打印出来

function _createClass(Constructor, protoProps, staticProps) {
    console.log("Constructor::",Constructor);
    console.log("protoProps::",protoProps);
    console.log("staticProps::",staticProps);
    if (protoProps)
        _defineProperties(Constructor.prototype, protoProps);
    if (staticProps)
        _defineProperties(Constructor, staticProps);
    return Constructor;
}

结果如下：

Constructor:: [Function: Computer]
protoProps:: [ { key: 'showSth', value: [Function: showSth] } ]
staticProps:: [ { key: 'comStruct', value: [Function: comStruct] } ]

可以看出，接收的三个参数一次为构造函数、原型上的方法，静态方法。接下来在该方法里面所做的事情也就非常清晰了。

最后就是我们的构造函数了：

var Computer = /*#__PURE__*/function () {
    // 构造器
    function Computer(name, price) {
        // 进行调用确认
        _classCallCheck(this, Computer);
                // 添加实例属性
        this.name = name;
        this.price = price;
    } // 原型方法

        // 将实例方法和静态方法添加到构造函数上面
    _createClass(Computer, [{
        key: "showSth",
        value: function showSth() {
            console.log("\u8FD9\u662F\u4E00\u53F0".concat(this.name, "\u7535\u8111"));
        } // 静态方法

    }], [{
        key: "comStruct",
        value: function comStruct() {
            console.log("电脑由显示器，主机，键鼠组成");
        }
    }]);

    return Computer;
}();

明白了  _createClass 方法的作用后，该方法的代码也就非常的清晰了。

文章标签：
JavaScript
关键词：
JavaScript区别
JavaScript class
JavaScript构造函数
JavaScript class构造函数
JavaScript class区别
程序员法医
目录
相关文章
众所周知
|
13天前
|
设计模式 JavaScript 前端开发
在JavaScript中，继承是一个重要的概念，它允许我们基于现有的类（或构造函数）创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展，创建类层次结构，但过深的继承链导致复杂性增加，紧密耦合增加维护成本，单继承限制灵活性，方法覆盖可能隐藏父类功能，且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
众所周知
34 7
空白诗
|
9天前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解：基础概念与区别
JavaScript 中，理解数据拷贝的深浅至关重要。浅拷贝（如扩展运算符`...`、`Object.assign()`）仅复制对象第一层，共享内部引用，导致修改时产生意外联动。深拷贝（如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`）创建独立副本，确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢，但确保安全；浅拷贝快，但需小心引用共享。在面试中，理解这些概念及其应用场景是关键。
空白诗
15 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解：基础概念与区别
aliyun5297948689-49597
|
7天前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化，提升JavaScript的代码组织和复用。Class是原型机制的语法糖，简化面向对象编程。模块化通过`import/export`管理代码，支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略，能助你写出更高效、可维护的代码。**
aliyun5297948689-49597
39 5
游客n5wu27bgadceq
|
4天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
游客n5wu27bgadceq
14 1
小鼠米奇
|
6天前
|
JavaScript 前端开发 异构计算
JS中重排和重绘的区别是什么？
JS中重排和重绘的区别是什么？
小鼠米奇
14 1
吃番茄长大的西红柿
|
10天前
|
JavaScript 前端开发 API
ECMAScript vs JavaScript: 理解两者间的联系与区别
ECMAScript vs JavaScript: 理解两者间的联系与区别
吃番茄长大的西红柿
12 1
空白诗
|
10天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6（ES6）新特性概览（二）：解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6（ES6）新特性概览（二）：解构赋值、扩展与收集、class类全面解析
空白诗
16 2
空白诗
|
10天前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类：全面解析
【JavaScript】JavaScript 中的 Class 类：全面解析
空白诗
16 1
八百标兵奔北坡
|
11天前
|
JavaScript 前端开发 索引
JS中的substr()和substring()函数有什么区别
JS中的substr()和substring()函数有什么区别
八百标兵奔北坡
14 1
小鼠米奇
|
6天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别
JS中浅拷贝和深拷贝的区别
小鼠米奇
8 0

热门文章

最新文章

  • 1
    如何在 Ubuntu 20.04 上安装 Node.js 和 npm
  • 2
    显示缩略列表 JS DOM
  • 3
    hi-nginx-javascript vs node.js
  • 4
    悟透javascript-笔记
  • 5
    07-JavaScript基础-关系运算符和逻辑运算符
  • 6
    EXT.JS的PROXY放在哪里，STORE放在哪里，绝对是个技术活儿啊。
  • 7
    JS控制图片显示的大小（图片等比例缩放）
  • 8
    Js如何判断客户端是PC还是手持设备简单分析
  • 9
    微信支付开发(3) JS API支付
  • 10
    js过滤空格回车
  • 1
    解释 JavaScript 中的作用域和作用域链的概念。
    26
  • 2
    事件触发、事件捕获与事件冒泡（js的问题）
    17
  • 3
    理解DOM树的加载过程（js的问题）
    13
  • 4
    为实例方法创建错误的引用（js的问题）
    17
  • 5
    在循环内错误使用函数定义（js的问题）
    17
  • 6
    高阶函数（js的问题）
    11
  • 7
    在浏览器中存储数组和对象（js的问题）
    24
  • 8
    混淆赋值运算符（=）和相等比较运算符（==, ===）（js的问题）
    15
  • 9
    为 setTimeout 或 setInterval 提供一个字符串作为第一个参数（js的问题）
    14
  • 10
    为实例方法创建错误的引用(js的问题)
    11

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门与实战
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 对象和接口-2：常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）