JS中的{},()及自调用

今天药忘吃喽~ 2022-02-27 04:14 168阅读 0赞

## 用途 ##

*  `{}`  
    包围对象`object`  
    包围代码块`code block`(如方法体，或普通代码块等)。
 *  `()`
    
     *  包围参数列表
     *  自调用表达式，包围一些需要`通过运算得出结果`的代码(其中`包围的代码会执行一次`)。  
        函数表达式可以自调用(即自动运行一次)。  
        如果表达式后面紧跟()，会自动调用。  
        不能自调用声明的函数，通过添加括号，来说明他是一个函数表达式。

经常可以见到很多用`()`包围`{}`的地方，用于将`{}`内部的代码执行一次，计算出结果。

## demo ##

*  [window.eval()][window.eval]  
    可以见到`eval('(' + value + ')')`。
 *  自调用函数

function foo() {console.log("hello");}	// 声明了一个函数foo()
    foo()		// 调用
    
    // 自调用函数
    (function bar() {console.log("world");})();	// 立刻执行一次函数。
    bar	// 报错，未定义。

![自调用函数][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

*  箭头函数表达式(`ES6`)的返回值  
    箭头函数表达式`x => x`，表示`function(x) {return x;}`。  
    但如果返回值是`object`类型，则不能为`x => {name:'JT'}`。

getObj = (num) => {age:num};	// getObj(22) 得不到对象返回值，为undefined。
    getObj = (num) => ({age:num});	// getObj(22) 得到对象返回值，为{age:22}。
    
    // 另外，在使用typeof查看箭头函数表达式的类型的时候，也可以看到()的作用。
    typeof x => x	// 语法错误。
    typeof (x => x)	// "function"。使用()将箭头函数表达式运行为一个结果|返回值。这个返回值是一个函数。然后用typeof判断。

![箭头函数表达式中的()][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]

*  创建匿名函数并立即执行

// function(str) {return str;}
    // 报错：Uncaught SyntaxError: Unexpected token (
    
    // 用()包围代码段。成为一个函数。
    (function(str) {return str;})
    // 函数后加(...args)，得到的函数会执行一次。
    (function(str) {return str;})("测试")
    
    // 得到函数
    func = (function(str) {return str;})
    // 直接得到函数执行一次的返回值
    retValue = (function(str) {return str;})("测试");

![创建匿名函数并执行一次][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]

[window.eval]: https://blog.csdn.net/wuyujin1997/article/details/90211788
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20220227/6f748847866641769f600add44ec5b43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20220227/ed3aa4fc301e4a28a519b30732edd507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20220227/796bd6b6d7eb4258aff35579ce474257.png