你须要知道的 JavaScript 类(class)的这些知识

时间  2019-12-28
标签 须要 知道 javascript class 这些 知识 栏目 JavaScript 繁體版
原文   原文链接
做者： Dmitri Pavlutin
译者：前端小智
来源：dmitripavlutin
点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。javascript

JavaScript 使用原型继承:每一个对象都从原型对象继承属性和方法。前端

在Java或Swift等语言中使用的传统类做为建立对象的蓝图，在 JavaScript 中不存在，原型继承仅处理对象。java

原型继承能够模拟经典类继承。为了将传统的类引入JavaScript, ES2015 标准引入了class语法，其底层实现仍是基于原型，只是原型继承的语法糖。git

这篇文章主要让你熟悉 JavaScript 类:如何定义类，初始化实例，定义字段和方法，理解私有和公共字段，掌握静态字段和方法。github

1. 定义:类关键字

使用关键字class能够在 JS 中定义了一个类：面试

class User {
  // 类的主体
}

上面的代码定义了一个User类。 大括号{}里面是类的主体。 此语法称为class 声明。segmentfault

若是在定义类时没有指定类名。能够经过使用类表达式，将类分配给变量：数据结构

const UserClass = class {
  // 类的主体
}

还能够轻松地将类导出为 ES6 模块的一部分，默认导出语法以下：ide

export default class User {
  // 主体
}

命名导出以下：函数

export class User {
  // 主体
}

当咱们建立类的实例时，该类将变得很是有用。实例是包含类所描述的数据和行为的对象。

使用new运算符实例化该类，语法：instance = new Class()。

例如，可使用new操做符实例化User类：

const myUser = new User();

new User()建立User类的一个实例。

2. 初始化:constructor()

constructor(param1, param2, ...)是用于初始化实例的类主体中的一种特殊方法。 在这里能够设置字段的初始值或进行任何类型的对象设置。

在下面的示例中，构造函数设置字段name的初始值

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

User的构造函数有一个参数 name，用于设置字段this.name的初始值

在构造函数中，this 值等于新建立的实例。用于实例化类的参数成为构造函数的参数：

class User {
  constructor(name) {
    name; // => '前端小智'
    this.name = name;
  }
}

const user = new User('前端小智');

构造函数中的name参数的值为'前端小智'。若是没有定义该类的构造函数，则会建立一个默认的构造函数。默认的构造函数是一个空函数，它不修改实例。

同时，一个JavaScript 类最多能够有一个构造函数。

3.字段

类字段是保存信息的变量，字段能够附加到两个实体：

  1. 类实例上的字段
  2. 类自己的字段(也称为静态字段)

字段有两种级别可访问性：

  1. public:该字段能够在任何地方访问
  2. private:字段只能在类的主体中访问

3.1 公共实例字段

让咱们再次看看前面的代码片断:

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

表达式this.name = name建立一个实例字段名，并为其分配一个初始值。而后，可使用属性访问器访问name字段

const user = new User('前端小智');
user.name; // => '前端小智'

name是一个公共字段，由于你能够在User类主体以外访问它。

当字段在构造函数中隐式建立时，就像前面的场景同样，可能获取全部字段。必须从构造函数的代码中破译它们。

class fields proposal 提案容许咱们在类的主体中定义字段，而且能够当即指定初始值：

class SomeClass {
  field1;
  field2 = 'Initial value';

  // ...
}

接着咱们修改User类并声明一个公共字段name：

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

const user = new User('前端小智');
user.name; // => '前端小智'

name;在类的主体中声明一个公共字段name。

以这种方式声明的公共字段具备表现力：快速查看字段声明就足以了解类的数据结构，并且，类字段能够在声明时当即初始化。

class User {
  name = '无名氏'

  constructor () {
  }
}

const user = new User();
user.name; // '无名氏'

类体内的name ='无名氏'声明一个字段名称，并使用值'无名氏'对其进行初始化。

对公共字段的访问或更新没有限制。能够读取构造函数、方法和类外部的公共字段并将其赋值。

3.2 私有实例字段

封装是一个重要的概念，它容许咱们隐藏类的内部细节。使用封装类只依赖类提供的公共接口，而不耦合类的实现细节。

当实现细节改变时，考虑到封装而组织的类更容易更新。

隐藏对象内部数据的一种好方法是使用私有字段。这些字段只能在它们所属的类中读取和更改。类的外部世界不能直接更改私有字段。

私有字段只能在类的主体中访问。

在字段名前面加上特殊的符号#使其成为私有的，例如#myField。每次处理字段时都必须保留前缀#声明它、读取它或修改它。

确保在实例初始化时能够一次设置字段#name：

class User {
  #name;
  
  constructor (name) {
    this.#name = name;
  }
 
  getName() {
    return this.#name;
  }
}

const user = new User('前端小智')
user.getName() // => '前端小智'

user.#name  // 抛出语法错误

#name是一个私有字段。能够在User内访问和修改#name。方法getName()能够访问私有字段#name。

可是，若是咱们试图在 User 主体以外访问私有字段#name，则会抛出一个语法错误:SyntaxError: Private field '#name' must be declared in an enclosing class。

3.3 公共静态字段

咱们还能够在类自己上定义字段:静态字段。这有助于定义类常量或存储特定于该类的信息。

要在 JavaScript 类中建立静态字段，请使用特殊的关键字static后面跟字段名:static myStaticField

让咱们添加一个表示用户类型的新字段type:admin或regular。静态字TYPE_ADMIN和TYPE_REGULAR是区分用户类型的常量:

class User {
  static TYPE_ADMIN = 'admin';
  static TYPE_REGULAR = 'regular';

  name;
  type;

  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}

const admin = new User('前端小智', User.TYPE_ADMIN);
admin.type === User.TYPE_ADMIN; // => true

static TYPE_ADMIN和static TYPE_REGULAR在User类内部定义了静态变量。 要访问静态字段，必须使用后跟字段名称的类：User.TYPE_ADMIN和User.TYPE_REGULAR。

3.4 私有静态字段

有时，咱们也想隐藏静态字段的实现细节，在时候，就能够将静态字段设为私有。

要使静态字段成为私有的，只要字段名前面加上#符号:static #myPrivateStaticField。

假设咱们但愿限制User类的实例数量。要隐藏实例限制的详细信息，能够建立私有静态字段：

class User {
  static #MAX_INSTANCES = 2;
  static #instances = 0;
  
  name;

  constructor(name) {
    User.#instances++;
    if (User.#instances > User.#MAX_INSTANCES) {
      throw new Error('Unable to create User instance');
    }
    this.name = name;
  }
}

new User('张三');
new User('李四');
new User('王五'); // throws Error

静态字段User.#MAX_INSTANCES设置容许的最大实例数，而User.#instances静态字段则计算实际的实例数。

这些私有静态字段只能在User类中访问，类的外部都不会干扰限制机制：这就是封装的好处。

4.方法

字段保存数据，可是修改数据的能力是由属于类的一部分的特殊功能实现的：方法。

JavaScript 类同时支持实例和静态方法。

4.1 实例方法

实例方法能够访问和修改实例数据。实例方法能够调用其余实例方法，也能够调用任何静态方法。

例如，定义一个方法getName()，它返回User类中的name ：

class User {
  name = '无名氏';

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

  getName() {
    return this.name;
  }
}

const user = new User('前端小智');
user.getName(); // => '前端小智'

getName() { ... }是User类中的一个方法，getname()是一个方法调用:它执行方法并返回计算值(若是存在的话)。

在类方法和构造函数中，this值等于类实例。使用this来访问实例数据:this.field 或者调用其余方法:this.method()。

接着咱们添加一个具备一个参数并调用另外一种方法的新方法名称nameContains(str)：

class User {
  name;

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

  getName() {
    return this.name;
  }

  nameContains(str) {
    return this.getName().includes(str);
  }
}

const user = new User('前端小智');
user.nameContains('前端');   // => true
user.nameContains('大冶'); // => false

nameContains(str) { ... }是User类的一种方法，它接受一个参数str。 不只如此，它还执行实例this.getName()的方法来获取用户名。

方法也能够是私有的。 为了使方法私有前缀，名称以＃开头便可，以下所示：

class User {
  #name;

  constructor(name) {
    this.#name = name;
  }

  #getName() {
    return this.#name;
  }

  nameContains(str) {
    return this.#getName().includes(str);
  }
}

const user = new User('前端小智');
user.nameContains('前端');   // => true
user.nameContains('大冶'); // => false

user.#getName(); // SyntaxError is thrown

#getName()是一个私有方法。在方法nameContains(str)中，能够这样调用一个私有方法:this.#getName()。

因为是私有的，#getName()不能在用User 类主体以外调用。

4.2 getters 和 setters

getter和setter模仿常规字段，可是对如何访问和更改字段具备更多控制。在尝试获取字段值时执行getter，而在尝试设置值时使用setter。

为了确保User的name属性不能为空，咱们将私有字段#nameValue封装在getter和setter中:

class User {
  #nameValue;

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

  get name() {
    return this.#nameValue;
  }

  set name(name) {
    if (name === '') {
      throw new Error(`name field of User cannot be empty`);
    }
    this.#nameValue = name;
  }
}

const user = new User('前端小智');
user.name; // getter 被调用, => '前端小智'
user.name = '王大冶'; // setter 被调用

user.name = ''; // setter 抛出一个错误

get name() {...} 在访问user.name会被执行。而set name(name){…}在字段更新(user.name = '前端小智')时执行。若是新值是空字符串，setter将抛出错误。

4.3 静态方法

静态方法是直接附加到类的函数，它们持有与类相关的逻辑，而不是类的实例。

要建立一个静态方法，请使用特殊的关键字static和一个常规的方法语法:static myStaticMethod() { ... }。

使用静态方法时，有两个简单的规则须要记住：

  1. 静态方法能够访问静态字段。
  2. 静态方法不能访问实例字段。

例如，建立一个静态方法来检测是否已经使用了具备特定名称的用户。

class User {
  static #takenNames = [];

  static isNameTaken(name) {
    return User.#takenNames.includes(name);
  }

  name = '无名氏';

  constructor(name) {
    this.name = name;
    User.#takenNames.push(name);
  }
}

const user = new User('前端小智');

User.isNameTaken('前端小智');   // => true
User.isNameTaken('王大冶'); // => false

isNameTaken()是一个使用静态私有字段User的静态方法用于检查已取的名字。

静态方法能够是私有的:static #staticFunction() {...}。一样，它们遵循私有规则:只能在类主体中调用私有静态方法。

5. 继承: extends

JavaScript 中的类使用extends关键字支持单继承。
在class Child extends Parent { }表达式中，Child类从Parent继承构造函数，字段和方法。

例如，咱们建立一个新的子类ContentWriter来继承父类User。

class User {
  name;

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

  getName() {
    return this.name;
  }
}

class ContentWriter extends User {
  posts = [];
}

const writer = new ContentWriter('John Smith');

writer.name;      // => 'John Smith'
writer.getName(); // => 'John Smith'
writer.posts;     // => []

ContentWriter继承了User的构造函数，方法getName()和字段name。一样，ContentWriter类声明了一个新的字段posts。

注意，父类的私有成员不会被子类继承。

5.1 父构造函数：constructor()中的super()

若是但愿在子类中调用父构造函数，则须要使用子构造函数中可用的super()特殊函数。

例如，让ContentWriter构造函数调用User的父构造函数，以及初始化posts字段

class User {
  name;

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

  getName() {
    return this.name;
  }
}

class ContentWriter extends User {
  posts = [];

  constructor(name, posts) {
    super(name);
    this.posts = posts;
  }
}

const writer = new ContentWriter('前端小智', ['Why I like JS']);
writer.name; // => '前端小智'
writer.posts // => ['Why I like JS']

子类ContentWriter中的super(name)执行父类User的构造函数。

注意，在使用this关键字以前，必须在子构造函数中执行super()。调用super()确保父构造函数初始化实例。

class Child extends Parent {
  constructor(value1, value2) {
    //没法工做
    this.prop2 = value2;
    super(value1);
  }
}

5.2 父实例:方法中的super

若是但愿在子方法中访问父方法，可使用特殊的快捷方式super。

class User {
  name;

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

  getName() {
    return this.name;
  }
}

class ContentWriter extends User {
  posts = [];

  constructor(name, posts) {
    super(name);
    this.posts = posts;
  }

  getName() {
    const name = super.getName();
    if (name === '') {
      return '无名氏';
    }
    return name;
  }
}

const writer = new ContentWriter('前端小智', ['Why I like JS']);
writer.getName(); // => '无名氏'

子类ContentWriter的getName()直接从父类User访问方法super.getName()，这个特性称为方法重写。

注意，也能够在静态方法中使用super来访问父类的静态方法。

6.对象类型检查：instanceof

object instanceof Class是肯定object 是否为Class实例的运算符，来看看示例：

class User {
  name;

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

  getName() {
    return this.name;
  }
}

const user = new User('前端小智');
const obj = {};

user instanceof User; // => true
obj instanceof User; // => false

user是User类的一个实例，user instanceof User的计算结果为true。

空对象{}不是User的实例，相应地obj instanceof User为false。

instanceof是多态的:操做符检测做为父类实例的子类。

class User {
  name;

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

  getName() {
    return this.name;
  }
}

class ContentWriter extends User {
  posts = [];

  constructor(name, posts) {
    super(name);
    this.posts = posts;
  }
}

const writer = new ContentWriter('前端小智', ['Why I like JS']);

writer instanceof ContentWriter; // => true
writer instanceof User;          // => true

writer是子类ContentWriter的一个实例。运算符writer instanceof ContentWriter的计算结果为true。

同时ContentWriter是User的子类。所以writer instanceof User结果也为true。

若是想肯定实例的确切类，该怎么办?可使用构造函数属性并直接与类进行比较

writer.constructor === ContentWriter; // => true
writer.constructor === User;          // => false

7. 类和原型

必须说 JS 中的类语法在从原型继承中抽象方面作得很好。可是，类是在原型继承的基础上构建的。每一个类都是一个函数，并在做为构造函数调用时建立一个实例。

如下两个代码段是等价的。

类版本：

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

  getName() {
    return this.name;
  }
}

const user = new User('前端小智');

user.getName();       // => '前端小智'
user instanceof User; // => true

使用原型的版本：

function User(name) {
  this.name = name;
}

User.prototype.getName = function() {
  return this.name;
}

const user = new User('前端小智');

user.getName();       // => '前端小智'
user instanceof User; // => true

若是你熟悉Java或Swift语言的经典继承机制，则能够更轻松地使用类语法。

8. 类的可用性

这篇文章中的类的一些特性有些还在分布第三阶段的提案中。在2019年末，类的特性分为如下两部分：

9. 总结

JavaScript 类用构造函数初始化实例，定义字段和方法。甚至可使用static关键字在类自己上附加字段和方法。

继承是使用extends关键字实现的:能够轻松地从父类建立子类，super关键字用于从子类访问父类。

要利用封装，将字段和方法设为私有以隐藏类的内部细节，私有字段和方法名必须以#开头。

你对使用#前缀私有属性有何见解，欢迎留言讨论？

原文：https://dmitripavlutin.com/ja...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。

clipboard.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程