基于jquery的ES6面向对象选项卡

ES5中的面向对象相信大家都非常熟悉，包括一系列的配置参数，方法，自定义事件等，现在简单介绍一下es6面向对象的一些知识还有一个基于jquery的es6面向对象选项卡的写法。

ES6中提供了基于类class的面向对象语法。但class实际上是ES6提供的一颗语法糖，JavaScript是一门基于原型的面向对象语言。

// 父类
class Test {
    // 构造器
    constructor (arg1, arg2) {
        this.arg1 = arg1;
        this.arg2 = arg2;
    }
    // 实例方法
    fn () {
        console.log('fn');
    }
    // 类方法
    static create () {
        console.log('create');
    }
}

//实例调用实例方法
var t1 = Test();
t1.fn();//fn

//类调用类方法
Test.create();//create

// 子类
class TestCopy extends Test {
    constructor (arg1, arg2) {
        // super关键词继承
        super(arg1, arg2)
    }
}

上面的代码定义了一个Test类， 可以看到里面有一个constructor方法， 这就是构造方法，也可以叫做构造器，而this关键字则代表实例对象。也就是说，ES5中的构造函数Test， 对应的是E6中Test类中的constructor方法，也就是配置参数。

Test类除了构造函数方法或者说是配置参数外，还定义了两个 fn实例方法和create类方法。实例方法由实例来调用，类方法只能有类来调用。在ES6中定义类中的方法的时候，前面不需要加上 function关键字，直接把写函数定义就行了。另外，虽然类是对象的形式，但是每个方法之间不需要加逗号，因为加了会报错，类中的方法全部是定义在原型上。