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。

类和构造函数的区别总结：

类只能用new关键字创建实例，否则会报错；构造函数可以直接调用，返回undefined。
类中的原型方法不可被枚举，构造函数则可以。
类中的代码处于严格模式下。
类原型上的方法不可以通过new来调用

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 方法的作用后，该方法的代码也就非常的清晰了。

真题解答

根据下面 ES6 构造函数的书写方式，要求写出 ES5 的

class Example { 
  constructor(name) { 
    this.name = name;
  }
  init() { 
    const fun = () => { console.log(this.name) }
    fun(); 
  } 
}
const e = new Example('Hello');
e.init();

参考答案：

 "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 Example = /*#__PURE__*/function () {
       function Example(name) {
            _classCallCheck(this, Example);
 
            this.name = name;
       }
 
       _createClass(Example, [{
            key: "init",
            value: function init() {
                var _this = this;
 
                var fun = function fun() {
                    console.log(_this.name);
                };
 
                fun();
            }
       }]);
 
       return Example;
 }();
 
 var e = new Example('Hello');
 e.init();

这里可以解释出 _classCallCheck、_defineProperties、_createClass 这几个方法各自的作用是什么。

-EOF-