JS `Pipe Operator` (`|>`) (Stage 2) 的 `bind-this` 提案与 `fsharp` 风格

各位观众老爷，晚上好！今天咱来聊聊JavaScript里那个犹抱琵琶半遮面的管道操作符（|>）和它的小伙伴 bind-this 提案，顺便再cue一下F#老大哥，看看它们之间到底有些啥不得不说的故事。

第一幕：管道操作符（|>）—— 终于等到你！

话说JavaScript这门语言啊，一路走来也是饱经风霜，各种语法糖层出不穷，但总感觉少了点啥？对了，就是那种能让代码看起来更像流程图，更符合人类直觉的玩意儿。管道操作符（|>）就是为了解决这个问题而生的。

简单来说，管道操作符就是把一个表达式的结果，作为下一个函数的参数传递进去。这听起来有点像俄罗斯套娃，一层套一层，但实际上它能让你的代码更加清晰易懂。

来个最简单的例子：

const addOne = (x) => x + 1;
const multiplyByTwo = (x) => x * 2;

// 没有管道操作符，我们得这样写：
const result1 = multiplyByTwo(addOne(5)); // 12

// 有了管道操作符，我们可以这样写：
const result2 = 5 |> addOne |> multiplyByTwo; // 12

看到了没？有了管道操作符，代码就像一条流水线，数据从左到右，依次经过各个函数的处理，最终得到结果。这种写法是不是更符合我们的思维方式？

第二幕：bind-this 提案 —— 锦上添花！

但是，事情并没有那么简单。管道操作符虽然好用，但也有它的局限性。比如，当我们需要在一个对象的方法中使用管道操作符时，this 的指向就成了一个问题。

const obj = {
  value: 5,
  add: function(x) {
    return this.value + x;
  },
  multiply: function(x) {
    return this.value * x;
  },
  calculate: function() {
    // 这样写会报错，因为this指向window/undefined
    // return this.value |> this.add(1) |> this.multiply(2);

    // 只能这样写，略显笨拙
    const addResult = this.add(1);
    return this.multiply(addResult);
  }
};

console.log(obj.calculate()); // 30

在上面的例子中，this.add(1) 和 this.multiply(2) 中的 this 指向的是全局对象（或者 undefined，取决于是否开启严格模式），而不是 obj 对象本身。这显然不是我们想要的结果。

为了解决这个问题，就有了 bind-this 提案。它的作用就是让管道操作符在调用对象方法时，能够正确地绑定 this。

bind-this 提案有两种写法：

显式绑定： 使用 .# 语法来显式地绑定 this。

const obj = {
  value: 5,
  add: function(x) {
    return this.value + x;
  },
  multiply: function(x) {
    return this.value * x;
  },
  calculate: function() {
    return this.value |> this.add(1).# |> this.multiply(2).#; // 使用.#显式绑定
  }
};

console.log(obj.calculate()); // 30

在这种写法中，this.add(1).# 和 this.multiply(2).# 中的 this 都会被正确地绑定到 obj 对象。

隐式绑定： 如果管道操作符的左侧是一个对象，那么管道操作符会自动将 this 绑定到该对象。
```
const obj = {
  value: 5,
  add: function(x) {
    return this.value + x;
  },
  multiply: function(x) {
    return this.value * x;
  },
  calculate: function() {
    return this |> this.add(1) |> this.multiply(2); // 省略.#，自动绑定
  }
};

console.log(obj.calculate()); // 30
```
在这种写法中，由于管道操作符的左侧是 this（也就是 obj 对象），所以 this.add(1) 和 this.multiply(2) 中的 this 也会被自动绑定到 obj 对象。

有了 bind-this 提案，我们就可以更加方便地在对象方法中使用管道操作符了，代码也更加简洁易懂。

第三幕：F# 的身影 —— 似曾相识燕归来！

说到管道操作符，就不得不提一下F#这门函数式编程语言。F#的管道操作符（|>）比JavaScript的要成熟得多，也更加强大。

F#的管道操作符不仅可以用于普通函数，还可以用于对象方法，而且不需要额外的 bind-this 机制。这是因为F#的函数默认就是绑定到对象的，不存在 this 指向的问题。

type MyObject =
    { Value: int }

    member this.Add(x: int) =
        this.Value + x

    member this.Multiply(x: int) =
        this.Value * x

    member this.Calculate() =
        this.Value
        |> this.Add 1
        |> this.Multiply 2

let obj = { Value = 5 }
printfn "%d" (obj.Calculate()) // 输出 30

在上面的F#代码中，this.Add 1 和 this.Multiply 2 中的 this 都会被正确地绑定到 obj 对象。

可以说，JavaScript的管道操作符和 bind-this 提案，都是在向F#等函数式编程语言学习的结果。

第四幕：案例分析 —— 实践出真知！

光说不练假把式，咱来几个实际的例子，看看管道操作符和 bind-this 提案到底能给我们带来哪些好处。

案例一：数据转换

假设我们需要从一个数组中筛选出大于10的数字，然后将它们乘以2，最后求和。

const numbers = [1, 5, 12, 18, 7, 25];

// 没有管道操作符，我们需要这样写：
const filteredNumbers = numbers.filter(x => x > 10);
const multipliedNumbers = filteredNumbers.map(x => x * 2);
const sum = multipliedNumbers.reduce((acc, x) => acc + x, 0);

console.log(sum); // 110

// 有了管道操作符，我们可以这样写：
const sum2 = numbers
  |> (arr => arr.filter(x => x > 10))
  |> (arr => arr.map(x => x * 2))
  |> (arr => arr.reduce((acc, x) => acc + x, 0));

console.log(sum2); // 110

看到了没？有了管道操作符，代码就像一条数据处理流水线，更加清晰易懂。

案例二：链式调用

假设我们有一个 User 类，需要依次调用它的 setName、setEmail 和 setAge 方法。

class User {
  constructor() {
    this.name = '';
    this.email = '';
    this.age = 0;
  }

  setName(name) {
    this.name = name;
    return this;
  }

  setEmail(email) {
    this.email = email;
    return this;
  }

  setAge(age) {
    this.age = age;
    return this;
  }

  toString() {
    return `Name: ${this.name}, Email: ${this.email}, Age: ${this.age}`;
  }
}

// 没有管道操作符，我们需要这样写：
const user1 = new User()
  .setName('张三')
  .setEmail('[email protected]')
  .setAge(20);

console.log(user1.toString()); // Name: 张三, Email: [email protected], Age: 20

// 有了管道操作符和 bind-this，我们可以这样写：
const user2 = new User()
  |> (user => user.setName('李四'))
  |> (user => user.setEmail('[email protected]'))
  |> (user => user.setAge(25));

console.log(user2.toString()); // Name: 李四, Email: [email protected], Age: 25

// 也可以写成更简洁的形式（假设bind-this的隐式绑定已经实现）：
const user3 = new User()
  |> this.setName('王五')
  |> this.setEmail('[email protected]')
  |> this.setAge(30);

console.log(user3.toString()); // Name: 王五, Email: [email protected], Age: 30

在这个例子中，我们可以看到，有了管道操作符和 bind-this 提案，我们可以更加方便地进行链式调用，代码也更加简洁易懂。

第五幕：总结与展望 —— 未来可期！

总的来说，JavaScript的管道操作符和 bind-this 提案，都是为了提高代码的可读性和可维护性而生的。它们借鉴了F#等函数式编程语言的优点，让JavaScript也能够写出更加优雅的代码。

当然，目前 bind-this 提案还处于Stage 2阶段，距离正式发布还有一段时间。但是，我们可以预见，一旦它被正式采纳，将会给JavaScript开发带来巨大的便利。

表格总结：

特性	JavaScript 管道操作符 (`	>`)	`bind-this` 提案
作用	数据流式处理	解决 `this` 指向问题	数据流式处理
对象方法调用	需要 `bind-this`	显式或隐式绑定 `this`	自动绑定 `this`
代码简洁性	提高代码可读性	进一步简化对象方法调用	代码非常简洁
成熟度	尚处于提案阶段	尚处于提案阶段	成熟稳定
函数式编程风格	增强函数式编程风格	增强函数式编程风格	纯粹的函数式编程风格
学习曲线	容易上手	需要理解 `this` 绑定规则	熟悉 F# 语法即可

最后，用一句玩笑话来结束今天的讲座：

希望有一天，我们能用上正式版的管道操作符和 bind-this，让JavaScript的代码也变得像诗一样美丽！

感谢各位观众老爷的观看，咱们下期再见！

发表回复 取消回复

发表回复取消回复