Javascript中的方法链（Method 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.方法链则是用方法

赞 (0)

相关推荐

  • JAVA中实现链式操作（方法链）的简单例子

    在使用jQuery时候,我们经常会看到或者使用到方法链,例如: 复制代码 代码如下: $("#p1").css("color","red").slideUp(2000).slideDown(2000); 这段代码的意思是选择器选择id为p1的html标签,颜色变红,之后slideup,再slidedown. 自然是可以将这几个方法分开写,但是不分开的话不仅有很好的易读性,代码量也会有减少,那么何乐而不为? 这种调用函数的方式在jQuery中称为&

  • Python中方法链的使用方法

    方法链(method chaining)是面向对象的编程语言中的一种常见语法,可以让开发者在只引用对象一次的情况下,对同一个对象进行多次方法调用.举个例子: 假设我们有一个Foo类,其中包含有两个方法--bar和baz. 我们创建一个Foo类的实例: foo = Foo() 如果不使用方法链,要想连续调用对象foo的bar和baz方法的话,我们得这样做: foo.bar() # Call method bar() on object foo. foo.baz() # Call method ba

  • PHP中其实也可以用方法链

    简单示意一下: 复制代码 代码如下: <?php class test { private $_name = ''; public function setName($name) { $this->_name = $name; return $this; } public function getName() { echo $this->_name . "\n"; return $this; } } $link = new test(); // 方法链 $link-&

  • Javascript中的方法链（Method 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 i

  • JavaScript中的运算符种类及其规则介绍

    JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的运算符. 一.JavaScript运算符的种类 1.算术运算符:+ . - .* . / . % . -(一元取反) . ++ . -- 2.等同全同运算符:== . ===. !== . !=== 3.比较运算符:< . > . <= . >= 4.字符串运算符:< .

  • javascript中内置对象Math的介绍及用法案例

    javascript中内置对象Math的介绍及用法案例

    目录 前言 Math概述 Math中常用函数的用法 1.绝对值方法 2.三个取整方法 3.求最大值/最小值 4.随机数 结语 前言 今天总结一下javascript 内置对象Math中的函数用法,顺带写一下常见的案例. Math概述 Math 对象不是构造函数,它具有数学常数和函数的属性和方法.跟数学相关的运算(求绝对值,取整.最大值等)可以使用 Math 中的成员. Math中常用函数的用法 Math.PI //圆周率Math.floor () //向下取整Math.ceil () //向上取

  • JavaScript中对象property的删除方法介绍

    JavaScript中,可以使用delete操作符来删除对象中的property: 复制代码 代码如下: var t = {a:42, b:26}; console.log(t);//Object {a=42, b=26} delete t.a; console.log(t);//Object {b=26} 这种property删除操作的局限性在于:delete操作符只能删除对象自身所有的property,无法删除其从prototype对象处继承而来的property.如果想删除prototyp

  • JavaScript中的null和undefined区别介绍

    JavaScript中存在2个代表信息不存在的特殊值:null和undefined.个人认为可以从以下角度来理解这两个特殊值之间的区别: 1.null代表有存储信息的容器(比如之前被赋过值的变量),但该容器中的内容为空. 2.undefined代表不存在用于存储信息的容器. JavaScript中的null与其它多数编程语言中的null没有什么区别,基本用于表示信息值为空:而在JavaScript中下述情况下表达式返回结果为undefined: 1.从未被赋过值的变量. 2.访问某个对象不存在的

  • JavaScript中的逻辑判断符&&、||与!介绍

    与C.Java等语言一样,JavaScript中可以用&&.||.!三个逻辑判断符来对boolean值进行逻辑判断.与C.Java不同的是,JavaScript中逻辑与(&&)和逻辑或(||)操作符可以应用在任何值上,而操作结束后返回的也不一定是boolean值. 逻辑与&&的处理规则 JavaScript中&&的处理规则是这样的: 1.判断第一个值是否为Falsy.如果为Falsy,则直接返回第一个值(不一定为boolean类型). 2.如

  • JavaScript中的变量定义与储存介绍

    与C.Java等编程语言不同,JavaScript中的变量是无类型的,所有的变量定义使用的关键词均为var: 复制代码 代码如下: var a; var m, n; var x=42, y="test"; 如果定义变量后未对该变量进行赋值,那么该变量的值为undefined.如上面代码中的a.m.n三个变量的值均为undefined. 由于JS中变量是无类型的,因此完全可以对同一个变量进行不同类型的赋值,如: 复制代码 代码如下: var b = "temp"; c

  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    编写JavaScript程序时,如果需要知道某段代码的执行时间,可以使用console.time().不过,在分析逻辑较为复杂的JavaScript程序,试图从中找出性能瓶颈的时候,console.time()就不适用了 - 深入分析逻辑较为复杂的JavaScript程序的运行就意味着插入大量的console.time()语句,而这无疑是不可接受的.对于复杂逻辑的JavaScript程序调优,正确的方法是使用console.profile(). 浏览器支持 安装了Firebug插件的Firefo

  • JavaScript中的16进制字符介绍

    前段时间看<JavaScript高级程序设计>终于找到了一点点介绍: \xnn 以十六进制代码nn表示的一个字符(n:0-F) \unnn以十六进制代码表示的一个Unicode字符(n:0-F) 今天由于一个自己的一个需求需要知道一些汉字的十六进制表示,因此自己写了两个方法,可以将文字转换为16进制的表示形式,也可以将16进制代码转换回汉字.方法如下: 复制代码 代码如下: //将文字转换为16进制 function textToSix(str) { return escape(str).re

  • 关于JavaScript中name的意义冲突示例介绍

    关于JavaScript中name的意义冲突示例介绍

    在昨天的<Javascript权威指南>学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){} var per = new Person; Object.defineProperties(per, { "nickName": { value:"

随机推荐