关于js中function和class的内在关系及区别的理解

在js中，从es6开始引进class，根本上是基于js中已经存在的原型继承的语法糖，class语法并没有引进一种新的面向对象的继承机制。

一、定义class

　　class事实上是一种特殊的funcion，就像可以定义funcion表达式和funcion声明一样，class语法也有2种形式：class表达式和class声明。

　　1、class声明

　　定义一个class，可以使用class关键字加上类名。需要注意的是，funcion声明和class声明有一个重要的却别：funcion声明是hosting（状态提升）的，而class不是，class需要先声明再使用。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

　　2、class表达式

　　class表达式类名可选，已经命名的class可以通过实例的'.name'属性获取，依据class自身的命名。

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"

 

二、class中body和method的定义

　　class的body部分包含在花括号{}中，这里是定义class成员的地方，比如constructor和method。

　　1、constructor

　　constructor方法是一个特殊的方法，用来创建并初始化一个对象。在一个class中只能有一个命名为constructor的特殊方法，如果包含多个将会报错。

　　constructor中可以通过super关键字，调用父类的constructor方法。

　　2、prototype methods（原型方法）

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

　　3、static methods（静态方法）

　　通过static关键字为一个class创建静态方法，static methods的调用无需对class实例化，也不能被实例对象所调用。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
　　　　
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2)); // 7.0710678118654755

　　4、static和prototype method的封装

　　当static或prototype method被调用的时候，如果没有对this赋值，那么this将是undefine状态。这和是否采用static模式无关，因为class类体中的代码已经默认执行static模式。

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

　　如果以上代码是基于传统的function的语法，则this值是global object。

三、extends创建子类

　　extends关键字用于在class声明或表达式中，创建另一个class的子类。

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

　　如果在子类中有constructor方法，在使用"this"之前需要调用super()。也可以继承自function-based的class。

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

Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

　　需要注意的是：class不能继承自常规对象（non-constructible），如果想继承自常规对象，可以使用Object.setPrototypeOf()替代。

const Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

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

// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);

let d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

四、super关键字调用父类

　　关键字super用于调用父类相应的方法，这是相较于原型继承的一个好处。

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(`${this.name} roars.`);
  }
}

let l = new Lion('Fuzzy');
l.speak(); 
// Fuzzy makes a noise.
// Fuzzy roars.