12_类 - 《JavaScript高级程序设计》

认识 class

title: js中的类
categories: Javascript
tag:

类
date: 2021-11-23 14:16:34

认识 class

我们会发现，按照前面的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。

在 ES6（ECMAScript2015）新的标准中使用了 class 关键字来直接定义类；
但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；
所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系；

那么，如何使用 class 来定义一个类呢？

可以使用两种方式来声明类：类声明和类表达式；

12_类 - 图1

类和构造函数的异同

会发现和构造函数的特性是一致的

class Person {}
console.log(Person.prototype)
console.log(Person.prototype.__proto__)
console.log(typeof Person)
var p = new Person()
console.log(p.__proto__ === Person.prototype) //true

类的构造函数 constructor

如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？

每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的 constructor；
当我们通过 new 操作符，操作一个类的时候会调用这个类的构造函数 constructor；
每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常；

当我们通过 new 关键字操作类的时候，会调用这个 constructor 函数，并且执行如下操作：

在内存中创建一个新的对象（空对象）；
这个对象内部的[[prototype]]属性会被赋值为该类的 prototype 属性；
构造函数内部的 this，会指向创建出来的新对象；
执行构造函数的内部代码（函数体代码）；
如果构造函数没有返回非空对象，则返回创建出来的新对象；

class Person {
  //类的构造方法
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
var p1 = new Person('why', 19)
var p2 = new Person('kobe', 20)
console.log(p1, p2) //Person { name: 'why', age: 19 } Person { name: 'kobe', age: 20 }

类的实例方法

在上面我们定义的属性都是直接放到了 this 上，也就意味着它是放到了创建出来的新对象中：

在前面我们说过对于实例的方法，我们是希望放到原型上的，这样可以被多个实例来共享；
这个时候我们可以直接在类中定义；

class Person {
  //类的构造方法
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  running() {
    console.log(this.name + 'running~')
  }
  eating() {
    console.log(this.name + 'eating~')
  }
}
var p1 = new Person('why', 19)
var p2 = new Person('kobe', 20)
console.log(p1, p2) //Person { name: 'why', age: 19 } Person { name: 'kobe', age: 20 }
p2.eating()
p1.eating()

12_类 - 图2

类的访问器方法

class Person {
  constructor(name) {
    this._name = name
  }
  set name(newName) {
    console.log('拦截设置操作')
    this._name = newName
  }
  get name() {
    console.log('拦截访问操作')
    return this._name
  }
}
var p = new Person('why')
p.name = 'dh'
console.log(p.name)

类的静态方法

静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用 static 关键字来定义.

静态方法，属于类的方法，即类可以直接调用的方法。为类所有实例化对象所共用（但不能用实例对象之间调用），所以静态成员只在内存中占一块区域；
实例方法，属于实例化类后对象的方法，即实例对象调用的方法。每创建一个类的实例，都会在内存中为非静态成员分配一块存储；
静态方法在一启动时就实例化了，因而静态内存是连续的，且静态内存是有限制的；而非静态方法是在程序运行中生成内存的，申请的是离散的空间。

12_类 - 图3

类的继承

前面我们花了很大的篇幅讨论了在 ES5 中实现继承的方案，虽然最终实现了相对满意的继承机制，但是过程却依然是非常繁琐的。

在 ES6 中新增了使用 extends 关键字，可以方便的帮助我们实现继承：

12_类 - 图4

如果我们想重用逻辑的话

12_类 - 图5

可以使用 super 关键字

super

当我们继承了 Person 类之后，如果想在子类自己重新实现逻辑。没有使用父类的逻辑时会报错。

12_类 - 图6

注意：在子（派生）类的构造函数中使用 this 或者返回默认对象之前，必须先通过 super 调用父类的构造函数！
super 的使用位置有三个：子类的构造函数、实例方法、静态方法；

复用父类的逻辑

那么此时，我们就可以调用父类的逻辑

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  running() {
    console.log(this.name + 'running')
  }
}
class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }
}
var stu = new Student('why', 18, 111)
console.log(stu) //Student { name: 'why', age: 18, sno: 111 }
//方法也会直接继承
stu.running()

12_类 - 图7

复用父类实例方法

如果我们对父类的方法不满意，我们可以在子类重写这个方法。

我们还可以使用 super 复用父类中的方法

12_类 - 图8

复用父类静态方法

12_类 - 图9

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  running() {
    console.log(this.name + 'running')
  }
  static StaticMethod() {
    console.log('父类的静态方法')
  }
}
class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }
  //重写方法逻辑
  running() {
    console.log(this.name + 'start')
    super.running()
  }
  //重写静态方法
  static StaticMethod() {
    console.log('子类的静态方法')
    super.StaticMethod()
  }
}
var stu = new Student('why', 18, 111)
console.log(stu) //Student { name: 'why', age: 18, sno: 111 }
//方法也会直接继承
stu.running()
Student.StaticMethod() //父类的静态方法

继承内置类

扩展系统类

class DhArray extends Array {
  firstItem() {
    return this[0]
  }
  lastItem() {
    return this[this.length - 1]
  }
}
var arr = new DhArray(1, 2, 3)
console.log(arr.firstItem()) //1
console.log(arr.lastItem()) //3

类的混入

JavaScript 的类只支持单继承：也就是只能有一个父类

那么在开发中我们我们需要在一个类中添加更多相似的功能时，应该如何来做呢？
这个时候我们可以使用混入（mixin）；

假如我们一个类需要使用多个类的功能。但是 Js 是单继承的。

相当于是混入。

12_类 - 图10

Javascript 中的多态

面向对象的三大特性：封装、继承、多态。

前面两个我们都已经详细解析过了，接下来我们讨论一下 JavaScript 的多态。

JavaScript 有多态吗？

维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。
非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript 是一定存在多态的。

传统意义上的多态

传统意义上的多态有三个方面。

必须有继承（是多态的前提）
必须有重写
必须有父类的引用指向子类对象

JS 中的多态

和传统意义上的多态要求不一样。但是不需要满足前提。可以看到以下代码是满足多态的，但是，并没有继承，重写，以及父类应用指向子类对象

function sum(a, b) {
  console.log(a + b)
}
sum(10, 20) //30
sum('aaa', 'bbb') //aaabbb

字面量的增强

属性的简写

当属性的 key 和 value 相同的时候，可以简写为以下形式

12_类 - 图11

方法的简写

12_类 - 图12

计算属性名

12_类 - 图13

解构

ES6 中新增了一个从数组或对象中方便获取数据的方法，称之为解构 Destructuring。

我们可以划分为：数组的解构和对象的解构。

数组的解构：

基本解构过程
顺序解构
解构出数组
默认值

var names = ['abc', 'bca', 'cba']
var [item1, item2, item3] = names
console.log(item1, item2, item3) //abc bca cba
//解构后面的元素
var [, itema, itemb] = names
console.log(itema, itemb) //bca cba
// 解构一个元素，后面放到一个新数组
var [itemx, ...newNums] = names
console.log(itemx, newNums) //abc [ 'bca', 'cba' ]
//默认值
var [item1, item2, item3, item4 = 1] = names
console.log(item1, item2, item3, item4) //abc bca cba 1

对象的解构：

基本解构过程
任意顺序
重命名
默认值

var obj = {
  name: 'why',
  age: 18,
  height: 1.88
}
//基本结构过程
var { name, age, height } = obj
console.log(name, age, height)
//重命名
var { name: newName } = obj
console.log(newName)
//默认值
var { address = '广州市' } = obj
var { address: newAddress = '广州市' } = obj
console.log(address, newAddress)