模拟 extjs 底层继承

1、混合继承的弊端

  混合继承在继承原型的时候,其实将 父类的模板 再次继承,影响效率

  

 // 混合继承
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor : Person,
        sayHello : function () {
            alert("hello");
        }
    }

    function Boy(name,age,sex) {
        //Person.call(this,name,age);
        this.sex = sex;
    }
    Boy.prototype = new Person();           //  虽然 在 new Person 的时候,并没有传入参数,但是 还是实例化了 Person 模板 , 只是参数的值默认为 undefined

    var b = new Boy("z3",25,"男");
    alert(b.name);          // undefined
    alert(b.sex);           // 男

改进方法

 // 改进方法 , 模拟 extjs 底层继承实现方式
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor : Person,
        sayHello : function () {
            alert("hello");
        }
    }

    function Boy(name,age,sex) {
        Boy.superClass.constructor.call(this,name,age);
        this.sex = sex;
    }

    function extend(sub,sup) {
        var F = new Function();
        F.prototype = sup.prototype;
        sub.prototype = new F();
        sub.prototype.constructor = sub;
        sub.superClass = sup.prototype;
        if(sup.prototype.constructor = Object.prototype.constructor){
            sup.prototype.constructor = sup;
        }
    }
    extend(Boy,Person);
    var b = new Boy("z3",25,"男");
    alert(b.name);              // z3
时间: 2024-10-02 03:08:04

模拟 extjs 底层继承的相关文章

基于利用Jquery模拟Extjs的Panel界面的开发

JQuery 是一个强大js 选择器的开源框架脚本,有了他,本来要写20多行的js脚本,现在只需要10行就能完成,可惜的是,在界面方面,他虽然有Jquery-ui, 但他并没有建立一整套开源成熟的组件,如果他像Extjs/sencha那么成熟的套件,相信会更多人爱他.而像extjs的juqery成熟的开发库 miniUI 却要收费. 所以我尝试,仿照Extjs,模拟重写像Extjs的一套Panel窗口 ,但代码量足足比Extjs/sencha少了50%. 下载连接: https://github

extjs类继承图之组件

前言 组件类的继承图. 类的继承图 参考 ExtJs组件结构继承图 版权声明:本文为博主原创文章,未经博主允许不得转载.

模拟jQuery底层源码的链式调用和常用的$()方法的实现

最近在看jQuery框架的源码,感觉还是学到不少东西的,所以就想总结一下自己的知识,和广大的前端爱好者一起 交流一下,我下面所说的并不是直接对jQuery的源码来解读,我是模拟一下jQuery底层源码的链式调用大概是怎么 实现的和常用的$功能是怎么实现的.好了废话不多说了.你要看这个,你就要对jQuery有一定的了解,最起码你要用过jQuery.首先看下jQuery的源码开始是怎么写的 (function( window, undefined){    })(window);它的代码就是被这个块

Lua下通过元表模拟OOP编程,继承多态

Lua本身是没有以明确的定义来支持OOP编程的,但是我们却可以通过Lua内核提供的一些特性来间接实现简单的面向对象的编程. 通过Lua中的 table结构  metatable 以及函数可以配合实现OOP,以及继承.这些说白了都是一种伪实现,不建议在Lua下使用多重继承 . 在LUA中你想要 强制实现OOP 你必须需要懂一下几个关键词!! 什么是语法糖? 语法糖即糖衣语法,C/C++升级过程中的面向对象 整体就是一种语法糖 ,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)

【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态

一.简介 Lua是一门非常强大.非常灵活的脚本语言,自它从发明以来,无数的游戏使用了Lua作为开发语言.但是作为一款脚本语言,Lua也有着自己的不足,那就是它本身并没有提供面向对象的特性,而游戏开发是一项庞大复杂的工程,如果没有面向对象功能势必会为开发带来一定的不便.不过幸好Lua中有table这样强大的数据结构,利用它再结合元表(metatable),我们便可以很方便地在Lua中模拟出类.继承和多态等面向对象编程具有的特性. 二.前提知识 按照惯例,我们还是先来熟悉一下必要的前提知识,以便方便

模拟ArrayList底层实现

package chengbaoDemo; import java.util.ArrayList; import java.util.Arrays; import comman.Human; /** * ArrayList 底层实现 */ public class MyArrayList { /** * The value is used for Object Stroage. */ private Object value[]; /** *The size is the number of O

JavaScript模拟Java类继承

javascript采用原型继承的方式继承一个类(javascript没有类这个概念,暂时这么称呼吧),但一些使用过Java的程序员可能习惯使用经典的类继承,但javascript原生并不支持这种方式,因此需要手动实现.这里通过定义一个定义类(defineClass)的函数实现,经测试越用越顺手.由于javascript没有访问修饰符,因此如果需要使用到private成员,请使用闭包. 1 /* 简单的对象扩充方法 2 */ 3 merge:function (target, origin) {

js模拟类的继承

var object = {   //定义object基本类,用于实现最基础的方法和属性 isA: function(type){ var self = this; while(self){ if(self == type){ return true; } self = self.Type; }; return false; }, name: 'object' } function Class(baseClass, defineClass){ //创建类的函数,用于声明类及继承的关系 funct

javascript 模拟java 实现继承的5种方式

1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承 //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象, //第二步:执行th