深入理解javascript函数作用域

简介: 深入理解javascript函数作用域

前言

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

正文

函数作用域

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

640.png

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


隐藏内部实现

      函数作用域有一个常见的用途,也就是隐藏内部实现。我们可以把变量和函数包裹在一个函数的作用域中,然后用这个作用域来“隐藏”它们。

      这么做的原因,是因为软件设计过程中有一个最小特权原则,意思就是说指在软件设计中,应该最小限度地暴露必要内容,而将其他内容都“隐藏”起来,比如某个模块或对象的 API 设计。下面我们就一个例子来进一步说明

640.png

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

640.png

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


规避冲突

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

640.png

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


全局命名空间

      变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时,如果它们没有妥善地将内部私有的函数或变量隐藏起来,就会很容易引发冲突。

      这些库通常会在全局作用域中声明一个名字足够独特的变量,通常是一个对象。这个对象被用作库的命名空间,所有需要暴露给外界的功能都会成为这个对象(命名空间)的属性,而不是将自己的标识符暴漏在顶级的词法作用域中。

640.png

模块管理

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

小结

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

目录
相关文章
|
8天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
7天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
23 9
JavaScript基础知识-函数的返回值
|
7天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
9天前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
17天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
10天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
15 3
|
8天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
10天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
11天前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
23 3