众所周知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 构造方法的改良,他会将方法挂载到原型上,并且对原型做了保护,安全性更好,而且语法更易于理解和维护。