ES5和ES6中类的区别总结


Posted in Javascript onDecember 21, 2020

类定义与调用的区别

在 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 Array(数组)相关方法简述
Jul 25 Javascript
JS 时间显示效果代码
Aug 23 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js post提交调用方法
Feb 12 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
jQuery实现动态向上滚动
Dec 21 #jQuery
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
ES6字符串的扩展实例
Dec 21 #Javascript
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
原生JS实现京东查看商品点击放大
Dec 21 #Javascript
基于javascript实现移动端轮播图效果
Dec 21 #Javascript
You might like
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python3基础之函数用法
2014/08/13 Python
Python常用模块介绍
2014/11/21 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
基于python实现聊天室程序
2018/07/27 Python
Django框架封装外部函数示例
2019/05/28 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
初中政治教学反思
2014/01/17 职场文书
银行员工职业规划范文
2014/01/21 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
Python图片检索之以图搜图
2021/05/31 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
vue递归实现树形组件
2022/07/15 Vue.js