重温JavaScript(lesson15):面向对象(7)

大家好，我们一起重温JavaScript。上一次我们通过几道面试题对之前学过的部分内容进行了回顾，这次我们正式地进入到ES6面向对象有关内容的学习。

ES6引入了新的关键字class, 可以让我们以更加优雅的方式创建对象和实现继承，但是其底层实现仍然是基于原型的，它本身只是语法糖，使得JS模拟类的代码更加简洁，下面我们详细学习。

一，使用class关键字创建类

我们看代码：

class Person{
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
let person1 = new Person('New_Name');
person1.sayName();
//New_Name

如上代码中，我们使用了ES6的class关键字创建了Person类，在类中创建构造函数，使用类创建实例person1的时候就会调用该构造函数。在构造函数的函数体中，我们可以使用this来访问创建的实例，并且可以为其添加属性或者给属性赋予初始值。在类中，还可以定义所有实例对象都可以访问的方法，本例中我们定义了一个sayName方法。接着通过new关键字创建了Person实例，并且调用了sayName方法。

注意：以上是声明式定义类的语法，当然也可以使用表达式的形式。如下代码所示：

let PersonClass = class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name)
  }
};

let person = new PersonClass("Nicholas");
person.sayName();//Nicholas

以上展示了如何定义了所有实例对象都可以访问的对象方法（原型方法）。除了对象方法之外，还有静态方法。

二，静态方法

我们看代码：

class Person{
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  sayName() {
    console.log(this.name);
  }
  static compare(obj1, obj2) {
    return obj1.age - obj2.age;
  }
}
let person1 = new Person('New_Name',18);
let person2 = new Person('重温新知',1);
let res = Person.compare(person1, person2);
console.log(res);
//17
console.log('compare' in person1);
//false
console.log('compare' in person2);
//false
console.log('compare' in Person);
//true

如上代码中，使用static关键字定义了静态方法，两个实例person1和person2均可以访问实例方法但是都不能访问静态方法，可以使用类名直接访问静态访问。

注意：在静态方法中this绑定的是类本身。看代码：

let PersonClass = class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name)
  }
  static sayAge(){
    console.log(this);
    console.log(this.age)
  }
};
PersonClass.age = 0;
PersonClass.sayAge();

sayAge方法的执行效果如下图所示：

三，使用class关键字使用继承

我们之前见到的实现继承的方法基本上都是借助于原型实现的，规则和细节都比较多。但是有了ES6以后，就非常简洁了，我们看代码：

class Person{
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
class PersonWithAge extends Person {
  constructor(name,age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    console.log(this.age)
  }
}
let person = new  Person('nobody');
person.sayName();
//nobody
let person1 = new PersonWithAge('New_Name',18);
person1.sayAge();
//18
let person2 = new PersonWithAge('重温新知',1);
person2.sayName();
//重温新知
person2.sayAge();
//1

如上代码所示，我们使用extends关键字从一个类实现继承。定义了Person类，它的构造函数中为每一个实例对象添加了name属性，同时定义了sayName方法。接着从Person类继承而来的PersonWithAge类，在其上添加了age属性和sayAge方法。在它的构造函数中通过super调用了基类的构造函数。通过ES6的方式实现继承不用考虑什么原型什么副作用，所以简洁很多。

需要注意：如果在派生类中指定了构造函数必须调用super，如果不这样，程序就会报错。构造函数中访问this之前一定要调用super()，它负责初始化this，如果在调用super之前访问this会报错。

四，多态

多态是面向对象的一个术语，是指一个实例不仅是它自身类的实例，也是它任何父类的实例。多态是面向对象编程中一个很特殊的特性。我们看例子：

class Person{
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
class PersonWithAge extends Person {
  constructor(name,age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    console.log(this.age)
  }
}
let person1 = new PersonWithAge('New_Name',18);
console.log(person1 instanceof Person);
//true
console.log(person1 instanceof PersonWithAge);
//true

继承描述了一种IS-A的关系，person1 一定是一个Person实例，多态也说明了这种IS-A的关系。

我们这次的分享就到这里，下次再会。如有错误，请不吝指正。温故而知新，欢迎和我一起重温旧知识，攀登新台阶~