JavaScript函数调用之多括号调用(精讲)

目录

fn()()调用形式

fn1().fn2()调用形式也叫链式调用

链式调用的特点

常见用途

(fn()) ()调用形式也叫立即调用函数(IIFE)

关键点：

用途：

示例：

---

几种多括号调用形式:

1. fn()()()
2. fn1().fn2()
3. (fn()) ()

fn()()调用形式

定义:是一个JavaScript中常见的模式，通常用于函数式编程。它的基本原理是函数返回另一个函数，这样可以实现连续的函数调用。这种模式通常涉及到高阶函数（函数返回函数）和柯里化（currying）。

• fn()：调用函数fn，它返回一个新的函数。
• fn()()：调用fn()返回的函数，它再次返回另一个函数。
• fn()()()：最终调用第二个返回的函数。

function fn(x) {
    return function(y) {
        return function(z) {
            return x + y + z;
        };
    };
}

// 使用 `fn()()()`
const result = fn(1)(2)(3);
console.log(result); // 输出 6

用途和应用: 

1.柯里化（Currying）： 柯里化是一种将多个参数的函数转换为一系列单参数函数的技术。上述模式就是柯里化的一种体现。

function add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

const add5 = add(5);
const add5And3 = add5(3);
const result = add5And3(2); // result = 10

 

2.函数式编程： 在函数式编程中，函数返回函数是一种常见的模式。它允许我们将函数组合在一起，以创建复杂的操作。

3.延迟计算和函数链： 这种模式可以用于延迟计算或在多个函数调用之间传递状态。

 扩展例子:

假设我们有一个简单的计数器对象，每个调用都会增加计数：

function createCounter(start) {
    let count = start;
    
    return function() {
        count += 1;
        return function() {
            count += 1;
            return function() {
                return count;
            };
        };
    };
}

// 使用 `createCounter()()()`
const counter = createCounter(0)()()();
console.log(counter); // 输出 3

fn1().fn2()调用形式也叫链式调用

定义:链式调用（method chaining）是指在一个对象的方法调用后直接调用其他方法的一种编程风格。这种技术通常用于简化代码和提高可读性。链式调用的实现依赖于每个方法返回对象本身（this），从而允许多个方法调用链接在一起。

链式调用的特点

1. 返回当前对象：每个方法在操作完毕后都会返回对象本身（this），使得下一个方法可以被调用。
2. 方法的顺序：方法的调用顺序很重要，因为每个方法的结果会影响到后续的操作。
3. 可读性和简洁性：链式调用可以使代码更加简洁和可读，特别是在进行一系列相关操作时。

常见用途

• 构建器模式（Builder Pattern）：用于创建复杂对象，链式调用可以使配置和构建对象的过程更加流畅。
• DOM 操作：在前端开发中，像 jQuery 这样的库利用链式调用来操作DOM，使得代码更加简洁。
• 函数式编程：一些函数式编程库（如 Lodash）使用链式调用来处理数据。

class MyClass {
    method1() { /* do something */ return this; }
    method2() { /* do something */ return this; }
}

const obj = new MyClass();
obj.method1().method2(); // 连续调用 method1 和 method2

(fn()) ()调用形式也叫立即调用函数(IIFE)

立即调用函数表达式（IIFE）是一种在定义后立即执行函数的模式。它的基本语法如下：

(function() {
    // 这里是 IIFE 中的代码
    console.log("立即执行函数");
})();

关键点：

1. 包裹在括号中：函数表达式被包裹在圆括号中，这样JavaScript引擎会将其视为一个表达式，而不是一个函数声明。
2. 立即调用：函数定义后紧跟着一对圆括号()，立即调用该函数。

用途：

• 创建局部作用域：IIFE可以创建一个独立的作用域，避免全局作用域污染。
• 模块化代码：可以将相关的功能封装在一个IIFE中，使得变量不会泄露到全局作用域。

示例：

var result = (function() {
    var privateVar = "I'm private";
    return privateVar;
})();
console.log(result); // 输出 "I'm private"

在这个例子中，privateVar是局部变量，无法从外部访问，而返回值privateVar被赋给了result。