定义
类是构造函数、原型链的语法糖。
定义类有两种形式
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 高级,还有很多须要开发者把握的中央,能够看看我写的其余博文,继续更新中~