[JavaScript知识库]优雅的函数式编程----JavaScript 的链式调用

1. 使用场景

使用数组 API 处理数据

[].map().filter().reduce()

JQuery 方法

$('text').css('color', 'pink').show()

Loadsh 方法

_([1, 2, 3])
  .map((n) => n * n)
  .tap(console.log)
  .thru((n) => n.reverse())
  .value()

等等。。。。。

2. 函数调用

一般函数的调用方式：

let f = {
  name: 'dell',
  sayHi: function () {
    console.log(`hello, my name is ${this.name}`)
  },
  sayBye: function () {
    console.log(`byebye~~~~`)
  }
}
f.sayHi()
f.sayBye()

稍微有那么一点冗余，链式调用可以简化这样的操作。

3. 链式调用

原理：在构造函数中创建方法时，return this 返回当前调用方法的对象，可以实现链式调用方法。

let f = {
  name: 'dell',
  sayHi: function () {
    console.log(`hello, my name is ${this.name}`)
    return this
  },
  sayBye: function () {
    console.log(`byebye~~~~`)
    return this
  }
}
f.sayHi().sayBye()

4. 链式操作的结构

• 链式对象：能够进行链式操作的对象

• 链式方法：链式对象上能进行链式操作的方法

• 链式数据：链式操作最终想要获得结果是通过被操作数据