JavaScript类

JavaScript 类

ES5 创建类：

function Plane(numEngines) {
  this.numEngines = numEngines;
  this.enginesActive = false;
}

// 由所有实例 "继承" 的方法
Plane.prototype.startEngines = function () {
  console.log("starting engines...");
  this.enginesActive = true;
};

ES6 类

ES6 给 JavaScript 带来了类 class 的概念和实现，实际上是对传统实现方式的一种包装，通过关键字 class 来定义类，通过 extends 来实现继承，子类的 super 是父类的引用，在继承中起着十分重要的作用。
实际上，JavaScript 的类 class 本质上也是基于原型 prototype 的实现方式做了进一步的封装，让我们使用起来更简单明了。也就是说它实际上也是函数 function 和原型 prototype 实现。

基本用法

// 定义一个叫Animal的类
class Animal {
  // 构造函数constructor
  constructor(color) {
    this.color = color;
  }
}

通过关键字 class 来声明一个名字叫 Animal 的类，可以看到类里面（花括号 {}里面）有一个叫 constructor 方法，它就是构造方法，构造方法里面的 this，指向的是该类实例化后的对象，这就是实现了一个类的声明。
构造方法 constructor 是一个类必须要有的方法，默认返回实例对象；创建类的实例对象的时候，会调用此方法来初始化实例对象。如果你没有编写 constructor 方法，执行的时候也会被加上一个默认的空的 constructor 方法。

类的属性和方法

class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 自定义方法getName
  getName() {
    return this.name;
  }
}

我们把类名后面的括号{ }里面的内容称之为类体，我们会在类体内来编写类的属性和方法。上面的案例中，类体内有 2 个方法：constructor( )、getName()。
其中 constructor 方法是构造方法，在实例化一个类的时候被调用。constructor 方法是必须的，也是唯一的，一个类体不能含有多个 constructor 构造方法。我们可以在方法里面自定义一些对象的属性，比如案例中的 name 属性。
此外，我们还自定义了一个 getName( )方法，它属于类的实例方法，实例化后对象可以调用此方法。

类的实例对象

class Animal{
  // 构造方法
  constructor(name){
    // 属性name
    this.name = name;
  }

  // 自定义方法getName
  getName(){
    return `This is a ${name}`;
  }

  // 创建一个Animal实例对象dog
  let dog = new Animal('dog');
  dog.name; //结果：dog
  dog.getName(); //结果：This is a dog
}

还是同一个类 Animal，我们通过 new 来创建了实例对象 dog，构造方法会把传进去的参数“dog”通过 this.name 赋值给对象的 name 属性，所以 dog 的 name 属性为“dog”，对象 dog 还可以调用自己的实例方法 getName( )，结果返回：“This is a dog”。
实例对象的创建有几个要注意的事项
1. 必须使用 new 创建字来创建类的实例对象
2. 先声明定义类，再创建实例，否则会报错

类的静态方法

上面讲到的自定义方法是实例方法，也就是实例化后的对象才可以调用的方法，比如上述案例的 getName( )方法。除了实例方法以外，我们还可以定义一种直接使用类名即可访问的方法，我们称之为“静态方法”。
要添加静态方法，在方法名称前面加上关键字 static

class Animal{
  // 构造方法
  constructor(name){
    // 属性name
    this.name = name;
  }

  // 自定义一个静态方法
  static friends(a1,a2){
    return `${a1.name} and ${a2.name} are friends`;
  }

  // 创建2个实例
  let dog = new Animal('dog');
  let cat = new Animal('cat');

  // 调用静态方法friends
  Animal.friends(dog,cat); // dog and cat are friends
}

静态方法和实例方法不同的是：静态方法的定义需要使用 static 关键字来标识，而实例方法不需要；此外，静态方法通过类名来的调用，而实例方法通过实例对象来调用。

类的继承

ES6 使用 extends 关键字来实现子类继承父类

// 父类Animal
class Animal{...}

// 子类Dog
class Dog extends Animal{
  // 构造方法
  constructor(name,color){
    super(name);
    this.color = color;
  }
}

上面的案例中，我们定义两个类，Animal 类作为父类，Dog 类作为子类，然后通过关键字 extends 来实现继承，此外，我们还注意到一个关键字 super，它相当于是父类中的 this。

我们可以用 super 来引用父类，访问父类的方法

// 父类Animal
class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 父类的自定义方法
  say() {
    return `This is a animal`;
  }
}

// 子类Dog
class Dog extends Animal {
  // 构造方法
  constructor(name, color) {
    super(name);
    this.color = color;
  }

  // 字类的实例方法
  getAttribute() {
    return `${super.say()},
            name: ${this.name},
            color:${this.color}`;
  }
}

// 创建Dog的实例对象
let d = new Dog("dog", "black");

// 调用子类的Dog的实例方法
d.getAttribute();
/* This is a animal,
        name:dog,
        color:black */

在父类中，我们定义了 say 方法，想要在子类中调用父类的 say 方法的话，我们使用 super.say( )即可实现。
使用 super 有几个要注意的事项
1. 子类必须在 constructor 方法中调用 super 方法
2. 必须先调用 super( )，才可以使用 this，否则报错

ES6 的 class 和构造函数的区别

严格模式
类和模块的内部，默认就是严格模式，所以不需要使用 use strict 指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
不存在提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
方法默认是不可枚举的
ES6 中的 class，它的方法（包括静态方法和实例方法）默认是不可枚举的，而构造函数默认是可枚举的。细想一下，这其实是个优化，让你在遍历时候，不需要再判断 hasOwnProperty 了
class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
class 必须使用 new 调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用 new 也可以执行。
ES5 和 ES6 子类 this 生成顺序不同
ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例。ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。
ES6 可以继承静态方法，而构造函数不能

开发

#js #es6

弹性布局flex 上一篇

ES6新特性下一篇