JavaScript中链式调用之研习


Posted in Javascript onApril 07, 2011

一、对象链:方法体内返回对象实例自身(this)

function ClassA(){ 
this.prop1 = null; 
this.prop2 = null; 
this.prop3 = null; 
} 
ClassA.prototype = { 
method1 : function(p1){ 
this.prop1 = p1; 
return this; 
}, 
method2 : function(p2){ 
this.prop2 = p2; 
return this; 
}, 
method3 : function(p3){ 
this.prop3 = p3; 
return this; 
} 
}

定义了function/类ClassA。有三个属性/字段prop1,prop2,prop3,三个方法methed1,method2,method3分别设置prop1,prop2,prop3。
调用如下:
var obj = new ClassA(); 
obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2,prop3=3

可以看到对obj进行了连续三次操作,只要愿意ClassA的N多方法都这样定义,调用链会一直延续。
该方式缺点是链方法唯一地绑定于一种对象类型(ClaaaA),按这种方式实现链式操作,每定义一个类,其方法体中都要返回this。第二种方式可以解决这个问题。
二、函数链:对象传入后每次调用返回函数自身
/** 
* chain 精简版 
* @param {Object} obj 
*/ 
function chain(obj){ 
return function(){ 
var Self = arguments.callee; Self.obj = obj; 
if(arguments.length==0){ 
return Self.obj; 
} 
Self.obj[arguments[0]].apply(Self.obj,[].slice.call(arguments,1)); 
return Self; 
} 
} 
//定义的function/类ClassB 
function ClassB(){ 
this.prop1 = null; 
this.prop2 = null; 
this.prop3 = null; 
} 
ClassB.prototype = { 
method1 : function(p1){ 
this.prop1 = p1; 
}, 
method2 : function(p2){ 
this.prop2 = p2; 
}, 
method3 : function(p3){ 
this.prop3 = p3; 
} 
}

注意ClassB的method1,method2,method3中不再返回this了。
调用如下:
var obj = new ClassB(); 
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6

第一种方式3次调用后返回了对象自身,这里使用一个空"()"取回对象
// result -> prop1=4,prop2=5,prop3=6 
var result = chain(obj)('method1',4)('method2',5)('method3',6)();

这种方式写类时方法体中无须返回this,且可以对任何对象进行链式调用。
两种的调用方式:
obj 
.method1(arg1) 
.method2(arg2) 
.method3(arg3) 
... 
chain(obj) 
(method1,arg1) 
(method2,arg2) 
(method3,arg3) 
...

相关:
我的函数链之演变
Javascript 相关文章推荐
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 #Javascript
javascript 单例/单体模式(Singleton)
Apr 07 #Javascript
Safari5中alert的无限循环BUG
Apr 07 #Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 #Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 #Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 #Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 #Javascript
You might like
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python自动点赞功能的实现思路
2020/02/26 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
经典C++面试题一
2016/11/06 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
学校经典推荐信
2013/10/30 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
医药销售自荐书
2014/05/29 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
决心书格式范文
2015/09/23 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python