关于javascript:ES6之清楚明白的使用类class

定义

类是构造函数、原型链的语法糖。

定义类有两种形式

class Student {
}
var Student = class {}

某些浏览器可能无奈解析 es6 及以上的语法，这时候须要通过 babel 将代码解析成浏览器可辨认的语法，定义类的语法通过 babel 编译之后就是通过 function 定义的构造函数。

类和构造函数是一样的，通过 new 关键字创立，具备 prototype 属性

class Student{}
var student = new Student()
console.log(Student.prototype)
console.log(Student.prototype.constructor)
console.log(student.__proto__ === Student.prototype)
console.log(student instanceof Student)
console.log(typeof Student)

执行后果如下

类的办法

构造方法

通过 constructor 来定义类的构造方法，通过 new 关键字来创立类的实例时会执行构造方法中的代码

class Student {constructor(name, age) {
    this.name = name
    this.age = age
  }
}
var student = new Student('alice', 18)
console.log(student)

执行后果如下，创立了一个 Student 的实例对象

babel 解析后果如下

实例办法

实例办法就是挂载在类（构造函数）原型上的办法，能够供所有的实例对象应用，不会在每个实例对象上保留一份

class Student {constructor(name, age) {
    this.name = name
    this.age = age
  }
  studying() {console.log(`${this.name} likes studing~`)
  }
}
var student = new Student('kiki', 16)
console.log(student)
student.studying()

执行后果如下

拜访器办法

拜访器办法能够用于获取 / 批改类中的属性

class Student {constructor(){this.mainSubject = 'Chinese'}
  get subject(){console.log('获取主修课')
    return this.mainSubject
  }
  set subject(value){console.log('批改主修课')
    this.mainSubject = value
  }
}
var student = new Student()
console.log(student)
student.mainSubject = 'Math'
console.log(student)

执行后果如下

静态方法

定义在类（构造函数）上，且仅供类（构造函数）本身可应用

class Student {static showInfo(){console.log('我是一个 Student 类')
  }
}
Student.showInfo()

执行后果如下

继承

类中实现继承要比构造函数中更为简略，通过 extends 关键字就能够实现两个类的继承关系。

class Person{eating(){console.log('person eating')
  }
}
class Student extends Person{
}
var student = new Student()
console.log(student)
student.eating()

执行后果如下

如果要共享构造方法中的数据，则须要通过 super 来实现

class Person{constructor(name, age){
    this.name = name
    this.age = age
  }
  eating(){console.log('person eating')
  }
}
 
class Student extends Person{constructor(name, age, stuNo){super(name, age)
    this.stuNo = stuNo
  }
  eating(){super.eating()
    console.log('student eating')
  }
}
 
var student = new Student('kiki', 16, 1)
console.log(student)
student.eating()

执行后果如下

继承内置类

当咱们须要对 javascript 内置的函数做一些裁减的时候，能够继承自内置的函数。比方对数组进行补充，新增一个返回数组中第一个元素的办法。

class iArray extends Array {firstItem(){return this[0]
  }
}
let arr = new iArray(1, 2, 3)
console.log(arr)
console.log(arr.firstItem())

执行后果如下

混入

javascript 中只能单继承，不反对多个父类，当子类心愿获取多个父类的属性和办法时，能够自定义 mixin 的形式来实现继承关系

function mixinRunner(BaseClass) {
  return class extends BaseClass {running() {console.log('running')
    }
  }
}
function mixinEater(BaseClass){
  return class extends BaseClass {eating() {console.log('eating')
    }
  }
}
class Person { }
const Student = mixinEater(mixinRunner(Person))
const student = new Student()
student.running()
student.eating()

执行后果如下

多态

不同的数据类型操作执行同一个操作时，体现进去的行为不统一，就称为多态。

function calcArea(foo) {console.log(foo.getArea())
}
 
var circle = {
  radius: 6,
  getArea() {return this.radius * 3.14}
}
 
function Person() {this.getArea = function(){return 20}
}
 
calcArea(circle)
calcArea(new Person())

执行后果如下

以上执行两次 calcArea 函数，传入的参数别离为一般对象和实例对象，执行他们各自的 getArea 办法，最初获取的后果也不一样

以上就是 ES6 之类（class）应用的具体介绍，对于 js 高级，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~