javaScript链式调用

boredream 发布于2019-08-23 13:51 / 457人阅读

摘要：通过实现链式调用来理解链式调用是我们平常经常会用到，比如中的还有中的。直接用一个匿名函数返回一个的对象，然后赋值给并挂载到全局上，这样就实现了一个的链式调用了。

通过实现链式调用来理解

链式调用是我们平常经常会用到，比如JQuery中的$("id").eq(0), 还有lodash中的_.chain().push()。这些都是平常会用到的，但是都是已经封装好的，我们知道用起来很方便却不知道实现的原理是什么。
其实呢它并没有很神秘，只不过是一种语法招数，它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。

通过例子来分析链式调用

其实链式调用就是让一个类的每个方法都返回this值，从而达到链式调用
首先创建一个构造函数,把那些元素作为数组保存在一个实例属性中，并把所有定义在构造器函数的 prototype属性指向对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了进行链式调用的能力
我们来看一下这段例子

 $("div")
      .eq(0)
      .css("width", "200px")
      .show();

这其实就是一段简单JQuery代码，选择第一个div设置css样式，然后将它显示出来。

    function JQuery(selector) {
      this.elements = document.querySelectorAll(selector);
    }
    
    JQuery.prototype = {
      eq: function(index) {
        this.elements = [this.elements[index]]
        return this;
      },
      css: function(prop, value) {
        this.elements.forEach(function(el) {
          // 动态设置属性
          el.style[prop] = value;
        })
        return this;
      },
      show: function() {
        this.css("display", "block")
        return this;
      },
    }

这段代码很明显在prototype上的三个函数都返回了this，在函数中实现对应的功能也是直接使用this来获取值，然后修改this中的值再返回this，这样在下次调用的时候还是JQuery对象，从而实现了链式调用。
既然函数都是在原型链上，那么肯定需要创建一个对象才能去调用函数吧，而我们并没看到new JQuery，而且也没有看见$符号，那怎么才能使用呢。

window.$ = function(selector) {
  return new JQuery(selector);
}
$("div")
  .eq(0)
  .css("width", "200px")
  .show();

直接用一个匿名函数返回一个new JQuery()的对象，然后赋值给$并挂载到全局上，这样就实现了一个JQuery的链式调用了。

服务器托管云服务器调用JavaScript方法 javascript调用函数 vc调用javascript php调用javascript

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

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

javaScript链式调用原理以及加法实现

摘要：相信很多小伙伴在面试的过程中都被问过链式调用的原理，甚至有些面试官还会让你用其实现例如加法操作，举例第一次看到这个题目时，或许你没有什么头绪，不要紧，让我们慢慢来首先，大家还是否记得在使用时，我们会经常这样去操作一个节点这是怎么做到的原理很相信很多小伙伴在面试的过程中都被问过js链式调用的原理，甚至有些面试官还会让你用其实现例如加法操作，举例： add(1)(2)(3) //6...

LuDongWei 2019-08-20 15:10 评论0 收藏0
听飞狐聊JavaScript设计模式系列14

摘要：本回内容介绍上一回，聊了聊状态模式，并介绍了一下介一回，聊链式编程，模拟一下，再模拟一下封装一个库。这一回，主要聊了链式调用，模拟了，尤其是，希望大家能喜欢这次代码分享。下一回，聊一聊的策略模式。本回内容介绍上一回，聊了聊状态模式（State），并介绍了一下vue.js；介一回，聊链式编程，模拟一下jQuery，再模拟一下underscore.js,封装一个库。 1. 链式调用 (...

fox_soyoung 2019-08-19 17:20 评论0 收藏0
JavaScript 设计模式读书笔记(四)——单体模式和链式调用

摘要：单体模式在多种设计模式中，单体模式是最简单，也是最基础的设计模式。和之前说到的下划线表示私用成员方法比较起来，最大的优点就是可以创建真正的私用成员，使其不会在构造函数之外被随意修改。单体模式在多种Javascript设计模式中，单体模式是最简单，也是最基础的设计模式。它基础到似乎不太像是一种设计模式，因为我们在编写代码的过程中随时都会用到，并不需要过多思考，这是它简单的一面。同时...

DevWiki 2019-08-19 14:42 评论0 收藏0
链式调用与事件循环--一道JavaScript面试题的思考

摘要：最后画几张粗糙的图，简单描述一下这个执行的过程因为是链式调用，所以在链上的都会入栈然后执行，额，执行栈少画了和。。。前言：昨天在群里讨(jin)论(chui)技(niu)术(pi)，有位老铁发了一道他面的某公司面试题，顺手保存了。今早花了一点时间把这题做了出来，发现挺有意思的，决定在今天认真工（hua)作(shui)前，与大家分享我的解题方案和思考过程。题目如下（可以自己先思考一会...

wow_worktile 2019-08-23 15:04 评论0 收藏0
javascript设计模式链式模式学习

摘要：链式模式通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。我们试着修改上面的函数然后执行为什么会报错呢因为这里，因为这里返回的指向的是，而不是的上并没有这个方法。链式模式：通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用，对该对象的多次引用。 jquery是基于原型继承，每个原型下的方法都返回当前对象...

shiina 2019-08-21 11:54 评论0 收藏0