Day16-Class

前言

昨日我们学习了原型与建构子函式，但这样其实有点不够直觉，尤其是对於有接触过其它物件导向程序的朋友们。

於是在ES6(2015) Class出现，让我们能更好的用JavaScript使用物件导向的概念!!!

Class

在学习类别之前，我们要先了解以下的关键字作用於何处。

• class 定义类别名称
• extends继承类别
• constructor属性
• super继承属性

我们先建立一个User的类别

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

const Ian = new User('Ian')
console.log(Ian);

你说怎麽又有prototype了!?

没错拉，其实Class就是基於原形的syntax sugar(语法糖)。

让我们能够更直觉的使用物件导向的概念，但本质还是使用原形去建构出来的欧!!!

我们让User一样有sayHi的功能

class User{
  constructor(name){
    this.name = name
  }
  sayHi() {
    console.log(this.name)
  }
}

const Ian = new User('Ian')
Ian.sayHi() //Ian

带入参数的sayHi

class User{
  constructor(name){
    this.name = name
  }
  sayHi(parameter) {
    console.log(this.name + ' ' + parameter )
  }
}

const Ian = new User('Ian')
Ian.sayHi('Hi')

Extends

继承是一个非常重要的物件导向概念。

举个例子: 车辆是一个类别的最上层，而凡是车辆都会有轮胎、引擎、方向盘。

於是基於车辆类别我们可以延伸出休旅车、轿车等等。

上述例子就是利用继承车辆的类别、属性来达到避免撰写重复的程序。

那我们接下来就实现这个抽象化的概念!

首先，我们建立一个Car的类别

class Car{
  constructor(engine, tire) {
    this.engine = engine,
    this.tire = tire
  }
}

我们要来建立一个sedan(轿车)，它的牌子是Audi。

我们会使用到

• extends 继承类别
• super 继承属性

class Car{
  constructor(engine, tire) {
    this.engine = engine,
    this.tire = tire
  }
}

class Sedan extends Car{
  constructor(engine, tire, brand){
    this.brand = brand
    super(engine,tire)
  }
}

const A4 = new Sedan('V6', 'Pirelli', 'Audi')
console.log(A4);

奇怪? 为什麽报错了呢??

原来是super要放在最前面

class Car{
  constructor(engine, tire) {
    this.engine = engine,
    this.tire = tire
  }
}

class Sedan extends Car{
  constructor(engine, tire, brand){    
    super(engine,tire)
    this.brand = brand
  }
}

const A4 = new Sedan('V6', 'Pirelli', 'Audi')
console.log(A4);

• super()会自动帮我们继承this.属性 = 属性

class Sedan extends Car{
  constructor(engine, tire, brand){    
    super(engine,tire)
    this.engine = engine
    this.tire = tire
    this.brand = brand
  }
}

所以我们可以省略

class Sedan extends Car{
  constructor(engine, tire, brand){    
    super(engine,tire)
    this.brand = brand
  }
}

Static

• 只作用於类别

class Car{
  constructor(engine, tire) {
    this.engine = engine,
    this.tire = tire
  }
  static start(){
    console.log('started');
  }
}

建立一个实体,并且使用start方法

const a = new Car('V8', 'Bridgestone')
a.start() //error type

这边结果报错

Car.start() //started

因为我们加了static也等於只属於这个类别，所以实体是无法使用的，把static移除，即可在建立实体之後使用!!!

A4.start() //started

对於类别剩下的不会着墨太多，毕竟剩下的API其实去看MDN会更清楚明了!!!