欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-10 17:53:37
和其它面向对象编程语言一样,es6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态、派生、抽象、迭代、单例等,而且根据 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 的类:

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

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

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