JavaScript中的链式调用

分类：设计模式作者：编程之家用户

链模式

链模式是一种链式调用的方式，准确来说不属于通常定义的设计模式范畴，但链式调用是一种非常有用的代码构建技巧。

描述

链式调用在JavaScript语言中很常见，如jQuery、Promise等，都是使用的链式调用，当我们在调用同一对象多次其属性或方法的时候，我们需要多次书写对象进行.或()操作，链式调用是一种简化此过程的一种编码方式，使代码简洁、易读。
链式调用通常有以下几种实现方式，但是本质上相似，都是通过返回对象供之后进行调用。

  • this的作用域链，jQuery的实现方式，通常链式调用都是采用这种方式。
  • 返回对象本身,同this的区别就是显示返回链式对象。
  • 闭包返回对象的方式实现，这种方式与柯里化有相似之处。
var Person = function() {};
Person.prototype.setAge = function(age){
    this.age = age; 
    return this;
}
Person.prototype.setWeight = function(weight){
    this.weight = weight; 
    return this;
}
Person.prototype.get = function(){
    return `{age: ${this.age},weight: ${this.weight}}`;
}

var person = new Person();
var des = person.setAge(10).setWeight(30).get();
console.log(des); // {age: 10,weight: 30}

var person = {
    age: null,weight: null,setAge: function(age){
        this.age = age; 
        return this;
    },setWeight: function(weight){
        this.weight = weight; 
        return this;
    },get: function(){
        return `{age: ${this.age},weight: ${this.weight}}`;
    }
};
var des = person.setAge(10).setWeight(30).get();
console.log(des); // {age: 10,weight: 30}

function numsChain(num){
    var nums = num;
    function chain(num){
        nums = `${nums} -> ${num}`;
        return chain;
    }
    chain.get = () => nums;
    return chain;
}
var des = numsChain(1)(2)(3).get();
console.log(des); // 1 -> 2 -> 3

可选链操作符

说到链式调用，就有必要说一下JavaScript的可选链操作符，属于ES2020新特性运算符?.、??、??=，可选链操作符?.允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于在引用为空nullish即null或者undefined的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

语法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

示例

const obj = {a: {}};
console.log(obj.a); // {}
console.log(obj.a.b); // undefined
// console.log(obj.a.b.c); // Uncaught TypeError: Cannot read property 'c' of undefined
console.log(obj && obj.a); // {}
console.log(obj && obj.a && obj.a.b && obj.a.b.c); // undefined
console.log(obj?.a?.b?.c); // undefined

const test = void 0;
const prop = "a";
console.log(test); // undefined
console.log(test?.a); // undefined
console.log(test?.[prop]); // undefined
console.log(test?.[0]); // undefined
console.log(test?.()); // undefined

jQuery中的链式调用

jQuery是一个高端而不失奢华的框架，其中有许多非常精彩的方法和逻辑，虽然现在非常流行于类似于Vue、React的MVVM模式的框架，但是jQuery的设计实在是棒，非常值得学习，在这里以最基础的实例化jQuery为例探查一下jQuery如何通过this实现的链式调用。
首先定义一个最基本的类，通过原型链去继承方法。

function _jQuery(){}
_jQuery.prototype = {
    constructor: _jQuery,length: 2,size: function(){
        return this.length;
    }
}

var instance = new _jQuery();
console.log(instance.size()); // 2
// _jQuery.size() // Uncaught TypeError: _jQuery.size is not a function
// _jQuery().size() / /Uncaught TypeError: Cannot read property 'size' of undefined

通过定义一个类并且实现实例化之后，在实例之间可以共享原型上的方法，而直接通过_jQuery类直接去调用显然是不行的，抛出的第一种异常是因为在_jQuery类上不存在静态方法，第二种异常是因为_jQuery作为函数执行后未返回值，通过这里可以看出jQuery在通过$()方式调用的时候是返回了一个包含多个方法的对象的，而只是通过自己是访问不到的，我们就借助另一个变量去访问。

function _jQuery(){
    return  _fn;
}
var _fn = _jQuery.prototype = {
    constructor: _jQuery,size: function(){
        return this.length;
    }
}
console.log(_jQuery().size()); // 2

实际上jQuery为了减少变量的创建，直接将_fn看做了_jQuery的一个属性。

function _jQuery(){
    return  _jQuery.fn;
}
_jQuery.fn = _jQuery.prototype = {
    constructor: _jQuery,size: function(){
        return this.length;
    }
}
console.log(_jQuery().size()); // 2

到这里确实能够实现_jQuery()方式调用原型上的方法，但是在jQuery中$()的主要目标还是作为选择器用来选择元素，而现在返回的是一个_jQuery.fn对象，显然是达不到要求的，为了能够取得返回的元素，那就在原型上定义一个init方法去获取元素，这里为了省事直接使用了document.querySelector，实际上jQuery的选择器构建是很复杂的。

function _jQuery(selector){
    return  _jQuery.fn.init(selector);
}
_jQuery.fn = _jQuery.prototype = {
    constructor: _jQuery,init: function(selector){
        return document.querySelector(selector);
    },length: 3,size: function(){
        return this.length;
    }
}
console.log(_jQuery("body")); // <body>...</body>

但是似乎这样又把链式调用的this给漏掉了，这里就需要利用this的指向了，因为在调用时this总是指向调用他的对象，所以我们在这里将选择的元素挂载到this对象上即可。

function _jQuery(selector){
    return  _jQuery.fn.init(selector);
}
_jQuery.fn = _jQuery.prototype = {
    constructor: _jQuery,init: function(selector){
        this[0] = document.querySelector(selector);
        this.length = 1;
        return this;
    },size: function(){
        return this.length;
    }
}
var body = _jQuery("body");
console.log(body); // {0: body,length: 1,constructor: ƒ,init: ƒ,size: ƒ}
console.log(body.size()); // 1
console.log(_jQuery.fn); // {0: body,size: ƒ}

但是此时又出现了一个问题，我们的选择器选择的元素是直接挂载到了_jQuery.fn上，这样的话由于原型是共享的，在之后的定义的选择器就会将前边定义的选择器覆盖掉，这样显然是不行的，于是我们使用new操作符新建一个对象。

function _jQuery(selector){
    return new _jQuery.fn.init(selector);
}
_jQuery.fn = _jQuery.prototype = {
    constructor: _jQuery,size: function(){
        return this.length;
    }
}
var body = _jQuery("body");
console.log(body); // init {0: body,length: 1}
// console.log(body.size()); // Uncaught TypeError: body.size is not a function

这样又出现了问题，当我们使用new实例化_jQuery.fn.init时返回的this指向的是_jQuery.fn.init的实例，我们就不能进行链式调用了，jQuery用了一个非常巧妙的方法解决了这个问题，直接将_jQuery.fn.init的原型指向_jQuery.prototype，虽然会有循环引用的问题，但是相对来说这一点性能消耗并不算什么，由此我们完成了jQuery选择器以及链式调用的实现。

function _jQuery(selector){
    return new _jQuery.fn.init(selector);
}
_jQuery.fn = _jQuery.prototype = {
    constructor: _jQuery,size: function(){
        return this.length;
    }
}
_jQuery.fn.init.prototype = _jQuery.fn;
var body = _jQuery("body");
console.log(body); // init {0: body,length: 1}
console.log(body.size()); // 1
console.log(_jQuery.fn.init.prototype.init.prototype.init.prototype === _jQuery.fn); // true

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/110512501
https://juejin.cn/post/6844904030221631495
https://segmentfault.com/a/1190000011863232
https://github.com/songjinzhong/JQuerySource
https://leohxj.gitbooks.io/front-end-database/content/jQuery/jQuery-source-code/index.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

什么是设计模式？Design pattern--和生活结合更好理解
什么是设计模式一套被反复使用、多数人知晓的、经过分类编目的、代码 设计经验 的总结；使用设计模式是为了 可重用 代码、让代码 更容易 被他人理解、保证代码 可靠性；设计模式使代码编制  真正工程化；设计模式使软件工程的 基石脉络， 如同大厦的结构一样；并不直接用来完成代码的编写，而是 描述 在各种不同情况下，要怎么解决问题的一种方案；能使不稳定依赖于相对稳定、具体依赖于相对抽象，避免引
面向对象设计原则一——单一职责原则
单一职责原则定义（Single Responsibility Principle，SRP）一个对象应该只包含 单一的职责，并且该职责被完整地封装在一个类中。Every  Object should have  a single responsibility, and that responsibility should be entirely encapsulated by t
十分钟理解Java中的动态代理----强烈推荐
动态代理和CGLib代理分不清吗，看看这篇文章，写的非常好，强烈推荐。原文截图*************************************************************************************************************************原文文本************
适配器模式-让不兼容的接口得以适配
适配器模式将一个类的接口转换成客户期望的另一个接口，使得原本接口不兼容的类可以相互合作。
策略模式-定义一个算法族
策略模式定义了一系列算法族，并封装在类中，它们之间可以互相替换，此模式让算法的变化独立于使用算法的客户。
设计模式之高质量代码
设计模式讲的是如何编写可扩展、可维护、可读的高质量代码，它是针对软件开发中经常遇到的一些设计问题，总结出来的一套通用的解决方案。
模板方法模式-封装一套算法流程
模板方法模式在一个方法中定义一个算法的骨架，而将一些步骤延迟到子类中，使得子类可以在不改变算法结构的情况下，重新定义算法中的某些步骤。
迭代器模式-统一集合的遍历方式
迭代器模式提供了一种方法，用于遍历集合对象中的元素，而又不暴露其内部的细节。
外观模式-简化子系统的复杂性
外观模式又叫门面模式，它提供了一个统一的（高层）接口，用来访问子系统中的一群接口，使得子系统更容易使用。
单例模式的五种实现方式及优缺点
单例模式（Singleton Design Pattern）保证一个类只能有一个实例，并提供一个全局访问点。
组合模式-统一的处理个别对象与组合对象
组合模式可以将对象组合成树形结构来表示“整体-部分”的层次结构，使得客户可以用一致的方式处理个别对象和对象组合。
装饰者模式-动态的包装原有对象的行为
装饰者模式能够更灵活的，动态的给对象添加其它功能，而不需要修改任何现有的底层代码。
观察者模式-将消息通知给观察者
观察者模式（Observer Design Pattern）定义了对象之间的一对多依赖，当对象状态改变的时候，所有依赖者都会自动收到通知。
代理模式-访问对象的代理而非其本身
代理模式为对象提供一个代理，来控制对该对象的访问。代理模式在不改变原始类代码的情况下，通过引入代理类来给原始类附加功能。
工厂模式-将对象的创建封装起来
工厂模式（Factory Design Pattern）可细分为三种，分别是简单工厂，工厂方法和抽象工厂，它们都是为了更好的创建对象。
状态模式-将状态和行为封装成对象
状态模式允许对象在内部状态改变时，改变它的行为，对象看起来好像改变了它的类。
命令模式-将请求封装成对象
命令模式将请求封装为对象，能够支持请求的排队执行、记录日志、撤销等功能。
【设计模式】备忘录模式
备忘录模式（Memento Pattern）保存一个对象的某个状态，以便在适当的时候恢复对象。备忘录模式属于行为型模式。 基本介绍 **意图：**在不破坏封装性的前提下，捕获一个对象的内部状态，并在该
【设计模式】职责链模式
顾名思义，责任链模式（Chain of Responsibility Pattern）为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为
【设计模式】享元模式
享元模式（Flyweight Pattern）（轻量级）（共享元素）主要用于减少创建对象的数量，以减少内存占用和提高性能。这种类型的设计模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot