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


Posted in Javascript onFebruary 11, 2019

和其它面向对象编程语言一样,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 的类:

class Friend extends Person {
 constructor(name, phone){
  super(name)
  this.phone = phone
 }
}

let myfriend = new Friend('lee',2233)
console.log(myfriend) // Friend { name: 'lee', phone: 2233 }

Friend 继承了 Person,术语上称 Person 为基类,Friend 为派生类。

需要注意的是,surpe()只能在派生类中使用,它负责初始化 this,所以派生类使用 this 之前一定要用surpe()。

3.1 继承内建对象

ES6 的类继承可以继承内建对象(Array、Set、Map 等),继承后可以拥有基类的所有内建功能。例如:

class MyArray extends Array {
}

let arr = new MyArray(1, 2, 3, 4),
 subarr = arr.slice(1, 3)

console.log(arr.length) // 4
console.log(arr instanceof MyArray) // true
console.log(arr instanceof Array) // true
console.log(subarr instanceof MyArray) // true

注意到上例中,不仅 arr 是派生类 MyArray 的实例,subarr 也是派生类 MyArray 的实例,内建对象继承的实用之处是改变返回对象的类型。

浏览器引擎背后是通过[Symbol.species]属性实现这一行为,它被用于返回函数的静态访问器属性,内建对象定义了[Symbol.species]属性的有 Array、ArrayBuffer、Set、Map、Promise、RegExp、Typed arrays。

3.2 继承表达式的类

目前extends可以继承类和内建对象,但更强大的功能从表达式导出类!

这个表达式要求可以被解析为函数并具有[[Construct]]属性和原型,示例如下:

function Sup(val) {
 this.value = val
}

Sup.prototype.getVal = function () {
 return 'hello' + this.value
}

class Derived extends Sup {
 constructor(val) {
  super(val)
 }
}

let der = new Derived('world')
console.log(der) // Derived { value: 'world' }
console.log(der.getVal()) // helloworld

3.3 只能继承的抽象类

ES6 引入new.target元属性判断函数是否通过new关键字调用。类的构造函数也可以通过new.target确定类是如何被调用的。

可以通过new.target创建抽象类(不能实例化的类),例如:

class Abstract {
 constructor(){
  if(new.target === Abstract) {
   throw new Error('抽象类(不能直接实例化)')
  }
 }
}

class Instantiable extends Abstract {
 constructor() {
  super()
 }
}

// let abs = new Abstract() // Error: 抽象类(不能直接实例化)
 let abs = new Instantiable()
console.log(abs instanceof Abstract) // true

虽然不能直接使用 Abstract 抽象类创建实例,但是可以作为基类派生其它类。

四、类的静态成员

ES6 使用static关键字声明静态成员或方法。在类的方法或访问器属性前都可以使用static,唯一的限制是不能用于构造函数。

静态成员的作用是某些类成员的私有化,及不可在实例中访问,必须要直接在类上访问。

class Person {
 constructor(name) {
  this.name = name;
 }

 static create(name) {
  return new Person(name);
 }
}

let beauty = Person.create("Jenny");
// beauty.create('lee') // TypeError

如果基类有静态成员,那这些静态成员在派生类也可以使用。

例如将上例的 Person 作为基类,派生出 Friend 类并使用基类的静态方法create( ):

class Friend extends Person {
 constructor(name){
  super(name)
 }
}

var friend = Friend.create('lee')
console.log(friend instanceof Person) // true
console.log(friend instanceof Friend) // false

可以看出派生类依然可以使用基类的静态方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
浅析Angular19 自定义表单控件
Jan 31 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
总结4个方面优化Vue项目
Feb 11 #Javascript
JavaScript 九种跨域方式实现原理
Feb 11 #Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 #Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 #Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 #Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 #Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
thinkphp实现like模糊查询实例
2014/10/29 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
pyenv命令管理多个Python版本
2017/03/26 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python调用私有属性的方法总结
2020/07/24 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
送货司机岗位职责
2013/12/11 职场文书
项目开发计划书
2014/01/09 职场文书
写自荐信三大法宝
2014/01/24 职场文书
交通安全教育制度
2014/02/02 职场文书
小学清明节活动总结
2014/07/04 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
工地材料员岗位职责
2015/04/11 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Django中session进行权限管理的使用
2021/07/09 Python