足够的 JavaScript 知识助您入门：#13 JS 中的 OOP 实用指南👩‍💻👨‍💻

类和对象

👉 总结上一篇文章，类只不过是一个模板或蓝图，它决定了对象在使用不同的道具/方法时的外观和行为。

👉 我们使用 OOP 概念，因为它为我们提供了封装和抽象。

够了！该打开 VS Code 了

👉 开始一个新项目，然后前往app.js

👉 让我们创建一个速度计类

👉 速度计具有速度和类型等属性

👉 车速表将具有增加和减少速度等方法

👉 在app.js

class Speedometer {
  speed = 0;
  type = "km/h";
  constructor(speed, type) {
    this.speed = speed;
    this.type = type;
  }
  increaseSpeed() {
    this.speed += 10;
  }
  decreaseSpeed() {
    this.speed -= 10;
  }
  getInfo() {
    console.log(this.speed);
    console.log(this.type);
  }
}

👉如果我们解码我们的类，则有两种方法可以增加和减少速度计的速度，以及一种向用户显示信息的方法。

👉 构造函数是在创建对象时自动调用的特殊函数。我们用它来初始化对象的初始速度和类型。

👉 到目前为止，类不消耗任何资源，但是当我们创建对象时，它们肯定会占用资源。

👉 请注意，按照惯例，类名始终以 Pascal 大小写书写

👉 注意，我们没有输入var或let甚至function在课堂上指定。我们不需要在课堂上指定

👉 目前（甚至默认情况下）我们还没有指定成员访问说明符，因此我们的方法和道具可以在类内部和外部访问。

制作物体🌚

👉 创建相应类的对象仅仅意味着创建该类的变量。

👉 我们将使用new关键字将资源分配给我们正在创建的新对象。🏠

👉 括号中采用构造函数参数中指定的参数来初始化启动对象😁

👉 在app.js

var speedoMeter = new Speedmeter(0,"km/h");

👉 现在speedoMeter是 Speedometer 类的对象，初始值为speed:0和type : "km/h"

👉speedoMeter现在可以访问道具和方法，例如增加和减少速度

👉继续尝试调用不同的方法

object1.getInfo();
object1.increaseSpeed();
object1.increaseSpeed();
object1.getInfo();
object1.decreaseSpeed();
object1.getInfo();

👉这将在控制台中输出

0
km/h
20
km/h
10
km/h

什么是this？

👉 JavaScript 中的 this 关键字指的是当前正在运行的对象

👉 就像我们正在用 寻址 speedoMeter 对象一样this，因此this指的是现在正在执行的实例。

👉 在 speedoMeter 对象中，我们可以说像this对象有初始speed of 0 and type of "km/h"

👉请注意，如果在课堂上我们想要引用当前运行的对象（在创建类时不存在），我们将使用它this来访问当前运行对象的道具。

👉所以如果我们这样写，this.speed它将引用我们随后创建的 speedoMeter 对象。

使用成员访问说明符

👉'#' 用于使类的任何属性或方法变为私有的。

👉 私有方法或 props 只能在类内部访问

👉 访问类外的私有成员将导致错误

class Speedometer {
  #speed = 0;
  #type = "km/h";

  increaseSpeed() {
    this.#speed += 10;
  }
  #decreaseSpeed() {
    this.#speed -= 10;
  }
  getInfo() {
    console.log(this.#speed);
    console.log(this.#type);
  }
}

👉 请注意，现在如果我们创建 Speedometer 对象，该对象现在只能访问 increaseSpeed() 和 getInfo()，因为其他成员都是私有的

console.log(object1.speed) ❌
console.log(object1.type) ❌
object1.getInfo(); ✅
object1.increaseSpeed(); ✅
object1.increaseSpeed(); ✅
object1.getInfo(); ✅
object1.decreaseSpeed(); ❌
object1.getInfo(); ✅

遗产

👉 继承是指将父类或超类的方法和道具派生到其子类或子类。

👉 继承增加了我们代码的可重用性

👉现在，从动物的角度思考所有动物都有的属性name，color所以我们能做的就是每次在新的动物中指定这些属性，我们可以创建一个具有所有这些属性的父类和一个用于问候目的的问候方法。

👉 语法：class SubClass extends ParentClass就是这样😎 现在我们可以在子类中使用父类的 props 和方法🎉

👉示例

class Animal {
  color;
  name;

  greet() {
    console.log("hey i'm " + this.name);
    console.log("my color is " + this.color);
  }
}

class Dog extends Animal {
  constructor(name, color) {
    super();
    this.name = name;
    this.color = color;
  }
}

var dog = new Dog("tommy", "brown");
dog.greet();

👉输出：

hey i'm tommy
my color is brown

👉 注意，如果我们调用子类的构造函数，则必须调用父类的构造函数，无论构造函数是否带有参数。

👉 使用保留关键字 super 我们可以调用父类的构造函数，如 => super();或super(name,color) [如果构造函数有参数]

👉 看起来有些奇怪？我们在 Dog 类内部和外部使用了color、name和greet()，尽管这些道具和方法未在 Dog 类中声明。

👉 这就是继承的工作原理，简单来说，它将复制子类中的所有公共和受保护的方法和道具，从而实现代码可重用性😀

如果您有任何疑问或反馈，请在评论部分告诉我。花时间在蓬勃发展的开发者社区上总是值得的:)

继续编码❤

嘿，让我们联系吧👋

Twitter / Github