在js中,我们可以通过prototype属性,实现继承,从而达到代码的复用。下面我们将从两个案例中介绍如何通过prototype属性实现继承。
案例一:给String类添加成员方法
#arguments 函数参数列表
String.prototype.format=function(){
if(!arguments) return this;
if(arguments.length==1){ // 只有1个数据
return this.replace(new RegExp("\\{0\\}", "g"), arguments[0]);
}
var tmp = this;
for(var i=0;i<arguments.length;i++){
tmp = tmp.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmp;
};
当浏览器解析该js脚本后,所有的字符串实例都具备了format方法。测试代码如下:
#输出i am zhangsan
var str = "i am {0}";
alert(str.format("zhangsan"));
案例二:jquery自定义插件
首先,理解jquery中的几个概念,jQuery.fn = jQuery.prototype是等价的,就像$是JQuery的简写一样,fn也是prototype的简写。
1,为JQuery添加类方法:
#为jQuery类添加类方法,可以理解为添加静态方法。
$.extend({
//初始化
init:function(){
},
//销毁
destory:function(){
}
})
等价于
(function($) {
$.init=function(){}
$.destory=function(){}
})(jQuery);
或者
jQuery.init=function(){}
jQuery.destory=function(){}
测试代码如下:
$.init();$.destory();
2,为JQuery添加成员方法(自定义插件属于此范畴):
jQuery.fn.extend = jQuery.prototype.extend,用于扩展JQuery成员方法。
#常用方式一
(function(){
//相加
$.fn.add = function(options){
var defaults = {a:0,b:0};//默认参数
var opts = $.extend(defaults,options);//options传入参数
return opts.a + opts.b;
}
//相减
$.fn.dev = function(options){
var defaults = {a:0,b:0};
var opts = $.extend(defaults,options);
return opts.a - opts.b;
}
})(jQuery);
#常用方式二
(function(){
$.fn.extend({
add : function(options){
var defaults = {a:0,b:0};//默认参数
var opts = $.extend(defaults,options);//options传入参数
return opts.a + opts.b;
},
dev : function(options){
var defaults = {a:0,b:0};
var opts = $.extend(defaults,options);
return opts.a - opts.b;
}
});
})(jQuery);
ps:这样每个JQuery对象都可以使用add和dev方法了;
测试示例如下:
var result = $(window).add({a:3});
alert(result);//输出3
ps:将dom文档对象强转为JQuery对象方式。示例:$(window)
$.extend(defaults,options);//传入则以传入的为准,未传入则以默认的为准;例如测试示例中,没有传入参数b,则以默认的为准(即b取值为0)。
分享到:
相关推荐
我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。
javascript控件开发之继承关系的源码
更有甚者,JavaScript属于使用原型式继承(我们会向你证明这其实是一个极大的优点)的少数语言之一。得益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些(但也可能更有效一些)的原型式继承...
js javascript zInherit 对象 继承
js没有特别明确的实现如何继承,但是能够通过特殊手段实现继承的,有四种方法
javascript中如何实现封装,继承和多态
js继承实现示例代码,js继承实现示例代码,js继承实现示例代码
javascript做为一门脚本语言,但面向对象思想在其中也有体现,本文档阐述和总结了js中继承的实现,及个方法的利弊!
Javascript继承机制原理 可以参考下
javascript 五种继承简介。
JS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txt
JS继承的实现方式转载整理。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
浅析Javascript原型继承,浅析Javascript原型继承
javascript原型继承,prototype的使用,可以像java一样继承
理解Javascript原型继承原理
js继承的用法, function initGrid(){ $('#'+instance.options.table).datagrid(instance.options); } initGrid(); return instance;
原型式继承 原型链式继承 借用构造函数(类式继承) 组合继承 寄生组合式继承 结束语 前言 对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时...
使用js实现继承的七种方式,详细讲解了js中的原型链继承,构造函数继承,组合继承(经典继承),原型式继承,寄生式继承,寄生组合式继承,以及ES6中的继承,描述原理以及实现和要点概述等。
javascript 继承派生等问题的资料,都是网上收集的,学会apply call 就懂js面向对象的原理了。
【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf