JavaScript进阶之(三) CLASS

最新推荐文章于 2024-06-19 09:50:52 发布

火柴盒zhang

最新推荐文章于 2024-06-19 09:50:52 发布

阅读量605

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/likewindy/article/details/109545903

版权

学习整理用，地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes

类是用于创建对象的模板。他们用代码封装数据以处理该数据。 JS中的类建立在原型基础上，但也具有某些语法和语义未与ES5类相似语义共享。

一、定义类

实际上，类是“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

1.1 类声明

定义类的一种方法是使用类声明。要声明一个类，你可以使用带有class关键字的类名（这里是“Rectangle”）。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出ReferenceError：

let p = new Rectangle(); // ReferenceError

class Rectangle {}

1.2 类表达式（不建议使用）

类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。(不过，可以通过类的(而不是一个实例的) name 属性来检索它)。

// 未命名/匿名类
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 命名类
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"

二、类体和方法定义

一个类的类体是一对花括号/大括号 {} 中的部分。这是你定义类成员的位置，如方法或构造函数。

2.1 严格模式

类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter和setter都在严格模式下执行。

2.2 构造函数

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。

class Polygon {
  constructor() {
    this.name = 'Polygon';
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出一个SyntaxError 。

在一个构造方法中可以使用super关键字来调用一个父类的构造方法。

如果没有显式指定构造方法，则会添加默认的 constructor 方法。

如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

2.2.1 使用constructor方法

class Polygon {  //多边形 
    constructor() {
        this.name = "Polygon";
    }
}

class Square extends Polygon { //正方形
    constructor() {
        super();
    }
}

class Rectangle {}  //长方形

Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
// Square的原型被设置成长方形的
console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true

let newInstance = new Square();
console.log(newInstance.name); //Polygon

这里，Square类的原型被改变，但是在正在创建一个新的正方形实例时，仍然调用前一个基类Polygon的构造函数。

2.2.2 默认构造方法

如前所述，如果不指定构造方法，则使用默认构造函数。对于基类，默认构造函数是：

constructor() {}

对于派生类，默认构造函数是：

constructor(...args) {
  super(...args);
}

2.3 原型方法

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);

console.log(square.area); 
// 100

2.4 静态方法

static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);

p1.displayName;
// undefined
p1.distance;
// undefined

console.log(Point.displayName);
// "Point"
console.log(Point.distance(p1, p2));
// 7.0710678118654755

2.5 用原型和静态方法绑定 this

当调用静态或原型方法时没有指定 this 的值，那么方法内的 this 值将被置为 undefined。即使你未设置 “use strict” ，因为 class 体内部的代码总是在严格模式下执行。

class Animal { 
  speak() {
    return this;
  }
  static eat() {  //静态
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined  没有指定this

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined  没有指定this

如果上述代码通过传统的基于函数的语法来实现，那么依据初始的 this 值，在非严格模式下方法调用会发生自动装箱。若初始值是 undefined，this 值会被设为全局对象。

严格模式下不会发生自动装箱，this 值将保留传入状态。

function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

2.6实例属性

实例的属性必须定义在类的方法里：

class Rectangle {
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

静态的或原型的数据属性必须定义在类定义的外面。

Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;

2.7字段声明

2.7.1 公有字段声明

使用JavaScript字段声明语法，上面的示例可以写成：

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

通过预先声明字段，类定义变得更加自我记录，并且字段始终存在。

正如上面看到的，这个字段可以用也可以不用默认值来声明。

2.7.2 私有字段声明

使用私有字段，可以按以下方式细化定义。

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
  }
}

从类外部引用私有字段是错误的。它们只能在类里面中读取或写入。通过定义在类外部不可见的内容，可以确保类的用户不会依赖于内部，因为内部可能在不同版本之间发生变化。

私有字段仅能在字段声明中预先定义。

私有字段不能通过在之后赋值来创建它们，这种方式只适用普通属性。
更多信息，请看class fields.

二、使用 extends 扩展子类

extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类。

class Animal { 
  constructor(name) { //构造函数
    this.name = name;
  }
  
  speak() { //公共方法
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal { //extends 继承 Animal
  constructor(name) {
    super(name); // 调用超类构造函数并传入name参数
  }

  speak() { //重新方法
    console.log(`${this.name} barks.`);
  }
}

var d = new Dog('Mitzie');
d.speak();// 'Mitzie barks.'

如果子类中定义了构造函数，那么它必须先调用 super() 才能使用 this 。

也可以继承传统的基于函数的“类”，不建议这么使用：

function Animal (name) {
  this.name = name;  
}
Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak();//Mitzie makes a noise.  Mitzie barks.

请注意，类不能继承常规对象（不可构造的）。如果要继承常规对象，可以改用Object.setPrototypeOf()，所以不建议这么做：，

var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

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

Object.setPrototypeOf(Dog.prototype, Animal);// 如果不这样做，在调用speak时会返回TypeError

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

三、扩展部分-class fields.

3.1公有字段

静态公有字段和实例公有字段都是可编辑的，可遍历的，可配置的。它们本身不同于私有对应值（private counterparts）的是，它们参与原型的继承。

3.1.1 静态公有字段

静态公有字段在你想要创建一个只在每个类里面只存在一份，而不会存在于你创建的每个类的实例中的属性时可以用到。你可以用它存放缓存数据、固定结构数据或者其他你不想在所有实例都复制一份的数据。

静态公有字段是使用关键字 static 声明的。我们在声明一个类的时候，使用Object.defineProperty方法将静态公有字段添加到类的构造函数中。在类被声明之后，可以从类的构造函数访问静态公有字段。

class ClassWithStaticField {
  static staticField = 'static field';
}

console.log(ClassWithStaticField.staticField);
// 预期输出值: "static field"

没有设定初始化程序的字段将默认被初始化为undefined。

class ClassWithStaticField {
  static staticField;
}

console.assert(ClassWithStaticField.hasOwnProperty('staticField'));
console.log(ClassWithStaticField.staticField);
// 预期输出值: "undefined"

静态公有字段不会在子类里重复初始化，但我们可以通过原型链访问它们。

class ClassWithStaticField {
  static baseStaticField = 'base field';
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = 'sub class field';
}

console.log(SubClassWithStaticField.subStaticField);
// 预期输出值: "sub class field" // 通过原型链

console.log(SubClassWithStaticField.baseStaticField);
// 预期输出值: "base field"  // 通过原型链

当初始化字段时，this指向的是类的构造函数。你可以通过名字引用构造函数，并使用super获取到存在的超类构造函数。

class ClassWithStaticField {
  static baseStaticField = 'base static field';
  static anotherBaseStaticField = this.baseStaticField;

  static baseStaticMethod() { return 'base static method output'; }
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = super.baseStaticMethod(); //初始化时 ，使用super获取到存在的超类构造函数
}

console.log(ClassWithStaticField.anotherBaseStaticField);
// 预期输出值: "base static field"

console.log(SubClassWithStaticField.subStaticField);
// 预期输出值: "base static method output"

3.1.2 公有实例字段

公有实例字段存在于类的每一个实例中。通过声明一个公有字段，我们可以确保该字段一直存在，而类的定义则会更加像是自我描述。

公有实例字段可以在基类的构造过程中（构造函数主体运行前）使用Object.defineProperty添加，也可以在子类构造函数中的super()函数结束后添加。

class ClassWithInstanceField {
  instanceField = 'instance field';
}

const instance = new ClassWithInstanceField();
console.log(instance.instanceField);
// 预期输出值: "instance field"

没有设定初始化程序的字段将默认被初始化为undefined。

class ClassWithInstanceField {
  instanceField;
}

const instance = new ClassWithInstanceField();
console.assert(instance.hasOwnProperty('instanceField'));
console.log(instance.instanceField);
// 预期输出值: "undefined"

和属性（properties）一样，字段名可以由计算得出这个很有用。

const PREFIX = 'prefix';

class ClassWithComputedFieldName {
    [`${PREFIX}Field`] = 'prefixed field';
}

const instance = new ClassWithComputedFieldName();
console.log(instance.prefixField);
// 预期输出值: "prefixed field"

当初始化字段时，this指向的是类正在构造中的实例。和公共实例方法相同的是：你可以在子类中使用super来访问超类的原型。

class ClassWithInstanceField {
  baseInstanceField = 'base field';
  anotherBaseInstanceField = this.baseInstanceField;
  baseInstanceMethod() { return 'base method output'; }
}

class SubClassWithInstanceField extends ClassWithInstanceField {
  subInstanceField = super.baseInstanceMethod();
}

const base = new ClassWithInstanceField();
const sub = new SubClassWithInstanceField();

console.log(base.anotherBaseInstanceField);
// 预期输出值: "base field"

console.log(sub.subInstanceField);
// 预期输出值: "base method output"

3.2公共方法

3.1.2 静态公共方法

关键字static将为一个类定义一个静态方法。静态方法不会在实例中被调用，而只会被类本身调用。它们经常是工具函数，比如用来创建或者复制对象。

class ClassWithStaticMethod {

  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }

}

console.log(ClassWithStaticMethod.staticProperty);
// output: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// output: "static method has been called."

静态方法是在类的赋值阶段用Object.defineProperty方法添加到类中的。静态方法是可编辑的、不可遍历的和可配置的。

3.1.2 公共实例方法

正如其名，公共实例方法是可以在类的实例中使用的。

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return 'hello world';
  }
}

const instance = new ClassWithPublicInstanceMethod();
console.log(instance.publicMethod());
// 预期输出值: "hello world"

公共实例方法是在类的赋值阶段用Object.defineProperty方法添加到类中的。静态方法是可编辑的、不可遍历的和可配置的。

你可以使用生成器（generator）、异步和异步生成器方法。

class ClassWithFancyMethods {
  *generatorMethod() { } // *生成器
  async asyncMethod() { } // async 异步
  async *asyncGeneratorMethod() { }// 异步生成器
}

在实例的方法中，this指向的是实例本身，你可以使用super访问到超类的原型，由此你可以调用超类的方法。

class BaseClass {
  msg = 'hello world';
  basePublicMethod() {
    return this.msg;
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod();
  }
}

const instance = new SubClass();
console.log(instance.subPublicMethod());
// 预期输出值: "hello world"

getter和setter是和类的属性绑定的特殊方法，分别会在其绑定的属性被取值、赋值时调用。使用get和set句法定义实例的公共getter和setter。

class ClassWithGetSet {
  #msg = 'hello world'; //私有变量
  get msg() {
    return this.#msg;
  }
  set msg(x) {
    this.#msg = `hello ${x}`; //字符串拼接
  }
}

const instance = new ClassWithGetSet();
console.log(instance.msg);
// expected output: "hello world"

instance.msg = 'cake'; //调用的是  set msg('cake')
console.log(instance.msg); //调用的是  get msg()
// 预期输出值: "hello cake"

3.3私有字段

3.3.1 静态私有字段

静态私有字段可以在类声明本身内部的构造函数上被访问到。

静态变量只能被静态方法访问的限制依然存在。

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD;//静态私有变量

  static publicStaticMethod() {
    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
  }
}

assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);

静态私有字段是在类赋值的时候被添加到类构造函数中的。

静态私有字段有一个来源限制。只有定义静态私有字段的类可以访问该字段。这在使用this时，可能会导致不符合预期的行为。

class BaseClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD;

  static basePublicStaticMethod() {
    this.#PRIVATE_STATIC_FIELD = 42;
    return this.#PRIVATE_STATIC_FIELD;
  }
}

class SubClass extends BaseClassWithPrivateStaticField { }

assertThrows(() => SubClass.basePublicStaticMethod(), TypeError);

3.3.2 私有实例字段

私有实例字段是通过# names句型（读作“哈希名称”）声明的，即为识别符加一个前缀“#”。“#”是名称的一部分，也用于访问和声明。

封装是语言强制实施的。引用不在作用域内的 # names 是语法错误。

class ClassWithPrivateField {
  #privateField; // 私有实例
  
  constructor() {
    this.#privateField = 42;
    this.#randomField = 666; # Syntax error
  }
}

const instance = new ClassWithPrivateField();
instance.#privateField === 42; // Syntax error

3.4私有方法

3.4.1 静态私有方法

和静态公共方法一样，静态私有方法也是在类里面而非实例中调用的。和静态私有字段一样，它们也只能在类的声明中访问。

你可以使用生成器（generator）、异步和异步生成器方法。

静态私有方法可以是生成器、异步或者异步生成器函数。

class ClassWithPrivateStaticMethod {
    static #privateStaticMethod() {
        return 42;
    }

    static publicStaticMethod() {
        return ClassWithPrivateStaticMethod.#privateStaticMethod();
    }
}

assert(ClassWithPrivateStaticMethod.publicStaticMethod() === 42);

3.4.2 私有实例方法

私有实例方法在类的实例中可用，它的访问方式的限制和私有实例字段相同。

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world';
  }

  getPrivateMessage() {
      return #privateMethod();
  }
}

const instance = new ClassWithPrivateMethod();
console.log(instance.getPrivateMessage());
// 预期输出值: "hello world"

私有实例方法可以是生成器、异步或者异步生成器函数。私有getter和setter也是可能的：

class ClassWithPrivateAccessor {
  #message;

  get #decoratedMessage() {
    return `✨${this.#message}✨`;
  }
  set #decoratedMessage(msg) {
    this.#message = msg;
  }

  constructor() {
    this.#decoratedMessage = 'hello world';
    console.log(this.#decoratedMessage);
  }
}

new ClassWithPrivateAccessor();
// 预期输出值: "✨hello world✨"