首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:14:18
字体:
来源:转载
供稿:网友

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

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表