JS 链式调用原理及实践

BingqiChen 发布于2019-08-21 17:26 / 1188人阅读

摘要：一链式编码好处同一对象多次其属性或方法的时候，我们需要多次书写对象进行或操作链式调用是一种简化此过程的一种编码方式，使代码简洁易读。

一、链式编码
好处
同一对象多次其属性或方法的时候，我们需要多次书写对象进行“.” 或 () 操作；链式调用是一种简化此过程的一种编码方式，使代码简洁、易读。

举个栗子（深刻不是很贴切的）：日常餐厅取餐，通常我们一次拿取想要的食物一起结账，如果每样食物要分开取餐结账估计内心的草泥马要躁动起来了。

常用场景

#jQuery的Dom操作
$("select").on("click", callback)
           .on("change", callback);

#gulp编译
gulp.src("/path/to/**.less")
    .pipe(less())
    .pipe(cssmin())

（废话不多说，切入正题…… ）

二、链式编码的原理
链式调用原理就是作用域链；实现需要做的工作；

对象方法的处理（操作方法）

处理完成返回对象的引用（操作对象）
第2步链式实现的方式：
<1> this的作用域链，jQuery的实现方式；【示例1】
<2> 返回对象本身, 同this的区别就是显示返回链式对象；【示例2】
<3> 闭包返回对象通过调用覆盖valueOf方法实现，副作用获取结果需要调用valueOf;（此种方法适用于操作方法有相互依赖的情况下使用）【示例3】

示例1 根据一个人的年龄获取其年龄段在线效果

person.set(10).get(); // 我还是个少年

var Person = function() {};
Person.prototype.set = function (age){
    this.age = 10; 
    return this; //this调用位置决定其词法作用域
}
Person.prototype.get = function (){
    var age = this.age;
    if(age < 6){
        return "我还是个宝宝";
    }else if(age < 18){
        return "我还是个少年";
    }else{
     //……
    }
}

var person = new Person();
person.set(10).get(); // "我还是个少年"

示例2 示例1的实现在线效果

var person = {
    set: function (age){
        this.age = 10;  //this调用位置决定其词法作用域
        return person;
    },
    get: function (){
        var age = this.age;
        if(age < 6){
            return "我还是个宝宝";
        }else if(age < 18){
            return "我还是个少年";
        }else{
         //……
        }
    }
}

示例3 实现词语接龙游戏拼接，依赖上次的拼接结果胸有成竹 -> 竹报平安 -> 安富尊荣在线效果

wordschain("胸有成竹")("竹报平安")("安富尊荣").valueOf()

function wordschain(word){
    var words = word;
    function chain(word){
        words += " -> " + word;
        return chain; //操作对象本身
    }
    // valueOf 对象原始值chain [了解更多][5]
    chain.valueOf = function(){
        return words;
    }
    return chain;
}

GPU云服务器云服务器 ddos攻击原理及防范人工智能原理及应用单片机原理及接口技术 java线程池技术及原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89515.html

从0开始撸一个Promise（一）

摘要：说白了，就是给声明的添加一个包含空的对象，再由函数返回这个空。如此构成一个层层包裹的链。四首先本质是一个递归函数，结束条件是，即终止到未挂载对象的子为止。可以看到这个函数的作用就是根据属性逐个触发链中的或函数。背景 Promise是一种非常实用的异步编程方案，本文对于Promise源码的分析可以增进读者对于Promise原理的理解，以后不再害怕异步编程，不用担心callback he...

MSchumi 2019-08-22 16:39 评论0 收藏0
JavaScript 工作原理之四－事件循环及异步编程的出现和 5 种更好的 async/await

摘要：函数会在之后的某个时刻触发事件定时器。事件循环中的这样一次遍历被称为一个。执行完毕并出栈。当定时器过期，宿主环境会把回调函数添加至事件循环队列中，然后，在未来的某个取出并执行该事件。原文请查阅这里，略有改动。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第四章。现在，我们将会通过回顾单线程环境下编程的弊端及如何克服这些困难以创建令人惊叹...

maochunguang 2019-08-22 17:06 评论0 收藏0
Java面试通关要点汇总集

摘要：本文会以引出问题为主，后面有时间的话，笔者陆续会抽些重要的知识点进行详细的剖析与解答。敬请关注服务端思维微信公众号，获取最新文章。原文地址：梁桂钊的博客博客地址：http://blog.720ui.com 这里，笔者结合自己过往的面试经验，整理了一些核心的知识清单，帮助读者更好地回顾与复习 Java 服务端核心技术。本文会以引出问题为主，后面有时间的话，笔者陆续会抽些重要的知识点进...

gougoujiang 2019-08-15 14:26 评论0 收藏0
2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

wwolf 2019-08-26 11:55 评论0 收藏0