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