深入理解Javascript中的面向对象（四）
ECMAScript 6（下面简称ES6）增强了对面向对象的支持，引入了class关键字，并且为类的创建、继承提供了简洁清晰的语法。
类声明与类表达式
毋庸置疑， class关键字 就是用来定义类的。
定义类的常用方式是类声明，语法如下：
class ClassName { // 构造函数 constructor() { // ... } // 方法 method() { // ... } }而另一种方式则是类表达式，语法如下：
var ClassName = class { // 构造函数 constructor() { // ... } // 方法 method() { // ... } };下面通过class关键字重新实现Shape类（注意，class关键字目前 只在Chrome42的严格模式下可用 ）：
'use strict'; class Shape { constructor(name) { this.setName(name || '形状'); } getName() { return this._name; } setName(name) { this._name = name; } perimeter() { } } var shape = new Shape(); shape.setName('我的形状'); shape.getName(); // '我的形状'Getter和Setter
getName、setName这两个方法本来是为了隐藏_name属性而存在的，但调用方法明显比访问属性更累赘一些。Getter和Setter就是为了解决这个问题而出现的。它们分别用于定义对属性读和写时进行的操作：
class Shape { constructor(name) { this.name = name || '形状'; } get name() { // 获取name属性的值时，实际返回的是_name return this._name; } set name(name) { // 设置name属性的值时，会写入到_name，而不是覆盖name this._name = name; } // 只设置了getter，所以无法设置 get perimeter() { } } var shape = new Shape(); shape.name = '我的形状'; console.log(shape.name); // '我的形状' shape.perimeter = 10; // 抛出异常Getter和Setter分别通过get、set关键字来声明，二者可以同时存在或只存在其一。如果一个属性只有getter没有setter，那它就是个只读属性（如perimeter）。
继承
与Java一样，Javascript也使用 extends关键字 实现继承，子类中可以通过 super关键字 调用父类：
class Square extends Shape { constructor() { this.length = 0; super('正方形'); // 调用父类构造函数 } get length() { return this._length; } set length(length) { if (length < 0) { throw new Error('...'); } this._length = length; } get perimeter() { return this.length * 4; } } var square = new Square();上面的代码看起来没问题，但实例化Square的时候会出现异常：
Uncaught ReferenceError: this is not defined
这可奇怪了，this明明指的是当前对象，为何提示未定义呢？进一步查资料得知， 子类必须在调用父类构造函数后才能使用this 。于是Square类代码调整为：
class Square extends Shape { constructor() { super('正方形'); this.length = 0; } get length() { return this._length; } set length(length) { if (length < 0) { throw new Error('...'); } this._length = length; } get perimeter() { return this.length * 4; } } 接着声明长方形类和圆形类：
class Rectangle extends Shape { constructor() { super('矩形'); this.length = 0; this.width = 0; } get length() { return this._length; } set length(length) { if (length < 0) { throw new Error('...'); } this._length = length; } get width() { return this._width; } set width(width) { if (width < 0) { throw new Error('...'); } this._width = width; } get perimeter() { return (this.length + this.width) * 2; } }class Circle extends Shape { constructor() { super('圆形'); this.radius = 0; } get radius() { return this._radius; } set radius(radius) { if (radius < 0) { throw new Error('...'); } this._radius = radius; } get perimeter() { return 2 * Math.PI * this.radius; } }最后是计算周长：
function computePerimeter(shape) { console.log(shape.name + '的周长是' + shape.perimeter); } var rectangle = new Rectangle(); rectangle.width = 10; rectangle.length = 20; computePerimeter(rectangle); var square = new Square(); square.length = 10; computePerimeter(square); var circle = new Circle(); circle.radius = 10; computePerimeter(circle); 其他细节
语法糖
虽然引入了class关键字，但ECMAScript 6并没有真的引入类这个概念，通过class定义的仍然是函数：
console.log(typeof Shape); // 'function'所以说， class仅仅是通过更简单直观的语法去实现原型链继承 。这种对语言功能没有影响、但是给程序员带来方便的新语法，被称为语法糖。
变量提升
Javascript中的函数声明存在 变量提升 这一特性，也就是说，调用函数的代码可以在函数声明之前。例如：
fn(); function fn() { }虽然通过class声明的“类”实际上也是函数，但是它没有变量提升这一特性。例如下面这段代码会抛出异常：
var a = new A(); // 抛出异常 class A { }最后
可见，与原型链写法比起来，使用class定义类简单得多。但是要想在ES6普及之前使用这个语法，只能通过一些工具把ES6转成ES5或ES3了。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
