JavaScript：class类的实现方式及特点

在JavaScript开发中，我们通常会使用构造函数的方式来是实现实例对象的生成，代码如下：

function People(name, age) {
    this.name = name;
    this.age = age;
}
People.prototype.say = function () {
    console.log('hello');
}
var tom = new People('tom', 25);

但是在ES6中，新加了一个比较传统的概念---class（类），来作为对象的模板，通过class关键字，可以定义我们需要的类，具体语法如下：

class People {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log('hello');
    }
}

可以看到，定义一个类People，用到了constructor构造方法，constructor构造方法内的this指向的则是实例对象，所以可以大概得出一个结论：就是class定义类中的constructor构造方法跟我们通常定义实例对象的构造函数是类似的（即constructor构造方法 ≈  People构造函数）。还可以看到，我们给class类中定义了一个say()的方法，这里有个语法需要注意，就是在class类中定义方法时不需要添加function函数关键字，而且方法与方法之间，不能用逗号分隔。同时我们检测一下class类的属性：

class People {...};
console.log(typeof People);    // function，属于引用类型中的函数类型

同样，检测与People.prototype.constructor与class People的关系：

People === People.prototype.constructor

判定的结果是true，也就是说明：class类本身就是一个函数类型，同时class类本身指向的就是构造函数。我们先看下calss类声明对象的实现过程是咋样的：

首先，创建一个我们需要的People函数：

var People = function () {}

然后，前面我们说到的class类中的constructor构造方法中的this指向的就是实例，所以这里的constructor实际上指的就是People，那我们给People添加name和age的两个属性如下：

var People = function () {
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
}

接下来就是如何将People的属性方法值添加上去？上面我们有在类中添加say()方法，那么实现的过程，我们就会利用到Object.defineProperty来给function People添加属性方法，如下：

// 先定义一个添加对象属性的方法，利用Object.defineProperty
var defineProperties = function (target, props) {
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}

var People = function () {
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
    // 给function People添加say属性方法
    defineProperties(People, [{key: 'say', value: function(){console.log('hello')}}]
}

最后就是调用并返回我们需要的实例对象People：

var People = function () {
    function People(name, age) {
        this.name = name;
        this.age = age;
    }
    // 给function People添加say属性方法
    defineProperties(People, [{key: 'say', value: function(){console.log('hello')}}]
    
    return People
}();

说完class类实现的方式，接下来说一些它的特点：

• class创建的类中的定义的所有方法，不能枚举

var a = Object.keys(People.prototype);
console.log(a);   // []

• 定义一个类时候必须要有constructor方法，如果没有定义，会默认添加一个空的constructor

class People {}  --->   class People {constructor(){}}

• 在使用class类声明实例的时候也需要在前面添加new关键字

class People {...};
var tom = new People('tom', 25);

 

关于class类的相关是实现原理及一些特性简单介绍到这里，有想更深入学习的有志青年可以去看下阮一峰大神关于ES6新增特性的讲解，有不足之处，还望各位多多指点！