✏️
ougege
  • README
  • Docs
    • index
    • Articles
      • AI
        • 体验Chrome AI
        • 体验Cloudflare Workers AI
        • 体验deepseek
      • CSS
        • CSS优化-PurgeCSS
        • 实用效果
        • 开发常用样式
      • Deepin
        • deepin20安装mysql
        • deepin使用tensorflow入门机器学习
        • deepin安装cuda和cuDNN
        • deepin安装lamp
        • deepin安装nvidia驱动
        • deepin安装oh my Zsh
        • deepin安装p7zip
        • deepin换源
        • 安装deepin系统后要做的事
      • Docker
        • CI/CD搭建配置
        • deepin搭建docker环境
        • docker安装和使用gitlab
        • docker搭建nginx+php环境
      • Essay
        • IOS申请邓白氏编码
        • Markdown-Mermaid
        • Markdown Use
        • webview白屏的问题查找和修复
        • 前端开发对接问题和解决办法汇总
        • 国务院机构改革方案
        • 国家级智库
        • 实用网站推荐
        • 常用Markdown数学公式语法
        • 强烈推荐前端要安装的vscode扩展
        • 新建销售计划-页面卡死问题分析
        • 海淘入坑手册
        • 竞品研究
        • 足球知识速成
      • Git
        • GitBook安装和常用命令
        • GitKraken免费版本
        • Git安装和配置
        • Git异常处理
        • Git Worktree使用
        • 前端工程化相关的实用git命令
      • JS
        • ESM模块导出方式对比
        • Emoji多端统一处理
        • JS发布订阅模式
        • JS性能优化
        • JS标准内置对象
        • JS链式调用原理
        • Promise介绍和使用
        • Range的使用
        • Vue+Oauth登录实现
        • Vue实现富文本插入Emoji
        • chrome扩展入门
        • es5新特性
        • es6常用特性
        • es常用片段
        • uniapp使用eslint校验代码
        • 与移动端通信
        • 优秀js库moment
        • 使用vue-socketio
        • 实现一个中间件
        • 小程序webview调试
        • 常用snippets
        • 常用正则
        • 常用的设计模式
        • 微信jssdk封装使用
        • 浏览器宏任务和微任务
        • 浏览器的5种Observer
        • 深入理解赋值、浅拷贝、深拷贝
        • 解析vue指令clickoutside源码
        • 键盘事件与KeyBoardWrapper交互
        • 高德地图常用方法封装
        • 高阶函数片段
      • Network
        • 使用Lighthouse分析前端性能
        • 前后端启用https
        • 宝塔nginx安装ngx_brotli
        • 比较gz与br加载速度
        • 浏览器https提示不安全
        • 浏览器提示HSTS
        • 简单使用tcpdump
        • 静态资源gzip优化
      • Node
        • CommonJS模块导出方式对比
        • Taro command not found 多平台解决方案
        • koa使用和API实现
        • node安装报错Unexpected-token
        • 使用nvm和nrm
        • 使用uniapp给小程序添加云函数
        • 使用verdaccio搭建本地npm仓库
        • 使用vue-cli搭建vue项目
        • 安装Node.js和npm配置
        • 编译成cjs和mjs的思路解析
        • 让你的npmPackage同时支持cjs和mjs
        • 通过GithubAction将内容部署到vps
      • Python
        • Python源管理
        • Python版本管理
        • mitmproxy抓包
        • 微信公众平台开发爬坑经历
      • Shell
        • Ubuntu安装deepin桌面环境
        • Ubuntu安装flatpak软件
        • Ubuntu安装wireshark
        • Ubuntu常见问题汇总
        • dell G3装系统无法识别第二块硬盘
        • linux下virtualbox用gho还原系统
        • mysql常用命令
        • navicat连接一键集成环境的mysql
        • nginx常用命令
        • pm2常用命令
        • virtualbox虚拟机和宿主机互相复制粘贴
        • vps内资源通过mega快传到本地
        • vps报错temporary failure in name resolution
        • vscode修改文件监控数
        • windows+linux双系统引导修复
        • zsh常用插件和命令
        • 一键搭建ChatGPT web版
        • 使用V2ray,CloudFlare Warp解锁GPT
        • 使用vscode进行java开发
        • 利用zx和SSHKey发布代码到服务器
        • 反爬虫一些方案总结和尝试
        • 安装1Panel
        • 安装Bt面板
        • 安装Ubuntu22.04后要做的事
        • 无显示器linux设置默认分辨率
        • 特别实用的shell命令
        • 解决linux安装xmind缺少依赖报错
      • Standards
        • CSS格式化之stylelint
        • CSS规范
        • HTML规范
        • JS规范
        • commit规范
        • 使用husky+commitlint规范代码提交
        • 使用semantic-release自动管理版本号
        • 命名规范
        • 图片规范
        • 版本编号规范
      • Wall
        • 科学上网-Cloudflare-Pages
        • 科学上网-Cloudflare-Warp
        • 科学上网-Geph
        • 科学上网-RackNerd
        • 科学上网-Slicehosting
        • 科学上网-Surfshark
        • 科学上网-Tor
        • 科学上网-XX-NET
        • 科学上网-heroku
        • 科学上网-shadowsock
        • 科学上网-v2ray使用
        • 科学上网-v2ray搭建
        • 科学上网-浏览器代理
        • 科学上网-让终端走代理
      • Windows
        • SourceTree破解免登录(windows版)
        • git bash交互提示符不工作
        • nexus 7 2013 wifi 刷机
        • tree命令生成文件目录
        • 利用charles抓包app
        • 安装Openssl
        • 安装msi文件报错2503和2502
        • 神器vimium使用说明
        • 自用host
        • 解决win10扩展出来的屏幕模糊
        • 解决安装Adobe Air时发生错误
    • Snippets
      • zsh
        • docker
        • extract
        • git-commit
        • git
        • mysql-macports
        • npm
        • nvm
        • pip
        • pm2
        • systemd
        • ubuntu
        • vscode
Powered by GitBook
On this page
  • 介绍
  • 原理分析
  • 对象链式调用
  • 方法链式调用
  • 发散思考
  • 总结
  • 参考

Was this helpful?

  1. Docs
  2. Articles
  3. JS

JS链式调用原理

介绍

平时写 js ,大家经常会写到诸如 $(ele).find(child).remove() 之类的链式调用, 那么这些链式调用是怎么实现的呢?

原理分析

以 jQuery 为例,比如 a.b(m).c(n) , 其实是采用了 return this 的方式

对象链式调用

举例如下:

let obj = {value: 0}

// 方式一:直接给对象属性添加方法
obj.add = function (a) {
  this.value += a
  return this
}
obj.reduce = function (b) {
  this.value -= b
  return this
}

// 方式二: 给对象的构造函数的原型添加方法
obj.constructor.prototype.add = function (a) {
  this.value += a
  return this
}
obj.constructor.prototype.reduce = function (b) {
  this.value -= b
  return this
}

// 然后可以链式调用obj的方法了
obj.add(3).reduce(1)

// 俩者的区别在于:前者是自有属性,后者的方法继承于原型链上

方法链式调用

原理是将函数添加在方法的原型上,然后实例化成对象,通过对象来调用

举例如下:

function FuncTest(num) {
  this.value = num || 0
}
FuncTest.prototype.add = function (a) {
  this.value += a
  return this
}
FuncTest.prototype.reduce = function (b) {
  this.value -= b
  return this
}
let obj = new FuncTest()
obj.add(4).reduce(2)

发散思考

add(2)(4)(6) 这种累加如何实现?

// 第一步:针对add(2),很容易实现
function add (num) {
  cal = num || 0
  return cal
}

// 第二步:就变成cal(4)(6)
// 这里就会发现要想能继续执行,所以返回值cal应该是个方法
function add (num) {
  cal = num || 0
  func = function (i) {}
  return func
}

// 第三步: 就变成func(6), 所以func的返回值也是一个方法
// 而且这里可以想到应该是返回了自己
function add (num) {
  cal = num || 0
  func = function (i) {
    return func
  }
  return func
}

// 第四步: 我们需要的是返回一个确定值,而不是一个方法
// 所以,可以采用valueOf操作cal值,最后return cal给 func
function add (num) {
  cal = num || 0
  func = function (i) {
    cal += i
    return func
  }
  func.valueOf = function () {
    return cal
  }
  return func
}
// 运行
add(2)(4)(6)

总结

  1. 链式代码很优雅

  2. 遇见复杂问题, 不要怕, 一步步处理, 化繁为简

参考

PreviousJS标准内置对象NextPromise介绍和使用

Last updated 10 months ago

Was this helpful?

帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
玩一把JS的链式调用
javaScript链式调用原理以及加法实现