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