es5 类与es6中class的区别小结


Posted in Javascript onNovember 09, 2020

前言

在es5中主要是通过构造函数方式和原型方式来定义一个类,在es6中我们可以通过class来定义类,今天整理一下它们的区别。

关于es5中定义类的方式,可以看这一篇Js的‘类',我们这里主要聊es5类和es6中class类的区别。

一、class类必须new调用,不能直接执行。

es5 类与es6中class的区别小结

class类执行的话会报错,而es5中的类和普通函数并没有本质区别,执行肯定是ok的。

二、class类不存在变量提升

es5 类与es6中class的区别小结

es5 类与es6中class的区别小结

图2报错,说明class方式没有把类的定义提升到顶部。

三、class类无法遍历它实例原型链上的属性和方法

function Foo (color) {
 this.color = color
}
Foo.prototype.like = function () {
 console.log(`like${this.color}`)
}
let foo = new Foo()

for (let key in foo) {
 // 原型上的like也被打印出来了
 console.log(key) // color、like
}
class Foo {
 constructor (color) {
  this.color = color
 }
 like () {
  console.log(`like${this.color}`)
 }
}
let foo = new Foo('red')

for (let key in foo) {
 // 只打印一个color,没有打印原型链上的like
 console.log(key) // color
}

四、new.target属性

es6为new命令引入了一个new.target属性,它会返回new命令作用于的那个构造函数。如果不是通过new调用或Reflect.construct()调用的,new.target会返回undefined

function Person(name) {
 if (new.target === Person) {
 this.name = name;
 } else {
 throw new Error('必须使用 new 命令生成实例');
 }
}

let obj = {}
Person.call(obj, 'red') // 此时使用非new的调用方式就会报错

五、class类有static静态方法

static静态方法只能通过类调用,不会出现在实例上;另外如果静态方法包含 this 关键字,这个 this 指的是类,而不是实例。static声明的静态属性和方法都可以被子类继承。

class Foo {
 static bar() {
 this.baz(); // 此处的this指向类
 }
 static baz() {
 console.log('hello'); // 不会出现在实例中
 }
 baz() {
 console.log('world');
 }
}

Foo.bar() // hello

总结

到此这篇关于es5 类与es6中class的区别的文章就介绍到这了,更多相关es5类与es6中class区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
vue实现标签云效果的示例
Nov 09 #Javascript
写一个Vue loading 插件
Nov 09 #Javascript
解决Vue大括号字符换行踩的坑
Nov 09 #Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 #Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 #Javascript
Webpack的Loader和Plugin的区别
Nov 09 #Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
You might like
PHP中foreach()用法汇总
2015/07/02 PHP
功能强大的php分页函数
2016/07/20 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript比较文档位置
2008/04/08 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
js实现简单扫雷
2020/11/27 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python中嵌套函数的实操步骤
2019/02/27 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
计算机个人求职信范例
2014/01/24 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
2014年教师工作总结
2014/11/10 职场文书
股份转让协议书范本
2015/01/27 职场文书
二手房购房意向书
2015/05/09 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书