脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → es5类与es6中class区别

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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS不间断向上滚动效果代码

    JS不间断向上滚动效果代码

    不间断向上滚动的效果，想必大家都有见到过吧，本文也为大家准备一个使用js实现的不间断向上滚动效果，感兴趣的朋友可以参考下
    2013-12-12
  • IE6-8中Date不支持toISOString的修复方法

    IE6-8中Date不支持toISOString的修复方法

    这篇文章主要介绍了IE6-8中Date不支持toISOString的修复方法,需要的朋友可以参考下
    2014-05-05
  • JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

    JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

    这篇文章主要介绍了JavaScript禁止右击保存图片,禁止拖拽图片的实现代码,代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • JavaScript 异步调用框架 (Part 2 - 用例设计)

    JavaScript 异步调用框架 (Part 2 - 用例设计)

    在上一篇文章里说到，我们要设计一个异步调用框架，最好能够统一同步异步调用的接口，同时具体调用顺序与实现方式无关。那么我们现在就来设计这样一个框架的用例。
    2009-08-08
  • Bootstrap整体框架之JavaScript插件架构

    Bootstrap整体框架之JavaScript插件架构

    这篇文章主要介绍了Bootstrap整体框架之JavaScript插件架构的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js获取滚动距离的方法

    js获取滚动距离的方法

    这篇文章主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • 强大的JavaScript响应式图表Chartist.js的使用

    强大的JavaScript响应式图表Chartist.js的使用

    本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用，具有一定的参考价值，有兴趣的可以了解一下
    2017-09-09
  • 使用JavaScript实现链表的数据结构的代码

    使用JavaScript实现链表的数据结构的代码

    链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现
    2017-08-08
  • JavaScript的9个陷阱及评点分析

    JavaScript的9个陷阱及评点分析

    以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。
    2008-05-05
  • 使用Turn.js实现翻书效果的完整步骤

    使用Turn.js实现翻书效果的完整步骤

    最近项目经理我个项目练练手,其项目需求是要实现翻书效果,下面这篇文章主要给大家介绍了关于使用Turn.js实现翻书效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论