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(){};
// In Resig's simple class inheritance (previously used) the constructor
// is a function that calls `this.init.apply(arguments)`
// However that would prevent us from using `ParentObject.call(this);`
// in a Child constuctor because the `this` in `this.init`
// would still refer to the Child and cause an inifinite loop.
// We would instead have to do
// `ParentObject.prototype.init.apply(this, argumnents);`
// Bleh. We're not creating a _super() function, so it's good to keep
// the parent constructor reference simple.
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;
// Make a function for creating instances
subObj.create = xut.CoreObject.create; // 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();
}; /**
* Create a new instace of this Object class
*
* var myAnimal = Animal.create();
*
* @return {xut.CoreObject} An instance of a CoreObject subclass
* @this {*}
*/
xut.CoreObject.create = function(){
// Create a new object that inherits from this object's prototype
var inst = xut.obj.create(this.prototype); // Apply this constructor function to the new object
this.apply(inst, arguments); // Return the new object
return inst;
};

项目地址: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用这一百来行的代码实现,做到这种程度,非常的不容易。

javascript继承扩展类方法实现的更多相关文章

  1. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

  2. javascript 继承、命名空间实现分享

    命名空间是用来组织和重用代码的编译单元,在大型项目开发中javascript使用的越来越多时,我们就应该将项目里的js类库管理起来,如何将自己进行归类管理,防止命名冲突,但是Javascript默认不 ...

  3. Javascript继承之最佳实践

    尊重原创,转载请注明出处:http://blog.csdn.net/zoutongyuan 什么是继承? 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性和 ...

  4. JavaScript继承详解

    面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...

  5. JavaScript继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance. John Resig作为jQuery的创始人而声名在外 ...

  6. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

  7. JavaScript 继承小记

    面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过“类”(class) ...

  8. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  9. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

随机推荐

  1. [BZOJ1061][Noi2008]志愿者招募

    [BZOJ1061][Noi2008]志愿者招募 试题描述 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿 ...

  2. WinAPI: ExtCreateRegion - 区域变换

    转载:http://www.cnblogs.com/del/archive/2008/06/03/1212534.html 相似函数: SetWorldTransform 本例效果图: 代码文件: u ...

  3. poj1328贪心 雷达,陆地,岛屿问题

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 60381   Accepted: 13 ...

  4. Gson简要使用

    哇,原来我已经潜水2年多了,还是需要养成习惯写写东西啊. 最近在做一个java web service项目,需要用到jason,本人对java不是特别精通,于是开始搜索一些java平台的json类库. ...

  5. STM32canopen调试

    问题1:用usbcan监测不到can口的报文 属于接线问题 CANopen程序总使用的是can1 对应的接下口在J1的1和2口,而其接口排序是从外向里排序,故最外面的为1号接口,由于接线时,按照左边的 ...

  6. Java for LeetCode 141 Linked List Cycle

    Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without using ex ...

  7. min-height在安卓下不起作用

    正常情况下,min-height可以当height使用 如: <div class="father"> <div class="child"& ...

  8. javascript首尾反转字符

    var my_str="Welcome to www.sharejs.com" var i=my_str.length; i=i-1; for (var x = i; x > ...

  9. Mysql sql查询性能侦查

    Mysql 服务性能优化配置:http://5434718.blog.51cto.com/5424718/1207526[该文章很好] Sql查询性能优化 对Sql进行优化,肯定是该Sql运行未能达到 ...

  10. Eclipse 代码格式化

    http://blog.csdn.net/prstaxy/article/details/7839197 http://jingyan.baidu.com/article/9158e00044efb6 ...