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

©著作权归作者所有:来自51CTO博客作者蠢蠢的蜗牛的原创作品,如需转载,请注明出处,否则将追究法律责任

更多相关文章

  1. 【js知识】DOM获取元素的方法
  2. 【js效果】下拉菜单
  3. 【vue】父子组件传值
  4. php的echo 和 return的区别
  5. 华裔教授发现二次方程「极简」解法:丢掉公式,全球教科书可能都要改
  6. crmeb多商户swoole端口被占用杀死进程的方法
  7. python的装饰器概念学习基础基础版
  8. spring最常用的7种注解整理,让你在工作中事半功倍
  9. 智慧城市知识图谱模型与本体构建方法

随机推荐

  1. 无法连接远程MySQL数据库的解决方案
  2. 使用mysql和PHP从本地主机连接到远程数据
  3. 在MySQL解释计划中“选择优化的表”的意
  4. 我是初学者,使用mysql时候总是出现comman
  5. SQL内连接不显示数据
  6. 如何从标准化表中获取最流行的标签?
  7. Mysql中FIND_IN_SET()和IN区别简析
  8. 在H2数据库中插入时间——函数“PARSEDAT
  9. beego_mysql,redis,mongo连接(20170307)
  10. 如何在MySQL数据库和JPA中使用Spring Boo