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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
一个可复用的vue分页组件
May 15 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
JavaScript使用localStorage存储数据
Sep 25 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php self,$this,const,static,->的使用
2009/10/22 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
python设置检查点简单实现代码
2014/07/01 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
django中瀑布流写法实例代码
2019/10/14 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
大学生简短的自我评价分享
2014/02/20 职场文书
采购部长岗位职责
2014/06/13 职场文书
整改落实自查报告
2014/11/05 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
旅游安全责任协议书
2016/03/22 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
anaconda python3.8安装后降级
2021/06/11 Python