探探es 的class

众所周知es6新增了class 关键词，但是class 究竟是什么一直是云里雾里，他和普通函数有什么区别，今天就来探讨下。

首先先定义一个类

  class Rectang {
            constructor(height, width) {
                this.height = height;
                this.width = width;
            }
            sayHi() {
                console.log('sayHi');
                return "HELLO WORD!";
            }
        }

在；浏览器输出看下Rectang 的类型

可以看到在浏览器的眼里这个类就是一个函数，那么我们可以理解为，他的本质就是一个函数，只不过是另一种语法的函数。这个函数主要用来生成新的对象，那么可以理解为js 的构造函数，那么和我们一般的方法的构造函数有什么区别呢？

根据这个类我们用es5来实现下

        function Rectang(width, height) {
            this.width = width;
            this.height = height;
        }
        Rectang.prototype.sayHi = function () {
            console.log('sayHi');
            return "HELLO WORD!";
        }

看起来类的形式是更加简便一些，而且易于理解，结构上更加紧凑，感觉更像一个整体。

既然方法是绑定在prototype上的，那么我们将prototype重新赋值会不会对对象产生影响呢？我们来试试。

先看下es5的实现

        let rec = new Rectang();
        console.log(rec.sayHi())
        Rectang.prototype = {};
        let rec2 = new Rectang();
        console.log(Rectang.prototype, rec.sayHi(), rec2.sayHi());

可以看到如果将prototype 重新赋值，原来生成的对象是没有影响的，但是之后生成的对象的方法已经没有了。

我们再看下class 的实现

可以看到操作class 的prototype 并没有影响，猜测对class 的prototy 应该是做了保护，不允许用户直接操作原型对象，安全性更高。

再来看下官网对class的解释

结论：

class 是对es5 构造方法的改良，他会将方法挂载到原型上，并且对原型做了保护，安全性更好，而且语法更易于理解和维护。

标签：探探,Rectang,sayHi,height,width,prototype,class,es
来源： https://blog.51cto.com/13496570/2692233