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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue配置多代理服务接口地址操作
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采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
python迭代器的使用方法实例
2013/11/21 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
python实现支付宝转账接口
2019/05/07 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
自主招生自荐信格式
2013/12/03 职场文书
上学迟到的检讨书
2014/01/11 职场文书
我的中国心演讲稿
2014/09/04 职场文书
标准版离职证明书
2014/09/12 职场文书
客房领班岗位职责
2015/02/11 职场文书