Fork me on GitHub

从国外开源项目中提取的继承类

    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用这几十来行的代码实现,做到这种程度,非常的不容易。

posted on 2015-01-07 21:46  bjtqti  阅读(495)  评论(0编辑  收藏  举报