So verwenden Sie Klassen in JS+TypeScript

Dieses Mal zeige ich Ihnen, wie Sie Klassen in JS+TypeScript verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Klassen in JS+TypeScript gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Für einen Front-End-Entwickler werden Klassen selten verwendet, da es bei JavaScript mehr um funktionale Programmierung geht Funktion, und von Klasse oder Neuigkeit ist fast keine Spur mehr. Daher ist das Designmuster auch ein Mangel der meisten Front-End-Entwickler.

Während ich kürzlich Angular lernte, stellte ich fest, dass es viele Klassen verwendet. Angular ist in der Tat ein hervorragendes Framework, das eine eingehende Untersuchung verdient.

In diesem Artikel werden Klassen in JavaScript und TypeScript kurz vorgestellt.

Grundlegende Konzepte

Bevor der Unterricht eingeführt wird, sollten zunächst einige grundlegende Konzepte vorgestellt werden.

1. Statische Mitglieder

Mitglieder der Klasse selbst können vererbt werden, aber auf Instanzen kann nicht zugegriffen werden. Sie sind im Allgemeinen in Tool-Klassen zu finden, wie z. B. der häufigsten $.ajax in jQuery Ära, Ajax ist $ Die statische Methode ist einfach zu verwenden und es ist nicht erforderlich, eine neue Instanz durch einen neuen oder Funktionsaufruf abzurufen.

2. Private Mitglieder

Im Allgemeinen können Mitglieder innerhalb einer Klasse nicht vererbt werden und können nur intern verwendet werden. Auf Instanzen kann nicht zugegriffen werden immer noch sicher. Der Unterschied besteht darin, dass JavaScript derzeit private Mitglieder nicht direkt definieren kann und die Implementierung nur über andere Methoden unterstützen kann.

3. Getter/Setter

Accessor-Attribute Wenn wir auf die Attribute einer Instanz zugreifen oder diese ändern, können wir diese beiden Vorgänge über die Accessor-Attribute abfangen, um einige andere Dinge zu tun, die Vue verwendet Diese API dient zum Verfolgen von Datenänderungen.

4. Instanzmitglieder

bezieht sich auf die von new erstellten Mitglieder, die auch die Wiederverwendung von Code ermöglichen.

5. Abstrakte Klasse, abstrakte Methode

Abstrakte Klasse bezieht sich auf eine Klasse, die nicht über das Schlüsselwort new instanziiert werden kann. Sie ist im Allgemeinen als übergeordnete Klasse konzipiert.

Abstrakte Methode stellt nur den Namen, die Parameter und den Rückgabewert der Methode bereit. Sie ist nicht für die Implementierung verantwortlich. Wenn eine Unterklasse von einer abstrakten Klasse erbt Implementieren Sie alle abstrakten Methoden, andernfalls wird ein Fehler gemeldet.

Beide Konzepte können nicht direkt in JavaScript implementiert werden, sie können jedoch problemlos in TypeScript oder anderen objektorientierten Sprachen implementiert werden. Darüber hinaus ist diese Funktion auch ein wichtiges Mittel, um Polymorphismus zu erreichen.

Falleinführung

Um die Klassen besser einzuführen, werden in diesem Artikel drei Klassen als Beispiele verwendet, nämlich Person, Chinesisch, Amerikaner. Anhand der Wörter können Sie schnell erkennen: Person ist die übergeordnete Klasse (Basisklasse), Chinesisch und Amerikaner sind Unterklassen (abgeleitete Klassen).

Person hat drei Attribute: Name, Alter, Geschlecht, sayHello-Methode und fullName-Accessor-Attribut. Gleichzeitig verfügt Person auch über einige statische und private Mitglieder. Da es zu schwierig ist, sich Beispiele auszudenken, verwenden wir stattdessen foo, bar, x, y, z.

Chinesisch und amerikanisch erben als Unterklassen die Instanzmitglieder und statischen Mitglieder von Person. Gleichzeitig haben sie auch einige eigene Methoden und Attribute:

Chinesen haben das Kung-Fu-Attribut und können Kampfkünste ausüben.

Amerikaner hat Twitter und kann auch Twitter senden.

Als nächstes werden wir JavaScript und TypeScript verwenden, um diesen Fall zu implementieren.

Klasse in JavaScript

Klasse in JavaScript sollte separat besprochen werden, obwohl sie in ES6 bereitgestellt werden nur syntaktischer Zucker, und die unterste Ebene verwendet immer noch Prototypen, um die Vererbung zu implementieren, aber es kann nicht geleugnet werden, dass diese Schreibmethode den Code klarer und leichter lesbar macht.

Klasse in ES6

class Person {
 // #x = '私有属性x';
 // static x = '静态属性x';
 // name;
 // age;
 // gender;
 // 上面的写法还在提案中，并没有成为正式标准，不过变化的可能性已经不大了。
 // 顺便吐槽一下，用 # 表示私有成员，真的是很无语.
 /**
  * Person的静态方法，可以被子类继承
  * 可以通过 this 访问静态成员
  */
 static foo() {
  console.log(`类 ${this.name} 有一个 ${this.x}`);
 }
 constructor(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
 }
 /**
  * 数据存储器，可以访问实例成员，子类的实例可以继承
  * 以通过 this 访问实例成员
  */
 get fullName() {
  const suffix = this.gender === '男' ? '先生' : '女士';
  return this.name + suffix;
 }
 set fullName(value) {
  console.log(`你已改名为 ${value} `);
 }
 /**
  * Person的实例方法，可以被子类的实例继承
  * 可以通过 this 访问实例成员
  */
 sayHello() {
  console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`);
 }
}
Person.x = '静态属性x';

class Chinese extends Person {
 static bar() {
  console.log(`类 ${this.name} 的父类是 ${super.name}`);
  super.foo();
 }
 constructor(name, age, gender, kungfu) {
  super(name, age, gender);
  this.kungfu = kungfu;
 }
 martial() {
  console.log(`${this.name} 正在修炼 ${this.kungfu} `);
 }
}

class American extends Person {
 // static y = '静态属性y';
 static bar() {
  console.log(`类 ${this.name} 有自己的 ${this.y} ，还继承了父类 ${super.name} 的 ${super.x}`);
 }
 constructor(name, age, gender, twitter) {
  super(name, age, gender);
  this.twitter = twitter;
 }
 sendTwitter(msg) {
  console.log(`${this.name} : `);
  console.log(` ${msg}`);
 }
}

American.y = '静态属性y';
Person.x;  // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x
Chinese.x;  // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person
American.x;  // 静态属性x
American.y;  // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ，还继承了父类 Person 的 静态属性x
const p = new Person('Lucy', 20, '女');
const c = new Chinese('韩梅梅', 18, '女', '咏春拳');
const a = new American('特朗普', 72, '男', 'Donald J. Trump');
c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳 
a.sayHello(); // 你好我是 特朗普先生 ,我 72 岁了
a.sendTwitter('推特治国'); // 特朗普 : 推特治国

Klasse vor ES6

Die Vererbung von ES5 erstellt im Wesentlichen das erste Instanzobjekt der Unterklasse.

und fügen Sie dann die Methode der übergeordneten Klasse zu Parent.apply(this) hinzu.

Der Vererbungsmechanismus von ES6 ist völlig anders. Das Wesentliche besteht darin, zuerst das Instanzobjekt this der übergeordneten Klasse zu erstellen, daher muss zuerst die Supermethode

aufgerufen und dann der Konstruktor verwendet werden der Unterklasse, um dies zu ändern.

为了实现继承，我们需要先实现一个 extendsClass 函数，它的作用是让子类继承父类的静态成员和实例成员。

function extendsClass(parent, child) {
 // 防止子类和父类相同名称的成员被父类覆盖
 var flag = false;
 // 继承静态成员
 for (var k in parent) {
  flag = k in child;
  if (!flag) {
   child[k] = parent[k];
  }
 }
 // 继承父类prototype上的成员
 // 用一个新的构造函数切断父类和子类之间的数据共享
 var F = function () { }
 F.prototype = parent.prototype;
 var o = new F();
 for (var k in o) {
  flag = k in child.prototype;
  if (!flag) {
   child.prototype[k] = o[k];
  }
 }
}

function Person(name, age, gender) {
 this.name = name;
 this.age = age;
 this.gender = this.gender;
 // 如果将 getter/setter 写在 prototype 会获取不到
 Object.defineProperty(this, 'fullName', {
  get: function () {
   var suffix = this.gender === '男' ? '先生' : '女士';
   return this.name + suffix;
  },
  set: function () {
   console.log('你已改名为 ' + value + ' ');
  },
 });
}
Person.x = '静态属性x';
Person.foo = function () {
 console.log('类 ' + this.name + ' 有一个 ' + this.x);
}
Person.prototype = {
 constructor: Person,
 // get fullName() { },
 // set fullName(value) { },
 sayHello: function () {
  console.log('你好我是 ' + this.fullName + ' ,我 ' + this.age + ' 了');
 },
};

function Chinese(name, age, gender, kungfu) {
 // 用call改变this指向，实现继承父类的实例属性
 Person.call(this, name, age, gender);
 this.kungfu = kungfu;
}
Chinese.bar = function () {
 console.log('类 ' + this.name + ' 的父类是 ' + Person.name);
 Person.foo();
}
Chinese.prototype = {
 constructor: Chinese,
 martial: function () {
  console.log(this.name + ' 正在修炼 ' + this.kungfu + ' ');
 }
};
extendsClass(Person, Chinese);

function American(name, age, gender, twitter) {
 Person.call(this, name, age, gender);
 this.twitter = twitter;
}
American.y = '静态属性y';
American.bar = function () {
 console.log('类 ' + this.name + ' 有自己的 ' + this.y + ' ，还继承了父类 ' + Person.name + ' 的 ' + Person.x);
}
American.prototype = {
 constructor: American,
 sendTwitter: function (msg) {
  console.log(this.name + ' : ');
  console.log(' ' + msg);
 }
};
extendsClass(Person, American);

TypeScript 中的 class

讲完了 JavaScript 中的类，还是没有用到 抽象类，抽象方法，私有方法这三个概念，由于 JavaScript 语言的局限性，想要实现这三种概念是很困难的，但是在 TypeScript 可以轻松的实现这一特性。

首先我们稍微修改一下例子中的描述，Person 是抽象类，因为一个正常的人肯定是有国籍的，Person 的 sayHello 方法是抽象方法，因为每个国家打招呼的方式不一样。另外一个人的性别是只能读取，不能修改的，且是确定的是，不是男生就是女生，所以还要借助一下枚举。

enum Gender {
 female = 0,
 male = 1
};

abstract class Person {
 private x: string = '私有属性x，子类和实例都无法访问';
 protected y: string = '私有属性y，子类可以访问，实例无法访问';
 name: string;
 public age: number;
 public readonly gender: Gender; // 用关键字 readonly 表明这是一个只读属性
 public static x: string = '静态属性x';
 public static foo() {
  console.log(`类 ${this.name} 有一个 ${this.x}`);
 }
 constructor(name: string, age: number, gender: Gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
 }
 get fullName(): string {
  const suffix = this.gender === 1 ? '先生' : '女士';
  return this.name + suffix;
 }
 set FullName(value: string) {
  console.log(`你已改名为 ${value} `);
 }
 // 抽象方法，具体实现交由子类完成
 abstract sayHello(): void;
}

class Chinese extends Person {
 public kungfu: string;
 public static bar() {
  console.log(`类 ${this.name} 的父类是 ${super.name}`);
  super.foo();
 }
 public constructor(name: string, age: number, gender: Gender, kungfu: string) {
  super(name, age, gender);
  this.kungfu = kungfu;
 }
 public sayHello(): void {
  console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`);
 }
 public martial() {
  console.log(`${this.name} 正在修炼 ${this.kungfu} `);
 }
}

class American extends Person {
 static y = '静态属性y';
 public static bar() {
  console.log(`类 ${this.name} 有自己的 ${this.y} ，还继承了父类 ${super.name} 的 ${super.x}`);
 }
 public twitter: string;
 public constructor(name: string, age: number, gender: Gender, twitter: string) {
  super(name, age, gender);
  this.twitter = twitter;
 }
 public sayHello(): void {
  console.log(`Hello, I am ${this.fullName} , I'm ${this.age} years old`);
 }
 public sendTwitter(msg: string): void {
  console.log(`${this.name} : `);
  console.log(` ${msg}`);
 }
}

Person.x;  // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x
Chinese.x;  // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person
American.x;  // 静态属性x
American.y;  // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ，还继承了父类 Person 的 静态属性x
const c: Chinese = new Chinese('韩梅梅', 18, Gender.female, '咏春拳');
const a: American = new American('特朗普', 72, Gender.male, 'Donald J. Trump');
c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳 
a.sayHello(); // Hello, I am 特朗普先生 , I'm 72 years old
a.sendTwitter('推特治国'); // 特朗普 : 推特治国

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

从零开始使用vue-devtools

vue计算属性与侦听器实战项目详解

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Klassen in JS+TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!