探探es 的class

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

首先先定义一个类

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

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

探探es 的class

可以看到在浏览器的眼里这个类就是一个函数,那么我们可以理解为,他的本质就是一个函数,只不过是另一种语法的函数。这个函数主要用来生成新的对象,那么可以理解为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());

探探es 的class


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

我们再看下class 的实现


探探es 的class

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


再来看下官网对class的解释

探探es 的class


结论:

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

上一篇:Leetcode 969. Pancake Sorting


下一篇:探探es 的class