多函数调用中点操作疑问：JS函数传参与链式调用区别

嘿，这个问题问得特别到位！我刚接触JavaScript的时候也被这两种写法绕晕过，咱们一步步拆解你困惑的点：

先明确两种写法的本质 #

1. B(A(arg))：独立函数的嵌套调用 #

这是纯函数参数传递的逻辑：

• 先执行A(arg)，得到它的返回值somethingFromA
• 把这个返回值直接作为参数传给独立函数B，也就是执行B(somethingFromA)
  这里的A和B是两个毫无关联的独立函数，B只关心传入的参数是什么，不管这个参数是从哪来的。

2. arr.split(' ').join('-')：对象方法链调用 #

这是对象方法的链式调用，和上面的逻辑完全不同：

• 首先arr是一个字符串对象，调用它的split(' ')方法，这个方法执行后会返回一个新的数组对象
• 紧接着调用这个数组对象的join('-')方法，这里的join是数组对象自带的方法，它的作用是把当前数组（也就是调用它的这个数组，通过this绑定）的元素用'-'拼接起来
  简单说：join并没有接收split的返回值作为参数，而是直接操作这个返回的数组本身（因为这个数组就是join方法的调用者，也就是this），'-'才是join的参数。

你的误区在哪里？ #

你可能误以为join('-')是把split(' ')的返回值当成参数传入，但实际上：

• 在B(A(arg))里，A的返回值是B的输入参数
• 在arr.split(' ').join('-')里，split(' ')的返回值是调用join的对象，join的参数是后面的'-'，它是基于自身的this（也就是那个数组）来工作的。

举个等价的对比例子 #

如果要把B(A(arg))改成类似方法链的形式，得是这样：

// 模拟一个类似方法链的结构
const strHelper = {
  // 模拟split的逻辑：返回一个带join方法的对象
  split(str, separator) {
    const arr = str.split(separator);
    return {
      join(joinChar) {
        return arr.join(joinChar);
      }
    };
  }
};

// 调用方式：
strHelper.split('hello world', ' ').join('-'); // 得到 'hello-world'

这个时候，split返回的是带join方法的对象，join操作的是split内部生成的数组，这才和arr.split(' ').join('-')的逻辑一致。而普通的B(A(arg))里，B根本不知道A的存在，只是接收一个参数而已。

内容的提问来源于stack exchange，提问作者Alwaysblue