es5 类与es6中class的区别小结
更新时间：2020年11月09日 15:43:10 作者：唐_银
这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类，今天整理一下它们的区别。
关于es5中定义类的方式，可以看这一篇Js的‘类'，我们这里主要聊es5类和es6中class类的区别。
一、class类必须new调用，不能直接执行。
class类执行的话会报错，而es5中的类和普通函数并没有本质区别，执行肯定是ok的。
二、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表单验证示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
各种音乐播放器上都有一个自动滚动播放歌词的功能，当前滚动到的歌词会高亮居中显示，即使歌词被换行也能正常居中，那么这个功能基于JavaScript怎么实现让歌词滚动播放呢？感兴趣的朋友一起看看吧2015-11-11
主要是测试了数组 push()方法与直接相加这两种在JS引擎上性能的实际处理情况。程序代码简单明了，没什么好解释的。2009-12-12
这篇文章主要为大家介绍了TypeScript类型断言VS类型守卫示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章整理了JavaScript文件上传的常见问题，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了JS实现横向与竖向两个选项卡Tab联动的方法,涉及JavaScript遍历及动态修改页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了js代码触发事件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了微信小程序常见问题,结合实例形式总结分析了微信小程序常见错误、数据缓存、界面交换等相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下2014-05-05
这篇文章介绍了javascript显示用户停留时间的简单实例，有需要的朋友可以参考一下2013-08-08
最新评论