javascript 链式写法

更新日期: 2019-02-15阅读: 2.4k标签: 链式

熟悉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://fly63.com/article/detial/2026

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!