深入理解javascript函数作用域

冷不防 2022-10-09 00:40 174阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  函数作用域
     *  隐藏内部实现
     *  规避冲突
     *   *  全局命名空间
         *  模块管理
 *  小结

# 前言 #

上一章我们介绍了有关javascript词法作用域的相关知识，之前我们是概述地把作用域描绘成一个个小“气泡”， 但是并没有过多解释“气泡”的形成，究竟哪些情况下会形成上述的“气泡”呢，其实包括函数作用域和块作用域，这一章我们将就这个函数作用域详细展开

# 正文 #

## 函数作用域 ##

JavaScript 具有基于函数的作用域，意味着每声明一个函数都会为其自身创建一个气泡，函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。大家可以看下下面的例子：

function foo(a) { 
    	var b = 2;
    	// 一些代码
    	function bar() { 
    		// ...
    	}
    	// 更多的代码
    	var c = 3;
    }

这里全局作用域下，只有foo一个标识符，而a, b, c, bar都附属于foo的作用域气泡，这些标识符全都无法从全局作用域中进行访问，这就是典型的函数作用域

## 隐藏内部实现 ##

函数作用域有一个常见的用途，也就是隐藏内部实现。我们可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。  
      这么做的原因，是因为软件设计过程中有一个最小特权原则，意思就是说指在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。下面我们就一个例子来进一步说明

function doSomething(a) { 
    	b = a + doSomethingElse( a * 2 );
    	console.log( b * 3 );
    }
    function doSomethingElse(a) { 
    	return a - 1;
    }
    var b;
    doSomething( 2 ); // 15

这个例子其实我们可以看到，doSomethingElse其实是doSomething的一部分，也就是私有部分，这样实现的工具类函数其实有一个问题，**给予外部作用域对 b 和 doSomethingElse(…) 的“访问权限”不仅没有必要，而且可能是“危险”的**，因为它们可能被有意或无意地以非预期的方式使用，从而导致超出了 doSomething(…) 的适用条件。更“合理”的设计会将这些私有的具体内容隐藏在 doSomething(…) 内部，我们看下如果使用函数作用域隐藏内部实现的做法

function doSomething(a) { 
    	function doSomethingElse(a) { 
    		return a - 1;
    	}
    	var b;
    	b = a + doSomethingElse( a * 2 );
    	console.log( b * 3 );
    }
    doSomething( 2 ); // 15

现在，b 和 doSomethingElse(…) 都无法从外部被访问，而只能被 doSomething(…) 所控制。功能性和最终效果都没有受影响，但是设计上将具体内容私有化了，设计良好的软件都会依此进行实现。

## 规避冲突 ##

“隐藏”作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个标识符可能具有相同的名字但用途却不一样，无意间可能造成命名冲突。冲突会导致变量的值被意外覆盖。例如下面的例子：

就上面的例子，这里bar中的i = 3意外地覆盖了foo中的i，导致程序无线循环执行了，我们需要利用上面说的，尽量避免这种情况的发生

### 全局命名空间 ###

变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时，如果它们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。  
      这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴漏在顶级的词法作用域中。

var MyReallyCoolLibrary = { 
    	awesome: "stuff",
    	doSomething: function() { 
    		// ...
    	},																	
    	doAnotherThing: function() { 
    		// ...
    	}		
    };

### 模块管理 ###

利用export和import也可以形成一个类似命名空间的封闭作用域，保持在私有、无冲突的作用域中，这样可以有效规避掉所有的意外冲突。

# 小结 #

函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常指 \{ … \} 内部）。下一篇文章我们将进一步介绍，javascript的块作用域

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/ca2120e50db0443abb2afe3193cf191b.png