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

ES5和ES6中类的区别总结

 更新时间：2020年12月21日 15:49:53   作者：Totora6  
这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

类定义与调用的区别

在 ES5 中主要是通过构造函数方式和原型方式来定义一个类，但是在 ES6 新引入了 class 关键字，使之具有了正式类的能力，类（class）是ECMAScript 中新的基础性语法糖结构。虽然 ES6 类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念。

使用 ES5 定义一个类并调用

function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
let person = new Person();
person.sayName();

使用 ES6 定义一个类并调用

ES6中有两种定义类的方式：类声明和类表达式

class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
let person = new Person();
person.sayName();
//当我们使用typeof检测Person的类型时：
console.log(typeof Person); //function,它的本质仍然是函数

在调用类时，不管是ES5还是ES6，都必须使用new操作符来进行调用，不可以直接执行。

两者区别在于：

ES5这样调用不会报错，可以正常执行（因为ES5中的类和普通函数几乎没有本质上的区别）

function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
let person = Person();
console.log(person); //undefined

ES6会报错

class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
let person =Person();
console.log(person);
person.sayName(); //Class constructor Person cannot be invoked without 'new'

变量提升

通过以下对比可以发现，当用class声明类执行时会报错，说明ES6中用class定义的类无法实现变量提升。

函数受函数作用域的限制，但是类受块作用域的限制

//变量提升
let person = new Person()
function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
person.sayName(); //Totora

let person = new Person();
class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
person.sayName(); // Cannot access 'Person' before initialization

class中类的构成

类可以包含构造函数方法、实例方法、获取函数、设置函数、静态类的方法。但是空的类定义照样有效

//空类定义
class Foo {}
//有构造函数的类
class Bar {
 constructor() {}
}
//有获取函数的类
class Baz {
 get myBaz() {}
}
//有静态方法的类
class Qux {
 static myQux() {}
}

class中的静态方法

可以在类上定义静态方法。静态类成员在类定义中使用static关键字作为前缀，在静态成员中，this引用类自身；

与原型成员类似，静态成员每个类上只能有一个；

static声明的静态属性和方法都可以被子类继承。

class Person {
 constructor() {
  //添加到this的所有内容都会存在于不同的实例上
  this.locate = () => console.log('instance', this);
 }
 //定义在类的原型对象上
 locate() {
  console.log('prototype', this);
 }
 //定义在类本身上
 static locate() {
  console.log('class', this);
 }
}
let p = new Person();
p.locate(); //instance Person { locate: [Function (anonymous)] }
Person.prototype.locate(); //prototype {}
Person.locate(); //class [class Person]

class Person {
 static name() {
  this.job(); //此处的this指向类
 }
 static job() {
  console.log('Totora'); //不会出现在实例中
 }
 job() {
  console.log('student');
 }
}
Person.name(); //Totora

继承

ES5中的继承实质上是先创建子类的实例对象，再将父类的方法添加到this上（Parent.apply(this)），通过原型或构造函数机制来实现

ES6的继承实际上是先创建父类的实例对象this，然后再用子类的构造函数修改this。

ES6中类之间通过extends关键字，就可以继承任何拥有[[Construct]]和原型的对象，在很大程度上，这不仅i仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）

ES6中派生类的方法可以通过super关键字引用它们的原型，这个关键字只能在派生类中使用，而且仅限于类的构造函数、实例方法和静态方法的内部。在类构造函数中使用super可以调用父类构造函数。

//ES5中的继承
function parent(a,b) {
 this.a = a;
 this.b = b;
}
function child(c) {
 this.c = c;
}
parent.call(child, 1, 2); //子级来继承父级
child.prototype = new parent(1, 2);

//ES6中的继承
class parent {
 constructor(a, b) {
  this.a = a;
  this.b = b;
 }
 parentMethods() {
  return this.a + this.b
 }
}
class child extends parent {
 constructor(a, b, c) {
  super(a, b); //通过super调用父类
  this.c = c;
 }
 childMethods() {
  return this.c + ',' + super.parentMethods() //通过super实例化调用父类
 }
}
const point = new child(1, 2, 3);
console.log(point.childMethods());

总结

到此这篇关于ES5和ES6中类区别的文章就介绍到这了,更多相关ES5和ES6类的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript闭包原理与用法实例分析

    JavaScript闭包原理与用法实例分析

    这篇文章主要介绍了JavaScript闭包原理与用法,结合实例形式分析了javascript闭包的概念、功能、常见问题及相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • webpack构建vue项目的详细教程（配置篇）

    webpack构建vue项目的详细教程（配置篇）

    本篇文章主要介绍了webpack构建vue项目的详细教程（配置篇），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表

    这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript防抖动与节流处理

    JavaScript防抖动与节流处理

    这篇文章介绍了JavaScript防抖动与节流处理的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 微信小程序自定义导航栏（模板化）

    微信小程序自定义导航栏（模板化）

    这篇文章主要为大家详细介绍了微信小程序自定义导航栏（模板化），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 学习drag and drop js实现代码经典之作

    学习drag and drop js实现代码经典之作

    今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格。我觉得很好。
    2009-04-04
  • javascript实现点击产生随机图形

    javascript实现点击产生随机图形

    这篇文章主要为大家详细介绍了javascript实现点击产生随机图形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • js图片实时加载提供网页打开速度

    js图片实时加载提供网页打开速度

    没必要一开始加载就要把全部图片加载出来，这样子打开网面的速度得到了很好提高，下面有个不错的思路，大家可以看看
    2014-09-09
  • 只出现一次的提示信息(js+cookies)

    只出现一次的提示信息(js+cookies)

    只显示一次的提示信息，刷新一页面或第二次来到这个页面，就不会再弹出提示窗口了，用在网页上是想当实用的吧，因为很多人都不希望经常弹出什么窗口，本效果因此会提升用户体验，让用户喜欢你的网页
    2013-03-03
  • javascript中的event loop事件循环详解

    javascript中的event loop事件循环详解

    这篇文章主要给大家介绍了关于javascript中event loop事件循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论