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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
js图片切换具体实现代码
Oct 13 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
webpack之引入图片的实现及问题
Oct 08 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python 基于opencv操作摄像头
2020/12/24 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Europcar比利时:租车
2019/08/26 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
QA工程师岗位职责
2013/11/20 职场文书
矫正人员思想汇报
2014/01/08 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
车间统计员岗位职责
2015/04/14 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Python实现数据的序列化操作详解
2022/07/07 Python