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. Java数据库ResultSet转json实现

    现在有很多json相关的Java工具,如json-lib.gson等,它们可以直接把JavaBean转换成json格式. 在开发中,可能会从数据库中获取数据,希望直接转成json数组,中间不通过bea ...

  2. 15 day 1代碼

    第一题 用堆维护. #include <cstdio> #include <algorithm> #include <queue> int n,i,f[400000 ...

  3. BestCoder17 1002.Select(hdu 5101) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5101 题目意思:给出 n 个 classes 和 Dudu 的 IQ(为k),每个classes 都有 ...

  4. hadoop启动后jps没有namenode(转)

    hadoop启动后jps没有namenode 一般都是由于两次或两次以上格式化NameNode造成的,有两种方法可以解决: 1.删除DataNode的所有资料 2.修改每个DataNode的names ...

  5. 6.原型模式(Prototype Pattern)

    using System; namespace ConsoleApplication5 { class Program { static void Main(string[] args) { // 孙 ...

  6. 在Android中将子View的坐标转换为父View的坐标

    在Android中,我们有时候可能会将子View的坐标转换为父View中的坐标.感觉很有用,分享给大家. 在Launcher中有这么一段代码可以完成这项工作.  public float getDes ...

  7. hdu 2050:折线分割平面(水题,递归)

    折线分割平面 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. SQL 替换指定列中的指定字符串

    Update 表名 Set 列名 = Replace(列名,‘被替换的字符’,‘要替换的字符’) Demo: UPDATE BPM_DailySET Workstation = REPLACE(Wor ...

  9. 在Linux中创建静态库.a和动态库.so

    转自:http://www.cnblogs.com/laojie4321/archive/2012/03/28/2421056.html 在Linux中创建静态库.a和动态库.so 我们通常把一些公用 ...

  10. 测试服务API的_苏飞开发助手_使用说明

    1 工具说明_json对象字符串拼接 2 工具说明_纯字符串拼接