Comment utiliser JS et TypeScript

Cette fois, je vais vous montrer comment utiliser JS et TypeScript, et quelles sont les précautions d'utilisation de JS et TypeScript. Voici des cas pratiques, jetons un coup d'œil.

Avant-propos

Pour un développeur front-end, les classes sont rarement utilisées car il y en a plus en JavaScript La plupart des ce sont des programmations fonctionnelles. Lorsque vous levez la main, il y a une fonction, et il n'y a presque aucune trace de classe ou de nouveauté. Par conséquent, le Design Pattern est également une lacune de la plupart des développeurs front-end.

Dans le processus d'apprentissage d'Angular récemment, j'ai découvert qu'il utilise beaucoup de cours. Je dois l'admirer. Angular est en effet un excellent framework qui mérite une étude approfondie.

Cet article présentera brièvement les cours en JavaScript et TypeScript.

Concepts de base

Avant d'introduire le cours, certains concepts de base doivent être introduits en premier.

1. Membres statiques

Les membres de la classe elle-même peuvent être hérités, mais les instances ne sont pas accessibles. On les trouve généralement dans les classes d'outils, comme le $.ajax le plus courant dans jQuery. À l'époque, ajax vaut $ La méthode statique est facile à utiliser et il n'est pas nécessaire d'obtenir une nouvelle instance via un nouvel appel de fonction.

2. Membres privés

Généralement, les membres d'une classe ne peuvent pas être hérités et ne peuvent être utilisés qu'en interne. Les instances ne sont pas accessibles. Elles sont un peu comme des variables à l'intérieur d'une fermeture, mais elles le sont. toujours certain. La différence est qu'actuellement, JavaScript ne peut pas définir directement les membres privés et ne peut aider à la mise en œuvre que par d'autres méthodes.

3. Getter/setter

Attributs d'accesseur Lorsque nous accédons ou modifions les attributs d'une instance, nous pouvons intercepter ces deux opérations via les attributs d'accesseur pour en faire d'autres. cette API pour suivre les modifications des données.

4. Les membres de l'instance

font référence aux membres de l'instance créée par new, qui peuvent être hérités. Cette fonctionnalité permet également la réutilisation du code.

5. Classe abstraite, méthode abstraite

La classe abstraite fait référence à une classe qui ne peut pas être instanciée. Son appel via le mot-clé new signalera une erreur.

La méthode abstraite fournit uniquement le nom, les paramètres et la valeur de retour de la méthode, et n'est pas responsable de l'implémentation. L'implémentation spécifique est complétée par la sous-classe. Si une sous-classe hérite d'une classe abstraite, alors la sous-classe doit. implémentez la classe parent Toutes les méthodes abstraites, sinon une erreur sera signalée.

Ces deux concepts ne peuvent pas être directement implémentés en JavaScript, mais ils peuvent être facilement implémentés en TypeScript ou dans d'autres langages orientés objet De plus, cette fonctionnalité est également un moyen important d'y parvenir. polymorphisme.

Introduction au cas

Afin de mieux présenter les classes, cet article utilisera trois classes comme exemples, à savoir Personne, Chinois, Américain. Vous pouvez rapidement le savoir grâce au littéral : Person est la classe parent (classe de base), le chinois et l'américain sont des sous-classes (classes dérivées).

Person a trois attributs : nom, âge, sexe, méthode sayHello et attribut accesseur fullName. En même temps, Person a également des membres statiques et des membres privés. Puisqu'il est trop difficile de penser à des exemples, utilisons plutôt foo, bar, x, y, z.

En tant que sous-classes, les chinois et les américains héritent des membres d'instance et des membres statiques de Person. En même temps, ils ont aussi des méthodes et des attributs qui leur sont propres :

Le chinois a l'attribut kungfu et peut pratiquer les arts martiaux.

L'Américain a Twitter et peut également envoyer Twitter.

Ensuite, nous utiliserons JavaScript et TypeScript pour implémenter ce cas.

classe en JavaScript

classe en JavaScript doit être discutée séparément. Deux mots-clés, class et extends, sont fournis dans ES6. juste du sucre syntaxique, et la couche inférieure utilise toujours un prototype pour implémenter l'héritage, mais on ne peut nier que cette méthode d'écriture rend le code plus clair et plus facile à lire.

Cours en 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('推特治国'); // 特朗普 : 推特治国

Cours avant ES6

L'essence de l'héritage dans ES5 consiste à créer d'abord l'objet instance de la sous-classe,

然后再将父类的方法添加到 this 上面 Parent.apply(this) 。

ES6 的继承机制完全不同，实质是先创造父类的实例对象 this，所以必须先调用 super 方法，

然后再用子类的构造函数修改this。

为了实现继承，我们需要先实现一个 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中文网其它相关文章！

推荐阅读：

怎样操作vue2.0 移动端实现下拉刷新和上拉加载

怎样使用vue计算属性与方法侦听器

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!