【Javascript】ES6新增之类的认识

且陶陶

发布于 2023-10-16 09:57:56

1530

发布于 2023-10-16 09:57:56

文章被收录于专栏：Triciaの小世界Triciaの小世界

在现代编程语言中，类是面向对象编程范式中的核心概念之一。与函数类似，类本质上是一种特殊的函数，它允许我们将数据和操作封装在一起，以创建具有共同行为和状态的对象。在类的世界里，我们有类表达式和类声明，它们各自具有自己的特性和用途。

类

✨ 类本质上是一种特殊的函数。所以和函数一样，有类表达式和类声明

类声明

与函数不同，类声明不会被提升。这意味着在使用类之前，需要先进行类声明。类声明通常包括构造函数和其他成员方法。构造函数是一个特殊的方法，用于创建和初始化类所创建的对象。

// 类声明
class Rectangle {
  constructor(height, width) {
    this.height = height; // 实例成员
    this.width = width;
  }
}

let p = new Rectangle();

类表达式

类表达式可以命名，也可以不命名
我们可以通过类的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"

类的定义

{}中的部分叫做类体。

类体中会包括：

构造函数

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。
注意⚠️：一个类体中只能有一个constructor方法
使用 super 关键字来调用一个父类的构造函数

原型方法

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

静态方法

static来定义静态方法，只能被类访问

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

  static displayName = "Point";

  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);
const p2 = new Point(10, 10);
p1.displayName;
// undefined
p1.distance;
// undefined

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

getter和setter

类体中遵循严格模式

this指向

类中

类体中的成员方法遵循严格模式。this在类方法中的行为与传统函数有所不同。在调用静态或原型方法时，this默认指向undefined，但在非严格模式下，会自动装箱以保留传入状态。

当被调用时。谁调用，指向谁

class Animal {
// 原型方法
  speak() {
    return this;
  }
// 静态方法
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat(); // class Animal
let eat = Animal.eat;
eat(); // undefined

传统函数中

在非严格模式下调用函数，会发生自动装箱。即如果初始值时undefined，则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

字段声明

公有字段

不需要let, const等关键字
预先声明

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

私有字段

只能在类内部读取，外部无法调用。
私有字段仅能在字段声明中预先定义。

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

extends

我们可以创建一个子类来扩展父类的功能。子类继承了父类的属性和方法，并可以在其基础上进行扩展或重写。

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Son extends Father {
  constructor(name) {
    super(name); // 调用超类构造函数并传入 name 参数
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

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

super

super 关键字用于调用对象的父对象上的函数.

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

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Son extends Father {
  speak() {
    super.speak();
    console.log(this.name + " roars.");
  }
}

| 本文参考：MDN

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript