前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

JavaScript中模拟类与ES6新增的Class的比较

JavaScript使用函数模拟类,并基于原型实现继承。自ECMAScript 2015(ES6)开始,JavaScript 中有了类(class)的概念,这这并不是说JavaScript可以像其它面向对象语言一样,可以基于类实现继承。JavaScript中的类只是对现有的基于原型的继承模型的一种语法包装,也就是说是一种语法糖,其本质上类还是一个函数。但它能让我们可以用更简明的语法实现继承,也使代码的可读性变得更高,同时为以后的JavaScript语言版本添加更多的面向对象特征打下基础。

1. 类的定义

ES6中新增了class,这使我们可以使用类声明或类表达式的方式定义类。在而ES6之前,只能使用函数来模似类定义。

1.1 模拟类定义

在ES6之前,可以像下面这样模拟一个类。定义类时,还可以通过ES5中的Object.defineProperty来指定属性的可配置性、可访问性等:

这样我们就定义一个"Person"类,该类有"name"和"sex"两个属性和一个原型"sayName"方法,而"sex"属性是只读属性。

1.2 "class"类定义

使用ES6中类语句,可以像下面这样定义:

这定义了一个同样的"Person"类,它有有"name"和"sex"两个属性和一个"sayName"方法,而"sex"也是一个只读属性,这个只读属性使用"get"关键字定义,这是一种便捷方式。如果需要定义只读属性之外的,如:可配置、可枚举性等仍然需要使用"defineProperty"。

1.3 类和继承的本质

JavaScript是基于原型的语言,其继承是基于原型链实现的。无论ES6之前的类模拟,还是ES6中class类定义,其本质还是原型链继承。

在JavaScript的原型链继承中,需要继承到子类的属性(方法可以认为是一种特殊的属性)需要添加到原型链prototype对象上。通过new创建对象实例后,其本质是将类"prototype"对象上的属性复制到实例"__proto__"属性中。访问对象属性时,如果存在实例属性则返回实例属性,如果实例属性不存在,则在"__proto__"属性中查找有继承的原型属性。

所以,在前面模拟类,并创建实例后,进行"person.__proto__===Person.prototype"判断时,其返回值为"true"。

ES6中class类定义只是一种语法糖,只是看起来像类、用起来更方法,其本质上还是原型链继承。所在,在前面class定义类并创建实例后,进行"person.__proto__===Person.prototype"判断时,其返回值"true"。

更新多关于原型链继承的介绍请参考:prototype、proto与JavaScript继承机制


2. 声明与表达式

模拟类与class类定义都支持声明和表达式两种定义形式。

2.1 模拟类

在使用函数模拟类时,可以使用函数声明,或函数表达式两种定义形式。

2.2 类定义

使用"class"定义类时,同样支持类声明或类表达式两种形式。

两者的不同

类声明不同于函数声明,它没有作用域的提升。也就是说,必须在引用之前声明它。

对于函数模拟类来说可以来说,可以先引用再声明:

但类声明没有作用域的提升,先引用会产生ReferenceError异常:

3. 静态方法

在面向对象语言中,静态方法是指不需要实例化,可以通过类名直接调用的方法,但静态方法不会继承到类实例中。静态方法经常用来作为工具函数。

在使用函数模拟类时,可以像下面这样定义静态方法:

在ES6 "class"类定义中,可以使用"static"关键字定义:

4. 继承与扩展

一个类可以继承自另一个类,并可以扩展一些父类中没有方法。在原型继承中,实现比较复杂:

而在ES6的类继承中,可以使用extends扩展子类。语法非常简单明了:

5. 访问父类方法

在ES6之前,我们会像下面这样访问父类中的构造函数、方法等:

ES6的类定义中,还增加了super关键字,通过该关键字,使用我们可以访问父类的构造函数或方法等:

ES6的类定义中,还增加了"super"关键字会非常有用。在上例中,我们通过它调用父类的构造函数,在子类"sayName()"方法中调用了父类中的方法,并进行了一定的扩展。

来自:http://itbilu.com

交流群:564850876

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言