从国外开源项目中提取的继承类
javascript没有原生的继承语法,这确实很让人困惑,但是广大人民群从的智慧是无穷的。最近呢,正尝到一点从源码中学习的甜头,不分享一下实在难以平复激动的心情。前不久改造视频播放插件的时候,找到了videojs这个优秀的开源项目。经过一段时间深入学习它的源码,发现它的继承机制写的很好,而且短小精悍,于是决定把它拔离出来,做成一个单独的库,方便以后项目中使用。
//定义一个命名空间 var xut = {}; /** * Core Object/Class for objects that use inheritance + contstructors * * @class * @constructor */ xut.CoreObject = xut['CoreObject'] = function(){}; /** * Create a new object that inherits from this Object * * var Animal = CoreObject.extend(); * var Horse = Animal.extend(); * * @param {Object} props Functions and properties to be applied to the * new object's prototype * @return {xut.CoreObject} An object that inherits from CoreObject * @this {*} */ xut.CoreObject.extend = function(props){ var init, subObj; props = props || {}; // Set up the constructor using the supplied init method // or using the init of the parent object // Make sure to check the unobfuscated version for external libs init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){};
subObj = function(){ init.apply(this, arguments); }; // Inherit from this object's prototype subObj.prototype = xut.obj.create(this.prototype); // Reset the constructor property for subObj otherwise // instances of subObj would have the constructor of the parent Object subObj.prototype.constructor = subObj; // Make the class extendable subObj.extend = xut.CoreObject.extend;// Extend subObj's prototype with functions and other properties from props for (var name in props) { if (props.hasOwnProperty(name)) { subObj.prototype[name] = props[name]; } } return subObj; }; xut.obj = {}; xut.obj.create = Object.create || function(obj){ //Create a new function called 'F' which is just an empty object. function F() {} //the prototype of the 'F' function should point to the //parameter of the anonymous function. F.prototype = obj; //create a new constructor function based off of the 'F' function. return new F(); };
项目地址:https://github.com/bjtqti/mini-extend
关于它的使用,我会抽空在git上详细说明,先作一个简单的案例,有兴趣的读者可以自行分析一下它的妙处:
var Animal = xut.CoreObject.extend({ init : function(name){ this.name = name; } }); Animal.prototype.getName = function(){ return this.name; } Animal.prototype.makeSound = function(){ alert('xxx'); } var Bird = Animal.extend(); var Dog = Animal.extend({ makeSound : function(){ alert('wang...') } }); var b = new Bird('bage'); var d = new Dog('wang'); d.makeSound() b.makeSound()
子类可以很方便的继承父类的功能,而且子类也可以很自由的修改父类的功能,还不会影响它子类。这对于熟悉php/java等语言的程序员来说,这简直就是废话,但是js用这几十来行的代码实现,做到这种程度,非常的不容易。