JS 【详解】作用域

作用域即变量/函数可以被访问的区域。

全局作用域

{} 和函数外的区域为全局作用域。

全局作用域中的声明的变量是全局变量，在页面的任意的部分都可以访问。
全局作用域中无法访问函数作用域的变量
全局作用域在页面打开时创建，在页面关闭时销毁。
全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，由浏览器创建，可以直接使用，全局变量是window对象的属性，函数是window对象的方法。

function foo() {var a = b = 100; // 连续赋值
}foo();console.log(window.b); // 打印 100
console.log(window.a); // 打印 undefined
console.log(a); // 报错 Uncaught ReferenceError: a is not defined

var a = b = 100 这行连续赋值的代码等价于 var a = (b = 100)，其执行顺序是：

先把 100 赋值给 b；
再声明变量 a
再把 b 的值赋值给 a

b 是未经声明的变量就被赋值了，属于 window.b；
a 的作用域仅限于 foo() 函数内部，不属于 window；

块作用域

{} 中为块作用域

变量只在代码块中有效；

ES5本身不提供块级作用域，通常使用立即调用函数表达式实现

(function () {var block_scoped=0;
}());
console.log(block_scoped); //引用错误

ES6中，使用 let 和 const 实现块级作用域

let a =1
if(a===1) {let b = 2
}
console.log(b); // Uncaught ReferenceError: b is not defined

函数作用域

函数内的区域为函数作用域（即 function 中 { } 内的部分）

函数作用域的原理

执行期上下文：当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁。

在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（就近原则）。如果没有则向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError。

函数作用域的特点

函数作用域中可以访问到全局作用域的变量，如window.a（全局作用域和函数作用域都定义了变量a时）
全局作用域无法访问函数内定义的变量
函数中，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
函数中，没有var声明的变量都是全局变量，而且并不会提前声明。
函数中，函数声明也会在函数中所有的代码执行之前执行

    var a = 1;function foo() {console.log(a);a = 2;     // 此处的a相当于window.a}foo(); // 打印结果是1console.log(a);   //打印结果是2

定义形参就相当于在函数作用域中声明了变量。

    function fun6(e) { // 这个函数中，因为有了形参 e，此时就相当于在函数内部的第一行代码里，写了 var e;console.log(e);}fun6();  //打印结果为 undefinedfun6(123);//打印结果为123

模块作用域

ES6新增语法，每个js文件都是一个模块，每个模块中的区域即模块作用域，其他文件要使用模块中的变量/函数，必须对外导出模块中的变量/函数，并在目标文件中引入。

图解—JS调用栈

JS 【详解】作用域相关推荐

Grunt学习笔记002---Gruntfile.js详解
Gruntfile.js详解使用yeomen新建一个项目,里面会自动帮你创建一个完整项目的全部目录,这里针对新建出来的Gruntfile.js做一下简单说明,用作以后参考使用,由于还是菜鸟,很多东西 ...
php Immutable,Immutable.js详解
这次给大家带来Immutable.js详解,使用Immutable.js的注意事项有哪些,下面就是实战案例,一起来看一下. Immutable.js在react + router + redux项目中 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
nodejs app.js详解
app.js代码及其解释 //这里主要是引用所必须要的模块,当然,这些模块是需要使用"npm install 模块名"安装的 //模块依赖 var express = requir ...
JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记
无知的我正在复盘js- 文章目录 JavaScript 1 常用命令输出语句转换为字符串得到变量类型 1 获取元素对象 1.1 H5新增获取元素对象 1.2 直接获取特殊元素对象 2 事件三要素 ...
prototype.js详解
prototype.js是什么? 万一你没有使用过大名鼎鼎的prototype.js,那么让我来告诉你,prototype.js是由Sam Stephenson写的一个javascript类库.这个构 ...
jquery.validate.js 详解
jquery下载地址:https://jquery.com/download/ jquery.validate.js下载地址:https://cdnjs.com/libraries/jquery-va ...
lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
node.js详解Http服务器
概念:Node.js提供了http模块.其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端. http.server是一个基于事件的HTTP服务器.内部有C++实现.接口由JavaSc ...