JavaScript ES6新的类继承特性学习笔记

Javascript新标准ES6正式出来都一年多了，最近才有时间愿意集中精力研究下，发现有些新特性确实亮瞎了我的双眼，比如，最新的“类-实例”的支持，再比如模仿Python引入gennerator等等。下面和大家分享下我ES6类继承的学习笔记吧。

JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 2015标准（简称ES6）已经在2015年6月正式发布了。新版本的ES有很多亮点，其中一个亮点就是正式引入了class关键字，开始正式支持面向对象的“类-实例”方式了。

0x01 比较

以前JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的“类-实例”模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。
下面是利用原型实现类继承的一种方式：

    'use strict';        //动物原型         function Animal(props){             this.name=props.name||"未知";         }        Animal.prototype.eat=function(){            alert(this.name+"在吃东西...");        }        //继承动物的鸟        function Bird(props){            Animal.call(this,props);                this.type=props.type||”未知”;        }        function F(){}        F.prototype=Animal.prototype;        Bird.prototype=new F();        Bird.prototype.constructor=Bird;        Bird.prototype.fly=function(){            alert(this.name+"在飞...");        }

效果如下：

可见，为了实现类的继承，使用了中间量等大量辅助代码，废了多大功夫，不熟悉的人还不大理解。庆幸的是在ES6中，终于有了类似C++/PHP等语言那种真正意义上的“类-实例”模型了：

    'use strict';        class Animal{            //构造函数            constructor(props){                this.name=props.name||'未知';            }            eat(){                alert(this.name+"在吃东西...");            }        }        //class继承        class Bird extends Animal{            //构造函数            constructor(props){               //调用实现父类的构造函数                super(props);                this.type=props.type||"未知";            }            fly(){                alert(this.name+"在飞...");            }        }

效果如下：

效果一样，但是是不是瞬间有种回到PHP代码的赶脚？？看起来还是那么熟悉的姿势。嘿嘿。。。

0x02 转换

ES6中的class用起来是蛮爽的，但是，由于出来的比较晚了，不是所有的主流浏览器都支持ES6滴，况且不少童鞋还在用IE6呢，那么岂不是咱写代码时不敢用啦？幸运的是有个Babel的工具，可以实现自动从ES6转换为ES5。具体安装和使用有篇博客写的不错，可以参考下：Babel安装
，其实还可以直接用在线方式实现代码的装换（Babel在线转换）：

上面ES6代码转换的结果如下：

'use strict';        var _createClass = function () {            function defineProperties(target, props) {                for (var i = 0; i < props.length; i++) {                    var descriptor = props[i];                    descriptor.enumerable = descriptor.enumerable || false;                    descriptor.configurable = true;                    if ("value" in descriptor) descriptor.writable = true;                    Object.defineProperty(target, descriptor.key, descriptor);                }            }            return function (Constructor, protoProps, staticProps) {                if (protoProps) defineProperties(Constructor.prototype, protoProps);                if (staticProps) defineProperties(Constructor, staticProps);                return Constructor;            };        }();        function _possibleConstructorReturn(self, call) {            if (!self) {                throw new ReferenceError("this hasn't been initialised - super() hasn't been called");            }            return call && (typeof call === "object" || typeof call === "function") ? call : self;        }        function _inherits(subClass, superClass) {            if (typeof superClass !== "function" && superClass !== null) {                throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);            }            subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });            if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;        }        function _classCallCheck(instance, Constructor) {            if (!(instance instanceof Constructor)) {                throw new TypeError("Cannot call a class as a function");            }        }        var Animal = function () {            //构造函数            function Animal(props) {                _classCallCheck(this, Animal);                this.name = props.name || '未知';            }            _createClass(Animal, [                {                    key: 'eat',                    value: function eat() {                        alert(this.name + "在吃东西...");                    }                }            ]);            return Animal;        }();        //class继承        var Bird = function (_Animal) {            _inherits(Bird, _Animal);            //构造函数            function Bird(props) {                _classCallCheck(this, Bird);                var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Bird).call(this, props));                _this.type = props.type || "未知";                return _this;            }            _createClass(Bird, [                {                    key: 'fly',                    value: function fly() {                        alert(this.name + "在飞...");                    }                }            ]);            return Bird;        }(Animal);

是不是又回到了基于原型实现的时代？这段代码就可以被一些老的浏览器支持了。

0x03 小结

现在，我们写javascript代码的时候，可以用一些ES6的新特性，比如class类继承等，然后再转换为ES5的标准，保证对一些老浏览器的兼容性。