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 相关文章推荐
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JS中操作JSON总结
Dec 06 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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中的函数嵌套层数限制分析
2011/06/13 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
php实现的简单日志写入函数
2015/03/31 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript每日必学之多态
2016/02/23 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python 使用type来定义类的实现
2019/11/19 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
视图的作用
2014/12/19 面试题
入党自我鉴定范文
2013/10/04 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
销售经理竞聘书
2014/03/31 职场文书
初中生评语大全
2014/04/24 职场文书
建材投资建议书
2014/05/16 职场文书
土建工程师岗位职责
2014/06/10 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
经理助理岗位职责
2015/02/02 职场文书
鲁迅故里导游词
2015/02/05 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书