JavaScript：类(class)

在JS中，类是后来才出的概念，早期创造对象的方式是 

new Function()
调用构造函数创建函数对象；

而现在，可以使用 

new className()
构造方法来创建类对象了；

所以在很多方面，类的使用方式，很像函数的使用方式：

但是类跟函数，还是有本质区别的，这在 原型 那里已经说过，不再赘述；

如何定义一个类

如下所示去定义一个类：

 class className {

    // 属性properties

    property1 = 1;

    property2 = [];

    peoperty3 = {};

    property4 = function() {};

    property5 = () => {};

    

    // 构造器

    constructor(...args) {

        super();

        // code here

    };

    

    // 方法methods

    method1() {

        // code here

    };

    method2(...args) {

        //code here

    };

}

可以定义成员属性和成员方法以及构造器，他们之间都有封号 

;
隔开；

在通过 

new className()
创建对象 
obj
的时候，会立即执行构造器方法；

属性会成为 

obj
的属性，句式为赋值语句，就算等号右边是函数，它也依然是一个属性，注意与方法声明语句区别开；

方法会成为 

obj
的原型里的方法，即放在 
className.prototype
属性里；

像使用 
function
一样使用 
class
关键字

正如函数表达式一样，类也有类表达式：

image-20221221213521212

还可以像传递一个函数一样，去传递一个类：

image-20221221213652757

这在Java中是不可想象的，但是在JS中，就是这么灵活；

静态属性和静态方法

静态属性和静态方法，不会成为对象的属性和方法，永远都属于类本身，只能通过类去调用；

  • 定义语法

     // 直接在类中，通过static关键字定义
    
class className {
    
    static property = ...;
    
    static methoed() {};
    
}
    

    
// 通过类直接添加属性和方法，即为静态的
    
class className {};
    
className.property = ...;
    
className.method = function() {};

  • 调用语法

    类似于对象调用属性和方法，直接通过类名去调用

     className.property;
    
className.method();

静态属性/方法，可以和普通属性/方法同名，这不会被弄混，因为他们的调用者不一样，前者是类，后者是类对象；

私有属性和私有方法

JS新增的私有特性，在属性和方法之前添加 

#
号，使其只在类中可见，对象无法调用，只能通过类提供的普通方法去间接访问；

  • 定义和调用语法

     class className {
    
    // 定义，添加#号
    
    #property = ...;
    
    #method() {};
    
    
    
    // 只能在类中可见，调用也需要加#号
    
    getProperty() {
    
        return this.#property;
    
    }
    
    set property(value) {
    
        this.#property = value;
    
    }
    
}

注意， 

#property
是一个总体作为属性名，与 
property
是不同的， 
#method
同理；

在这个私有特性之前，JS采用人为约定的方式，去间接实现私有；

在属性和方法之前添加下划线 

_
，约定这样的属性和方法，只能在类中可见，只能靠人为遵守这样的约定；

类检查instanceof

我们知道，可以用 

typeof
关键字来获取一个变量是什么数据类型；

现在可以用 

instanceof
关键字，来判断一个对象是什么类的实例；

语法 

obj instanceof className
，会返回一个布尔值：

  • 如果 
    className
    是 
    obj
    原型链上的类，返回true；
  • 否则，返回false；

它是怎么去判断的呢？假设现在有如下几个类：

 class A {};

class B extends A {};

class C extends B {};

let c = new C();

c的原型是 

C.prototype
；

C.prototype
的原型是 
B.prototype
；

B.prototype
的原型是 
A.prototype
；

A.prototype
的原型是 
Object.prototype
；

Object.prototype
的原型是null；

原型链如上所示；

当我们执行 

c instanceof A
的时候，它是这样的过程：

c.__proto__ === A.prototype
？否，则继续；

c.__proto__.__proto__ === A.prototype
？否，则继续；

c.__proto__.__proto__.__proto__ === A.prototype
？是，返回true；

如果一直否的话，这个过程会持续下去，直到将 

c
的原型链溯源到null，全都不等于 
A.prototype
，则返回false；

也就是说，instanceof关键字，比较的是对象的原型链上的原型和目标类的prototype是否相等（原型和prototype里有 

constructor
，但是instanceof不会比较构造器是否相等，只会比较隐藏属性 
[[Prototype]]
）；

静态方法Symbol.hasInstance

大多数类是没有实现静态方法 

[Symbol.hasInstance]
的，如果有一个类实现了这个静态方法，那么instanceof关键字会直接调用这个静态方法；

如果类没有实现这个静态方法，那么则会按照上述说的流程去检查；

 class className {

    static [Symbol.hasInstance]() {};

}

objA.isPrototypeOf(objB)

isPrototypeOf()
方法，会判断 
objA
的原型是否处在 
objB
的原型链中，如果在则返回true，否则返回false；

objA.isPrototypeOf(objB)
就相当于 
objB instanceof classA
；

反过来， 

objB instanceof classA
就相当于 
classA.prototype.isPrototypeOf(objB)
；

继承

我们知道，JS的继承，是通过原型来实现的，现在结合原型来说一下类的继承相关内容。

关键字extends

JS中表示继承的关键字是 

extends
，如果 
classA extends classB
，则说明 
classA
继承 
classB
， 
classA
是子类， 
classB
是父类；

原型高于extends

时刻记住，JS的继承，是依靠原型来实现的；

关键字 

extends
虽然确立了两个类的父子关系，但是这只是一开始确立子类的父原型；

但是父原型是可以中途被修改的，此时子类调用方法，是沿着原型链去寻找的，而不是沿着子类父类的关键字声明去寻找的，这和Java是不一样的：

image-20221223233526394

如图所示， 

C extends A
确立了C一开始的父原型是 
A.prototype
， 
c.show()
调用的也是父类 
A
的方法；

但是后面修改 

c
的父原型为 
B.prototype
， 
c.show
调用的就不是父类 
A
的方法，而是父原型的方法；

也就是说，原型才是核心，高于 

extends
关键字；

基类和派生类

 class classA {};

class classB extends classA {};

像 

classA
这样没有继承任何类（实际上父原型是 
Object.prototype
）的类称为基类；

像 

classB
这样继承 
classB
的类，称为 
classB
的派生类；

为什么要分的这么细，是因为在创建类时，他们两个的行为不同，后面会说到；

类的原型

类本身也是有原型的，就像类对象有原型一样；

image-20221223211958950

可以看到， 

B
的原型就是其父类 
A
，而 
A
作为基类，基类的原型是本地方法；

正因如此， 

B
可以通过原型去调用 
A
的静态方法/属性；

也就是说，静态方法/属性，也是可以继承的，通过类的原型去继承；

类对象的原型和类的prototype属性

在创建类对象的时候，会将类的prototype属性值复制给类对象的原型；

所以说，类对象的原型等于类的prototype属性值；

image-20221223214052596

而类的prototype属性，默认就有两个属性：

  • 构造器constructor：指向类本身；
  • 原型[[Prototype]]：指向父类的prototype属性；

以及

  • 类的普通方法；

从上图中可以看出， 

A
的prototype属性里，除构造器和原型以外，就只有一个普通方法 
show()
；

这说明，只有类的普通方法，会自动进入类的 

prototype
属性参与继承；

也就是说，一个类对象的数据结构，如下：

  • 普通属性
  • （原型）prototype属性
    • 构造器
    • 父类的prototype属性（父原型）
    • 方法

另外，类的 

prototype
属性是不可写的，但是类对象的原型则是可以修改的；

继承了哪些东西

当子类去继承父类的时候，到底继承到了父类的哪些东西，也即子类可以用父类的哪些内容；

image-20221223220502179

从结果上来看，我们可以确定如下：

  • 子类继承父类的静态属性/方法（基于类的原型）；
  • 子类对象继承父类的普通方法和构造器（基于类的prototype）；
  • 子类直接将父类的普通属性作为自己的普通属性（普通属性不参与继承）；

由于原型链的存在，这些继承会一路沿着原型链回溯，继承到所有祖宗类；

同名属性的覆盖

由于继承的机制，势必子类和父类可能会有同名属性的存在：

image-20221223221756177

从结果上可以看到，虽然子类直接将父类的普通属性作为自己的普通属性，但是当出现同名属性，属性值会进行覆盖，最终的值采用子类自己定义的值；

同名方法的重写

与属性一样，子类和父类也可能会出现同名方法；

当然大多数情况下，是我们自己要拓展方法功能而故意同名，从而重写父类的方法；

image-20221223222233351

如上所示，我们重写了父类的静态方法和普通方法；

如果是重写构造器的话，分两种情况：

 // 基类重写构造器

class A {

    constructor() {

        code...

    }

}

    

// 派生类重写构造器

class B extends A() {

    constructor() {

        // 一定要先写super()

        super();

        code...

    }

}

子类的调用顺序

从上图还可以看出来，子类调用方法的顺序：

  • 先从自己的方法里调用，发现没有可调用的方法时；
  • 再沿着原型链，先从父类开始寻找方法，一直往上溯源，直到找到可调用的方法，或者没有而出错；

super关键字

类的方法里，有一个特殊的、专门用于 

super
关键字的特殊属性 
[[HomeObject]]
，这个属性绑定 
super
语句所在的类的对象，不会改变；

而 

super
关键字，则指向 
[[HomeObject]]
绑定的对象的类的父类的 
prototype
；

这要求， 

super
关键字用于派生类类的方法里，基类是不可以使用 
super
的，因为没有父类；

当我们使用 

super
关键字时，借助于 
[[HomeObject]]
，总是能够正确重用父类方法；

image-20221223225446030

如上， 

super
语句所在的类为 
B
，其对象为 
b
，即 
[[HomeObject]]
绑定 
b
；

而 

super
则指向 
b
的类的父原型，即 
A
的prototype属性；

而 

super.show()
就类似于 
A.prototype.show()
，故而最终结果如上所示；

可以简单理解成， super指向子类对象的父类的 

prototype
；

构造器constructor

终于说到构造器了，理解了构造器的具体创建对象的过程，我们就能理解关于继承的很多内容了；

先来看一下基类的构造器创建对象的过程：

image-20221224002125631

执行 

let a = new A()
时，大致流程如下：

  • 首先调用 
    A.prototype
    的特性 
    [[Prototype]]
    创建一个字面量对象，同时 
    this
    指针指向这个字面量对象；
  • 然后执行类 
    A()
    的定义， 
    A
    定义的普通属性成为字面量对象的属性并初始化， 
    A.prototype
    的 
    value
    值复制给字面量对象的隐藏属性 
    [[Prototype]]
    ；
  • 然后再执行 
    constructor
    构造器，没有构造器就算了；
  • 返回 
    this
    指针给变量 
    a
    ，即 
    a
    此时引用该字面量对象了；

从结果上看，在执行构造器时，字面量对象就已经有原型了，以及属性 

name
，且值初始化为 
tomA
；

然后才对属性 

name
重新赋值为 
jerryA
；

然而，构造器中对属性的重新赋值，从一开始就决定好了，只是在执行到这句赋值语句之前，暂存在字面量对象中；

现在再来看一下派生类创建对象的过程；

image-20221224005351505

执行 

let b = new B()
的大致流程如下：

  • 首先调用 
    B.prototype
    的特性 
    [[Prototype]]
    创建一个字面量对象，同时 
    this
    指针指向这个字面量对象；
  • 然后执行类 
    B()
    的定义， 
    B
    定义的普通属性成为字面量对象的属性并初始化， 
    B.prototype
    的 
    value
    值复制给字面量对象的隐藏属性 
    [[Prototype]]
    ；
  • 然后再执行 
    constructor
    构造器（没有显式定义构造器会提供默认构造器），第一句 
    super()
    ，开始进入类 
    A()
    的定义；
    • 暂存 
      B
      的属性值，转而赋值为 
      A
      定义的值， 
      A.prototype
      的 
      value
      值复制给 
      B.__proto__
      的隐藏属性 
      [[Prototype]]
      ;
    • 然后执行 
      constructor
      构造器（基类没有构造器就算了）；
    • 返回 
      this
      指针；
    • 丢弃 
      A
      赋值的属性值，重新使用暂存的 
      B
      的属性值；
  • 继续执行 
    constructor
    构造器剩下的语句；
  • 返回 
    this
    指针给变量 
    b
    ，即 
    b
    引用该字面量对象了；

通过基类和派生类创建对象的流程对比，可以发现主要区别在于类的属性的赋值上；

属性值从一开始就已经暂存好：

  • 如果构造器 
    constructor
    中有赋值，则暂存这个值；
  • 如果构造器没有，则暂存类定义中的值；
  • 不管父类及其原型链上同名的属性在中间进行过几次赋值，最终都会重新覆盖为最开始就暂存好的值；

标签: Javascript

添加新评论