Javascript中的方法链（Method Chaining）介绍
更新时间：2015年03月15日 10:43:11 投稿：junjie
这篇文章主要介绍了Javascript中的方法链（Method Chaining）介绍,本文讲解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等内容,需要的朋友可以参考下
在寻找如何设计一个Javascript API的时候，发现了Method Chaining这个东西，方法链，看上去似乎很强大，也挺有意思的，而这个东西也是过去我们经常看到的。。
Javascript Method Chaining
在维基百科上有这样的解释:
复制代码 代码如下:
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.
拿翻译工具翻译了一下:
复制代码 代码如下:
方法链，也被称为命名参数法，是在面向对象的编程语言调用的调用多个方法的通用语法。每一个方法返回一个对象，允许电话连接到一起，在一个单一的声明。链接是语法糖，省去了中间变量的需要。方法链也被称为火车残骸中由于方法来相继发生的同一行以上的方法都锁在即使换行通常添加方法间的数量增加。
Method Chaining 使用
目测对于方法链用得最多的，应该就是jQuery了。
复制代码 代码如下:
// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');
我们可以用这样的用法来调用这个。jQuery严重依赖于链接。这使得它很容易调用的几个方法相同的选择。这也使得代码更清晰和防止执行相同的选择几次（提高性能）。没有方法链的时候则是下面的样子
复制代码 代码如下:
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
看上去和设计模式中的builder很像，不同的是，这里的p是方法，而不是一个类。
Javascript 方法链示例
在之前我们说到Javascript 高阶函数 的时候，说到的print('Hello')('World')，而这种用法的结果可能会变成这样子。
复制代码 代码如下:
function f(i){
return function(e){
i+=e;
return function(e){
i+=e;
return function(e){
alert(i+e);
};
};
};
};
f(1)(2)(3)(4); //10
这是网上的一个例子，然而也是我上一次写链式调用的作法。看上去弱爆了。
复制代码 代码如下:
var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
}
}
}
}
})();
func.add().result();
实际上应该在每个function都要有个return this，于是就有了:
复制代码 代码如下:
Func = (function() {
this.add = function(){
console.log('1');
return this;
};
this.result = function(){
console.log('2');
return this;
};
return this;
});
var func = new Func();
func.add().result();
当然我们也可以将最后的两句
复制代码 代码如下:
var func = new Func();
func.add().result();
变成
复制代码 代码如下:
new Func().add().result();
其他
最后作为一个迷惑的地方的小比较:
Method Chaining VS prototype Chaining
原型链与方法链在某些方面上是差不多的，不同的地方或许在于
1.原型链是需要用原型
2.方法链则是用方法
相关文章
本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最近碰到一个需求,要求获取video视频某一帧做封面图片,这里给大家总结下,这篇文章主要给大家介绍了关于js截取video视频某一帧做封面的简单案例,需要的朋友可以参考下2024-04-04
在前端开发中,处理动态变化的 DOM（文档对象模型）很是常见的需求,比如自动化测试中,可能需要监控 DOM 变化来验证测试条件,在用户填写表单时,某些字段需要即时验证等,所以本文给大家介绍了JS监听和响应DOM元素的变化的方法,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
一直在学习C++，也想阅读点开源的C++项目，发现网上对Google V8评价不错，于是上Github上找到了源代码，但在学习中遇到一个js数组排序的问题，下面这篇文章主要给大家介绍了通过V8源码说说一个关于JS数组排序的诡异问题的相关资料，需要的朋友可以参考下。2017-08-08
对于js中的对象的深拷贝在项目的开发中比较常用到,这篇文章主要给大家介绍了关于JS中不一样的深拷贝的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了详解如何在微信小程序开发中正确的使用vant ui组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了微信小程序实现打开并下载服务器上面的pdf文件到手机，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
今天小编就为大家分享一篇转换layUI的数据表格中的日期格式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了Javascript中浮点数相乘的一个解决方法,需要的朋友可以参考下2014-06-06
最新评论