熟悉Jquery的同学都知道,它对dom的操作基本都链式调用的写法,这种给人感觉就是很简洁,易懂,而且最大的好处就是避免多次重复使用一个对象变量。

链式的实现方式:
链式操作是在对象的方法中通过最后返回自身对象(return this),返回的对象就可以继续调用它里面的方法。那么,简单实现一下:

var o ={f:function(r){console.log(+new Date , r); return this;}};

o.f(1).f(2).f(3).f(4).f(5).f(6).f(7).f(8).f(9);

再例如:

var a = {
b: function(bb) {
console.log(bb);
return this;
},
c: function(cc) {
console.log(cc)
return this;
},
d: function(dd) {
console.log(dd)
return this;
}
}
a.b(1).c(2).d(3);

改造为工厂模式
通过一个函数,利用它来创建了一个对象,然后返回这个对象。代码如下:

function Obj() {}
Obj.prototype ={//扩展它的prototype
setNum:function (num) {
this.num = num;
return this;
},
fn_a:function(){
this.num++;
return this;
},
fn_b:function(pram){
this.num=this.num*pram;
return this;
},
getNum:function (){
return this.num;
},
};
function I() {//工厂函数
return new Obj();
}
var num=I().setNum(1).fn_a().fn_b(5).getNum();
console.log(num);

其实很简单就是通过return this实现的,当某个函数执行完毕,在把执行的结果返回,这样其他的函数就能继续调用了

原生js也是支持链式调用的,比如说:

    var arr = [1,2,3,4,5];
arr.reverse().join("").split();
console.log(arr);

在原生js中,链式调用还可以这样用

    function show(str) {
console.log(str);
return show;
}
show(123)(456)(789); // 控制台打印结果
//
//
//

我们发现,不写函数名称只写()也可以实现函数执行,那我们这样写可以不可以呢

    function show(str) {
console.log(str);
return show;
}(123)

原则上是可以的,但是这样不符合js语法,会报错

我们给函数外加上括号

    (function show(str) {
console.log(str);
return show;
})(123)(123)(123)(123)

这样就OK了,一个自执行的函数
但是这样写在严格模式下回报错,我们把函数赋值给一个变量就好了

   var a = (function show(str) {
console.log(str);
return show;
})(123)

*注意:自执行函数不会被内存机制回收

https://www.jianshu.com/p/a84093c9c144

https://www.cnblogs.com/JChen666/p/3614971.html

javascript 链式写法的更多相关文章

  1. JQuery事件的链式写法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. jquery事件链式写法

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  4. Jquery | 基础 | 事件的链式写法

    $(".title").click(function () { $(this).addClass("curcol").next(".content&q ...

  5. Javascript 链式操作以及流程控制

    春节过后,感觉过年吃的油腻的食品转化的脂肪都长到 脑子去了. 根本转不动啊 上班第一天 实在是写不动代码了, 顺手打开多天为看的 收件箱,查看查看邮件,看看春节期间 风云变幻的前端圈又有哪些大事发生. ...

  6. Delphi Sysem.JSON 链式写法(转全能中间件)

    链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...

  7. ajax操作的链式写法

    ajax操作的传统写法: $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenEr ...

  8. Java 链式写法

    Java链式写法,子类继承父类的属性,也可以返回子类的对象,只是需要重写基类的Set方法 public class MyLS { public static void main(String[] ar ...

  9. Delphi Sysem.JSON 链式写法

    链式写法有很多优点:连贯.语意集中.简洁.一气呵成.可读性强.比如要把 3.1415926 中的 59 提取为一个整数:Pi.ToString().Substring(5,2).ToInteger() ...

随机推荐

  1. 动态赋id

  2. 清空select标签中option选项的3种不同方式

    方法一 代码如下:document.getElementById("selectid").options.length = 0; 方法二 代码如下:document.formNam ...

  3. eslint 代码规范2

    eslint 规则修改 需要修改规则:文件[.eslintrc.js] 在句末是不能有分号的,若想加分号, 报错: 添加代码: 'semi': ['error', 'always'] 不要使用制表符. ...

  4. (转)以太坊(Ethereum ETH)的奖励机制

    如果问一块显卡它最恨什么,那么答案一定是以太坊.以太坊,矿工为之疯狂,显卡为之颤抖,游戏玩家为之骂娘. 然而,除了购买矿机.连接矿池.卖币套现之外,是否有人关注过以太坊的奖励机制呢? 且听我慢慢道来. ...

  5. 用python 替换文件中的git地址

    有个需求要替换文件中git地址,要替换成的git地址是一个变量 本来想用sed替换但是git地址中有斜杠符号 需要转义,提前知道还好弄,如果是变量就不好处理了 #!/usr/bin/python3 # ...

  6. git的reset的理解

    git的reset的理解 1.在理解reset命令之前,先对git中涉及到的与该reset命令相关概念进行说明和解释HEAD这是当前分支版本顶端的别名,也就是在当前分支你最近的一个提交Indexind ...

  7. numpy.newaxis()

    np.newaxis 功能:为numpy.ndarray(多维数组)增加一个轴 np.newaxis 在使用和功能上等价于 None,查看源码发现:newaxis = None,其实就是 None 的 ...

  8. 28.json数组,select选择,input输出对应数据

    效果:选择对应的车类,下面的input会实时出现车价. html: <form action="" class="priceModelform1"> ...

  9. 使用mysqlbinlog从二进制日志文件中查询mysql执行过的sql语句 (原)

    前提MySQL开启了binlog日志操作1. 查看MySQL是否开启binlog(进mysql操作) mysql> show variables like 'log_bin%';       2 ...

  10. 那种多空计算方法更正确呢?——从此图看应该是TEST005

    那种方法计算多空逆转更正确呢?——从此图1看应该是TEST005,但是实际上是ZCL_多空! TEST005具有滞后性!也就是说跌了一些在报警,可能已经跌了10%(如图2) ZCL_多空:当计算结果和 ...