js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.
1. 定义js类
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.
function ShapeBase() { this.show = function() { alert("ShapeBase show"); }; this.init = function(){ alert("ShapeBase init"); }; }
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
另外, 我们还可以用prototype属性来定义Shape的方法.
ShapeBase.prototype.show=function() { alert("ShapeBase show"); } ShapeBase.prototype.init=function() { alert("ShapeBase init"); }
上面这种写法看起来不太直观,我们可以将所有的方法写在一起.
ShapeBase.prototype={ show:function() { alert("ShapeBase show"); }, init:function() { alert("ShapeBase init"); } };
现在, 类是写好了, 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?
function test(src){ var s=new ShapeBase(); s.init(); s.show(); }
看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料.
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法,要是实现跟C#中的静态方法要怎么做呢?
其实, 实现js的静态方法很简单, 看下面如何实现:
//静态方法 ShapeBase.StaticDraw = function() { alert("method draw is static"); }
2. 实现JS类抽象和继承
同样, js中也不支持类继承机制,但我们可以通过将父类prototype中的成员方法复制到子类的prototype中来实现.
和类的继承一样,JavaScript也没有任何机制用于支持抽象类.但利用JavaScript语言本身的性质.可以实现自己的抽象类.
首先来看看js中的虚方法, 在传统语言中虚方法是要先定义的, 而包含虚方法的类就是抽象类,不能被实例化,而在JavaScript中,虚方法就可以看作该类中没有定义的方法,但已经通过this指针使用了.
和传统面向对象不同的是,这里虚方法不需经过声明,而直接使用了, 并且类也可以被实例化.
先定义object的extend方法, 一个为静态方法,一个为实例方法, 这两个方法用于实现继承的prototype复制
Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destination; } Object.prototype.extend = function(object) { return Object.extend.apply(this, [this, object]); }
接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。
function Rect() { } Rect.prototype = ShapeBase.prototype; //只这一句就行了 //扩充新的方法 Rect.prototype.add=function() { alert("Rect add"); }
这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址.
如果上面也定义了:
Rect.prototype.show=function() { alert("Rect show"); }
那么执行结果如下:
function test(){ var s=new ShapeBase(); s.show(); //结果:Rect show var r=new Rect(); r.show(); //结果:Rect show r.add(); }
我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下:
ShapeBase.prototype={ show:function() { alert("ShapeBase show"); }, initialize:function () { this.oninit(); } };
实现Rect类继承
Rect.prototype=(new ShapeBase).extend({ //添加新的方法 add:function() { alert("Rect add"); }, //使用这种方法可以重写show方法 show:function() { alert("Rect show"); }, //实现虚方法 oninit:function() { alert("Rect oninit"); } })
另外,在网上看到一篇用专门的对象来创建类,代码如下:
// //对象属性复制方法,很多库都有实现,如PrototypeJS里面的extend和Ext里面的Ext.apply // function extend(des, src) { if (!des) des = {}; if (src) { for (var i in src) { des[i] = src[i]; } } return des; } var CC = {}; //全局变量 // //create 用于创建类 // CC.create = function(superclass, constructor){ var clazz = (function() { this.initialize.apply(this, arguments); }); //如果无参数,直接返回类. if(arguments.length == 0) return clazz; //如果无父类,此时constructor应该为一个纯对象,直接复制属性返回. if(!superclass){ extend(clazz.prototype, constructor); return clazz; } var absObj = clazz.prototype, sprPropty = superclass.prototype; if(sprPropty){ //用于访问父类方法 clazz.superclass = sprPropty; extend(absObj, sprPropty); //调用属性构造函数创建属性,这个是实现关键. extend(absObj, constructor(sprPropty)); // 子类实例直接通过obj.superclass访问父类属性, // 如果不想造成过多引用,也可把这句注释掉,因为多数时候是没必要的. absObj.superclass = sprPropty; // clazz.constructor = constructor; } return clazz; } // //创建一个动物类 // var Animal = CC.create(null, { //属性 footprint : '- - - - - - =', //类初始化方法,必须的,当用 new 生成一个类时该方法自动被调用,参见上定义. initialize : function(options){ extend(this, options); alert('Animal initialize method is called.'); }, eat : function(){ alert('Animal eat method is called.'); }, move : function(){ alert('I am moving like this '+ this.footprint +' .'); } }); // //创建一个Duke类 // var Duke = CC.create(Animal, function(superclass){ //在这可以定义一些类全局静态数据,该类每个实例都共享这些数据. //计算实例个类,包括派生类实例. var static_instance_counter = 0; function classUtilityFuncHere(){ } //返回类具体属性. return { //重写初始化方法 //@override initialize : function(options) { alert('Initializing Duke class..'); //调用父类初始化,这种方法比一般其它库的要简洁点吧,可以不管父类是什么. superclass.initialize.call(this, options); //做一些子类喜欢做的事. alert('Duke initialize method is called.'); //读取或修改类静态属性 static_instance_counter++; }, //重写move方法,增加Duke自己的移动方式. move : function(){ this.footprint = this.footprint + 'zzzzzzzz'; superclass.move.call(this); }, //重写eat方法,注意,里面不调用父类方法,即父类eat被覆盖了. eat : function(){ alert('Duke is eating..'); }, //新增一个say方法,显示当前已经初始化的Duke类实例数量. say : function(){ alert('the number of Duke instances is '+static_instance_counter); } }; }); var DukeChild = CC.create(Duke, function(superclass){ return { move : function(){ this.footprint = this.footprint + '++++++++++++='; superclass.move.call(this); }, say : function(){ alert(this.msg || ''); } }; }); (function test() { var animal = new Animal(); animal.eat(); animal.move(); var dukeA = new Duke(); dukeA.eat(); dukeA.move(); dukeA.say(); var dukeB = new Duke(); dukeB.eat(); dukeB.move(); dukeB.say(); var dukeC = new DukeChild({msg : 'I am a child of duke.'}); dukeC.move(); dukeC.say(); })();
相关推荐
一个实现ajax功能的JS xml读取封装类代码,在这个JavaScript类里面,有核心的读取XML文件的代码,同时还包括了新建XML文档对象、在IE下使用ActiveX来创建,异步读取XML文件,创建XMLHttp对象,以备XML文档对象无法...
为了实现代码的可重用性和可维护性,良好的编程风格应将独立的功能封装于独立的js文件。但在后续的引用中,因继承关系需要基类优先加载,导致编程人员在使用已定义的类时,甚至需要掌握该类的继承关系并按顺序正确...
js实现Element中input组件的部分功能并封装成组件(实例代码) 现在实现的有基础用法、可清空、密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应...
js实现简单的封装,封装方法: 1、将js代码放到一个自执行 的函数里面 2、创建一个构造函数 3、将函数暴露给外部 4、直接调用就好
javascript全局变量封装模块的应用,本文将详细介绍,需要了解更多的朋友可以参考下
本文实例为大家分享了JavaScript实现table切换插件的封装代码,供大家参考,具体内容如下 效果图: HTML部分: <div class="box"> <div id="tabBox"> <ul> <li class="liStyle">A</li> <li>B</li> <li>C...
本文实例为大家分享了vue3.0实现复选框组件封装的具体代码,供大家参考,具体内容如下 大致步骤: 实现组件本身的选中与不选中效果 实现组件的v-model指令 改造成 @vueuse/core 的函数写法 <!-- 组件基本...
众所周知,jquery在我们日常开发中的使用频率非常高,与js相比,我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服。...
在react项目中引入video.js开发视频播放功能,源代码包括对视频播放组件的封装,手写控制条相关功能,以及自定义样式,实现控制条和视频相分离的样式, 主要包括暂停/播放切换,倍速播放,切换上一个、下一个视频,...
js代码-封装try-catch函数,实现套用
为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈。。 关键代码如下: [removed] var currentActiveRow; //选中的颜色 var custom...
一个简单的ajax封装代码以及一个实例的增删改查的实现
Vue3+TypeScript封装axios并进行请求调用的实现 不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中使用TypeScript虽然短期内会增加一些开发成本,但是对于其需要长期维护的项目,...
WebUploader基础上的封装改善,一句代码全部实现
主要介绍了使用Require.js封装原生js轮播图的实现代码,需要的朋友可以参考下
JS的经典封装,有下载好的有实例(用JS实现~~~CSS圆角边框,模拟视窗,TAB选项卡,多样化折叠菜单,代码自动高亮,多样化的垂直菜单,图片倒影效果等等。。)
本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1、可以自己封装一个组件,也可以自己写,也可以复制以下代码 ...