ExtJS底层继承机制实现

mayaohua 发布于2019-08-21 10:32 / 3305人阅读

摘要：是个基于对象的语言，没有类的概念。而且语言特点就是松散和自由，实现一个同样的功能，可以有很多种方式面向对象编程绝大部分都是基于类的所以我们可以借助原型链继承的方式来在中实现高级程序语言中的继承机制关键点就是你一定要了解中的。

JavaScript是个基于对象的语言，没有类的概念。而且JavaScript语言特点就是松散和自由，实现一个同样的功能，可以有很多种方式.面向对象编程绝大部分都是基于类的.所以我们可以借助原型链继承的方式,来在JavaScript中实现高级程序语言中的继承机制.关键点就是你一定要了解js中的prototype。模拟ExtJS底层方法,来实现一个简单的继承机制

function extend(sub,sup){
    //实现只继承父类的原型对象

    //1.用一个空函数进行中转
    var F = new Function();
    //2.实现空函数的原型对象和超类的原型对象转换
    F.prototype = sup.prototype;
    //3.原型继承
    sup.prototype = new F();
    //4.还原子类的构造器
    sub.prototype.constructor = sub;
    //5.保存一下父类的原型对象,一方面方便解耦,另一方面方便获取父类的原型对象,实现方法重载
    sub.superClass = sup.prototype; //自定义一个子类的静态属性,接收父类的原型对象
    //6.判断父类原型对象的构造器
    if(sup.prototype.constructor == Object.prototype.constructor){
        sup.prototype.constructor = sup; //手动还原父类对象的构造器
    }
}

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    constructor: Person,    //还原构造器,这里其实可以不用还原,因为在extend方法中已经实现了
    sayHello: function(){
        alert("hello world!");
    }
}
function Boy(name,age,sex){
    //绑定父类函数模版,实现构造函数继承,只复制了父类的模版
    Boy.superClass.constructor.call(this,name,age);
    this.sex = sex;
}
extend(Boy,Person);
//给子类添加一个原型对象方法
Boy.prototype.sayHello = function(){
    alert("hello,javascript");
}
Boy.superClass.sayHello.call(b);    //实现方法重载,调用父类的方法
var b = new Boy("z3",20,"nan");
alert(b.name);
alert(b.sex);
b.sayHello();   //调用子类重载的方法

转摘自我的博客：ExtJS底层继承机制实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85714.html

听飞狐聊JavaScript设计模式系列04

摘要：介一回，偶们来聊一下用中的类，有些盆友可能用过或者的，知道语法糖，可是在中并没有，中需要用到构造函数来模拟类。而且要注意一点，构造函数没有语句，是自动返回。本回内容介绍上一回聊到JS的Function类型，做了柯里化，数组去重，排序的题。介一回，偶们来聊一下用JS中的类，有些盆友可能用过ES6或者TypeScript的，知道Class语法糖，可是在ES5中并没有，ES5中需要用到...

kgbook 2019-08-21 10:44 评论0 收藏0
extjs 事件执行

摘要：问题是解决了，但引发我猜想，我最初是以为多线程的原因，不然不能解释这个现象程序肯定没有顺序执行。虽说现在已经有了多线程，但现在没用到，就不在记录之列了参考链接异步编程阮一峰缘起在项目中用到了extjs做后台页面展示，当时写了一个product 模块，在新增窗口里放了一个card布局器，里面有不同的表单，当然新增窗口还有保存，重置，关闭这三个按钮。当时在保存时写了下面代码： ...

mylxsw 2019-08-21 10:17 评论0 收藏0
JavaScript_面向对象程序设计

摘要：构造函数用于检测给定的属性在当前对象实例中而不是原型中是否存在。返回对象的字符串表示。实现空函数的原型对象和超类的原型对象转换原型继承做善后处理。判断父类的原型对象的构造器，防止简单原型中给更改为还原父类原型对象的构造器类的创建于实例对象工厂模型创建对象 function CreatePerson ( name,sex,age ) { var obj = new ...

lingdududu 2019-08-19 18:34 评论0 收藏0
Extjs - model总结

摘要：数据读取器相当于原始数据格式与标准数据格式之间的桥梁，它屏蔽了原始数据格式不同对程序开发造成的影响。零是有效的，但空字符串无效。用了Extjs快一年了，这里整理一下model。数据模型 showImg(https://segmentfault.com/img/bVzXAR); Extjs 中数据包总共包含了40多个类，其中有三个类比其他类有更重要的地位，它们分别是：model、st...

EastWoodYang 2019-08-22 10:34 评论0 收藏0
extjs-mvc结构实践(三):完善基本页面

摘要：上篇实现了基本的代码架构，控制器动态加载功能以及一个基础的页面布局，本节开始，将陆续完善这个页面。页面底部区域，主要显示版权信息等，也可以显示个时间啥的。。。头部和底部定义完毕后，需要在中引入对应位置。上篇实现了基本的代码架构，控制器动态加载功能以及一个基础的页面布局，本节开始，将陆续完善这个页面。目标如前所述，我们的页面包含这么几个区域： header: UI顶部区域，显示系...

zhkai 2019-08-22 13:57 评论0 收藏0