[原创]CoderPower

大家好，这里是码路工人有力量，我是码路工人，你们是力量。

这是公众号（码路工人有力量）开通后的第二篇，写得还是有待改进吧。
这次准备写一个关于ES6基础的短文系列，努力尽快更完。
欢迎关注分享，一起学习提高吧。
QRCode/微信订阅号二维码

今天主要聊聊JS中的面向对象即类的使用，先来看看ES5中的传统实践，再对比ES6中的便利优雅，面向未来又不忘历史。

1. ES5中的类与继承

1.1 function 是函数，也是类

先来一段例子代码

/* eg.1

 * class example in ES5

 */

// Class Definition

function Person(name, gender) {

    this.name = name;

    this.gender = gender;

    Person.PCount++;

}

// Method Definition

Person.prototype.greeting = function(){

    console.log("Hi! I am " + this.name+ ".");

}

// JS also has static methods and properties.

Person.PCount = 0;

Person.GetPCount = function() {

    console.log("Static method called. PCount = " + Person.PCount);

}

// Instance

var p1 = new Person("Tom", "male");

p1.greeting();      // Hi! I am Tom.

var p2 = new Person("Jerry", "male");

p1.greeting();      // Hi! I am Jerry.

Person.GetPCount();      // Static method called. PCount = 2

Person 构造函数

Person 在这里既是类定义（类名），又是构造器（构造函数）。对于CSharper或者Javaer，这多新鲜，类跟构造函数竟然是同一个东西。（所以到了ES6，写起来就舒服多了，从这里也能看出开发语言的相互学习与特性趋同趋势）

构造函数：通过 new 类名 来创建一个函数的对象
实例：接收到 new 构造函数创建出来的对象就是实例。
prototype 原型

关于 prototype 即原型，用与实现对象的属性继承。有很多优秀的文章介绍原型链的，这里不再展开，或以后再做单独总结。

其中的关系如下：
- 构造函数.prototype === 原型
- 实例.__proto__ === 原型
- 原型.constructor === 构造函数
JS类也可以有静态函数和静态属性

上面也提到了，这里说的构造器就是类名。

构造器.属性名 = xxx
构造器.方法名 = foo(){}

通过构造器.属性名/方法名() 来调用。在 eg.1 中实现一个实例自动计数器。

1.2 实现好继承还需要抱团才行（组合继承）

ES5中对继承的支持比较弱，或者说面向对象支持比较弱，继承要绕弯子来实现。
继承的实现方式有：

通过构造函数继承

就是在 new 的时候，构造函数里用父类的构造函数调用 call/apply 来传递子类这个对象改变 this 指向。
原理上讲，就是用 call/apply，更改了父类构造函数里 this 的指向，实现了冒充继承。
通过原型链继承

将子类的 prototype 属性指向一个父类的新对象:
Child.prototype = new Parent();

混合继承（即用构造函数又用原型链）

前两种分别有弊端所有混合才成了最佳实践。Talk is cheap, show you the code.

/* eg.2

 * extension example in ES5

 */

// Child Class Definition

function Student(name, gender, schoolName) {

    Person.apply(this, arguments);

    this.school = schoolName;

}

Student.prototype = Person.prototype;

// or:

// Student.prototype = Object.create(Person);

Student.prototype.constructor = Student;

var s1 = new Student("Emily", "female", "Non-Famouse University");

s1.greeting();                // Hi! I am Emily

Person.GetPCount.apply(s1)    // Static method called. PCount = 3

s1.GetPCount();               // Uncaught TypeError: s1.GetPCount is not a function

在上面的 eg.2 中，注释里记录了运行结果，大家也可以把代码copy到chrome的Console里回车执行一下来查看。

很明显可以看到，Person 的属性和方法被继承了，但是静态属性和静态方法却没有，不能直接调用，不过可以绕路调用也就是仍然用Person，再用apply改变this指向子类。可以发现计数器确实增加了，也就是实例化子类时，父类里面有正常调用。

2. ES6中的类与继承

既然是ES6系列，ES5自然不是本文重点。回顾完了接下来我们看看ES6。

ES6中的类与继承主要概括为四个关键字：

class
constructor
extends
super
除以上之外的补充：static 关键字

2.1 终于有了属于JS自己的Class

/* eg.3

 * class example in ES6

 */

// Class Definition

class Person {

    constructor(name, gender) {

        this.name = name;

        this.gender = gender;

        Person.PCount++;

    }

    // Methods Definition

    greeting() {

        console.log("Hello! I am " + this.name + ".");

    }

    foo() {

        console.log("bar");

    }

    // mock static property

    static get PCount() {

        return Person.Count;

    }

    static set PCount(value) {

        Person.Count = value;

    }

    // static method

    static GetPCount() {

        console.log("Static method called in ES6. PCount = " + Person.PCount);

    }

}

// static property

Person.Count = 0

// Instance

const p1 = new Person("Petter", "male");

p1.greeting();      // Hello! I am Petter.

const p2 = new Person("Ben", "male");

p2.greeting();      // Hello! I am Ben.

Person.GetPCount();      // Static method called in ES6. PCount = 2

世界大同：class 关键字

与C#和java里采用了相同的定义方式：class关键字声明一个类。

类成员方法的定义，有了简便写法，即 方法名(){方法体} ，后面继续定义方法的时候也不需要加逗号之类的分隔。
构造函数：constructor 关键字

这样的写法看起来就舒服多了，类是类，构造函数是构造函数。

类里的构造函数是必须存在的，如果没有显式指定，那么就会生成一个默认的构造函数(如下所示)。怎么样，听起来多么熟悉的味道，对于CShaper/Javaer。
```
...

constructor() {}

...
```
静态方法：static 关键字

增加了static关键字，可以在类内部用来声明静态方法。

静态方法的调用与之前相同，直接 类名.静态方法()

不能用static在类里定义一个静态属性，但可以用 static get/set 来模拟操作属性。

2.1 继承变得很简单

/* eg.4

 * extension example in ES6

 */

// Child Class Definition

class Student extends Person {

    constructor(name, gender, schoolName) {

        super(name, gender);

        // must call [super] before use [this]

        this.school = schoolName;

    }

    greeting() {

        console.log("Hello! I am " + this.name + " and I am studying in " + this.school + ".");

    }

}

const s1 = new Student("Lily", "female", "Non-Famouse College");

s1.greeting();                // Hello! I am Lily and I am studying in Non-Famouse College.

Person.GetPCount.apply(s1);   // Static method called in ES6. PCount = 3

s1.GetPCount();               // Uncaught TypeError: s1.GetPCount is not a function

继承：extends 关键字

ES6中的类与继承其实内部还是用的prototype与constructor实现的，只是增加了语法糖，写起来就简单多了，看起来也是清晰多了。

在 eg.4 中，我们重写了父类 Person 的 greeting 方法，所以在调用时打印内容不再是父类里的内容。
调用/访问父类：super 关键字

通过 super 关键字，可以访问父类的属性或方法。比如在上面的 eg.4 中，重写的 greeting 方法还可以写成：
```
greeting() {

    super.greeting();     // Hello! I am Lily.

    console.log("Hello! I am " + this.name + " and I am studying in " + this.school + ".");

}
```
需要注意的一点是，在子类的构造函数里，若要给属性赋值（这就用到了 this)，必须要先调用 super，也就是先走父类的构造函数初始化，创建一个空对象（也就是咱们用到的 this），否则报错。
补充（要实例化的类）：new.target 关键字
用 new.target 能区分要实例化的是哪个类，比如在实例化子类时，new.target.name 就是子类名字。
放开 class Person 的 constructor 的 console.log(new.target.name); 这句，可以确认到以下打印结果：
```
new Person()      // Person

new Student()     // Student
```

读到这里，对于 JavaScript 里的类与继承就能一笑泯恩仇了吧。
希望能有帮助，下篇再见。

巴特西

[ES6系列-01]Class：面向对象的“新仇旧恨”