ES6 更易于继承的类语法的使用

和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态、派生、抽象、迭代、单例等,而且根据 ES6 的新特性衍生出很多有趣的用法。

一、类的基本定义

基本所有面向对象的语言都支持类的封装与继承,那什么是类?

类是面向对象程序设计的基础,包含数据封装、数据操作以及传递消息的函数。类的实例称为对象。

ES5 之前通过函数来模拟类的实现如下:

// 构造函数 function Person(name) { this.name = name; } // 原型上的方法 Person.prototype.sayName = function(){ console.log(this.name); }; // new 一个实例 var friend = new Person("Jenny"); friend.sayName(); // Jenny console.log(friend instanceof Person); // true console.log(friend instanceof Object); // true

总结来说,定义一个类的思路如下:

1.需要构造函数封装数据
2.在原型上添加方法操作数据,
3.通过New创建实例

ES6 使用class关键字定义一个类,这个类有特殊的方法名[[Construct]]定义构造函数,在 new 创建实例时调用的就是[[Construct]],示例如下:

/*ES6*/ // 等价于 let Person = class { class Person { // 构造函数 constructor(name) { this.name = name; } // 等价于Person.prototype.sayName sayName() { console.log(this.name); } } console.log(typeof Person); // function console.log(typeof Person.prototype.sayName); // function let friend = new Person("Jenny"); friend.sayName(); // Jenny console.log(friend instanceof Person); // true console.log(friend instanceof Object); // true

上面的例子中class定义的类与自定义的函数模拟类功能上貌似没什么不同,但本质上还有很大差异的:

函数声明可以被提升,但是class类声明与let类似,不能被提升;

类声明自动运行在严格模式下,“use strict”;

类中所有方法都是不可枚举的,enumerable 为 false。

二、更灵活的类

类和函数一样,是JavaScript的一等公民(可以传入函数、从函数返回、赋值),并且注意到类与对象字面量还有更多相似之处,这些特点可以扩展出类更灵活的定义与使用。

2.1 拥有访问器属性

对象的属性有数据属性和访问属性,类中也可以通过get、set关键字定义访问器属性:

class Person { constructor(name) { this.name = name; } get value () { return this.name + this.age } set value (num) { this.age = num } } let friend = new Person("Jenny"); // 调用的是 setter friend.value = 18 // 调用的是 getter console.log(friend.value) // Jenny18

2.2 可计算的成员名称

类似 ES6 对象字面量扩展的可计算属性名称,类也可以用[表达式]定义可计算成员名称,包括类中的方法和访问器属性:

let methodName = 'sayName' class Person { constructor(name) { this.name = name; } [methodName + 'Default']() { console.log(this.name); } get [methodName]() { return this.name } set [methodName](str) { this.name = str } } let friend = new Person("Jenny"); // 方法 friend.sayNameDefault(); // Jenny // 访问器属性 friend.sayName = 'lee' console.log(friend.sayName) // lee

想进一步熟悉对象新特性可参考: 【ES6】对象的新功能与解构赋值

2.3 定义默认迭代器

ES6 中常用的集合对象(数组、Set/Map集合)和字符串都是可迭代对象,如果类是用来表示值这些可迭代对象的,那么定义一个默认迭代器会更有用。

ES6 通过给Symbol.iterator属性添加生成器的方式,定义默认迭代器:

class Person { constructor(name) { this.name = name; } *[Symbol.iterator]() { for (let item of this.name){ yield item } } } var abbrName = new Person(new Set(['j', 'j', 'e', 'e', 'n', 'y', 'y', 'y',])) for (let x of abbrName) { console.log(x); // j e n y } console.log(...abbrName) // j e n y

定义默认迭代器后类的实例就可以使用for-of循环和展开运算符(...)等迭代功能。

对以上迭代器内容感到困惑的可参考:【ES6】迭代器与可迭代对象

2.4 作为参数的类

类作为"一等公民”可以当参数使用传入函数中,当然也可以从函数中返回:

function createClass(className, val) { return new className(val) } let person = createClass(Person,'Jenny') console.log(person) // Person { name: 'Jenny' } console.log(typeof person) // object

2.5 创建单例

使用类语法创建单例的方式通过new立即调用类表达式:

let singleton = new class { constructor(name) { this.name = name; } }('Jenny') console.log(singleton.name) // Jenny

这里先创建匿名类表达式,然后 new 调用这个类表达式,并通过小括号立即执行,这种类语法创建的单例不会在作用域中暴露类的引用。

三、类的继承

回顾 ES6 之前如何实现继承?常用方式是通过原型链、构造函数以及组合继承等方式。

ES6 的类使用熟悉的extends关键字指定类继承的函数,并且可以通过surpe()方法访问父类的构造函数。

例如继承一个 Person 的类:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/59b2e4d126d755291cfdddc9a42d4fec.html