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 命名规则 变量命名规则
Feb 25 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
微信小程序日历效果
Dec 29 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
利用Python抓取行政区划码的方法
2016/11/28 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python编程实现归并排序
2017/04/14 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python 占位符的使用方法详解
2019/07/10 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
python3访问字典里的值实例方法
2020/11/18 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
什么是View State?
2013/01/27 面试题
国际贸易专业推荐信
2013/11/15 职场文书
酒店副总岗位职责
2013/12/24 职场文书
六一节目主持词
2014/04/01 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
学校工会工作总结2015
2015/05/19 职场文书
刑事辩护词范文
2015/05/21 职场文书
给校长的建议书作文400字
2015/09/14 职场文书