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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
js密码强度检测
Jan 07 Javascript
理解javascript模块化
Mar 28 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
微信小程序实现手势滑动效果
Aug 26 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python的UTC时间转换讲解
2019/02/26 Python
python 利用toapi库自动生成api
2020/10/19 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
社区禁毒工作方案
2014/06/02 职场文书
小学生毕业评语
2014/12/26 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
《海上日出》教学反思
2016/02/23 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript