Question

在TypeScript的代码中，我看到了

(() => {
    const abc = 'blabla';
    ...
})();

这种语法到底意味着什么？我知道箭头函数是JS - 所以我理解这一点：

() => {
    const abc = 'blabla';
    ...
});

但其余括号的兴趣是什么？

PS：原始代码是

(() => {
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

})();

谢谢

Answer 1

您的代码可以从

中分解

@DELETE

为...

(() => {
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

})();

您看到的括号是将lambda（匿名函数）包装在括号中，以便您可以调用它。

Answer 2

在JavaScript中，这些函数被称为 IIFE （立即调用函数表达式），它只是函数的定义并立即调用它！到底有什么好处呢？很多原因......

但是，在我们说明原因之前，请注意箭头功能不是您问题的一部分，因为您的示例中没有this ...

此问题还不是与TypeScript相关。

很多原因很多：

你可以拥有一个范围（通过对函数做出反应），而不会污染全局范围。
可以定义在IIFE之外无法访问的“私人”功能
您可以控制进出此功能的内容。

Answer 3

尾随()调用匿名函数。这也适用于function s。

由于您的代码已经使用了ES6功能，因此一个简单的花括号块就足够了。在您的示例中，它将title的范围限制为花括号，这使得代码更具可预测性。在title之前和{之后，}常量不可见（它不会污染文件的其余部分）：

{
    const title = 'New Document'

    NewDoc.initialize = () => {
        render(
            <App title={title} />,
            document.querySelector('#contnr')
        );
    };

    render(
           <Progr />,  
           document.querySelector('#contnr')
    );

}

在同一个文件中，您现在可以使用第二个大括号块并使用不同的标题执行其他操作，而无需修改第一个标题：

{
    const title = 'Other Document'
    // do something with "title"
}

提示：避免var声明。它们对ES6不再有用，因为const和let可用，var变量的范围不尊重简单的花括号。

TypeScript中带箭头函数的语法

3 个答案: