ES6学习——类语法：基本概念介绍

许多人一直说javascripr语法中没有类语法，不利于大型面向对象的项目开发。ES6中终于在千呼万唤中加入了类语法，但实质上还是对原型继承的一种封装，写起来会比较直观，我们知道OO的三大特性：封装，继承，多态。这篇文章主要围绕这三点对ES6的类语法进行介绍。

规范中关于class的语法内容在14.5，有兴趣的自己去看。

看段代码：

		'use strict';

		class Point {
			constructor(x, y) {
				this.x = x;
				this.y = y;
			}

			static getDesc(){
				return "-" + this.TAG + "-";
			}

			toString() {
				return `(${this.x}, ${this.y})`;
			}
		}

		Point.TAG = "point"//static property

		class ColorPoint extends Point {
			constructor(x, y, color) {
				super(x, y);
				this.color = color;
			}

			toString() {
				return super.toString() + ' in ' + this.color;
			}
		}

		console.log(typeof Point)//function

		var p = new Point(1,2),cp = new ColorPoint(1,2,'red');

		console.log(p.toString(),cp.toString());//(1,2) (1,2) in red
		console.log(cp instanceof ColorPoint,cp instanceof Point);//true true

		console.log(p.TAG,cp.TAG);//undefined undefined
		console.log(Point.TAG,ColorPoint.TAG);//point point
                console.log(Point.getDesc(),ColorPoint.getDesc())//-point- -point-

通过上面这个完整的例子我们看一下这些特性：

有一点需要先说明一下，class的语法没有hoisting过程，你不能把Point写到ColorPoint下面去。主要原因是extends后面可以是表达式，例如我们这样写，也是可以的：

class ColorPoint extends getFather(){}

封装的特性：在class中可以声明属性，方法，静态方法，记住这里没有静态属性。一般在类里面用精简语法，计算属性也可以使用。

继承的特性：可以使用extends继承自其他的类，并且在子类方法中可以使用super调用父类方法，所有class中有个constructor构造方法，上面的例子中都有。ES6中也只支持单继承，多继承可以用其他一些手段（代理，反射）去自己实现。

多态的特性：js中没有这个特性的需求，因为js是弱类型语言。

下面解释一下代码中打印的结果：

通过typeof看出，class声明的Point并不是什么新类型，仍然只是个function，为什么说class语法是原型继承的一种封装呢：Point.prototype.constructor === Point 这个等式仍然成立，我们在通过Object.getOwnPropertyNames(Point.prototype)这个方法可以看到，类中声明的方法仍然被定义在了它的原型上。

接着的两个console.log应该不用在解释了，后面的文章中会有详细讲解继承原型链的。

我们再看最后三个console.log，这三行是关于静态属性以及静态方法使用的。类中不直接支持声明静态属性，但可以直接用class名称+点+属性名的形式去定义静态属性，记住静态属性是无法在实例中访问的，所以p.TAG打印出来是undefined。静态属性可以直接通过类名称去访问，还可以在类中的静态方法中访问，上面的最后一行代码示范了调用静态方法。其实我们定义在class中的静态方法也是放在类上的，可以通过Object.getOwnPropertyNames(Point)自己去验证一下，这也是为什么静态方法中用this可以访问得到TAG属性。

通过上面的例子我们可以看出用class去声明一个类确实比较简单明了，而且代码易读，易懂。如果想使用OO的方式写程序，ES6的class语法确实带来了许多方便。

*以上全部代码在Chrome 47下通过测试