zoukankan      html  css  js  c++  java
  • javascript 链式写法

    熟悉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);
    
    // 控制台打印结果
    // 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

  • 相关阅读:
    python初体验-函数(1)
    python初体验-数值类型
    python初体验-常见错误类型
    动态规划专题——passage_1
    七夕——ORMAX(线段树)
    七夕——永远在一起(一维dp)
    动态规划4.4——背包问题
    动态规划4.3——最长公共子串问题
    动态规划4.2——子序列问题
    动态规划4.1——基础动态规划问题
  • 原文地址:https://www.cnblogs.com/7qin/p/10236853.html
Copyright © 2011-2022 走看看