JavaScript之变量及作用域

Faremax 发布于2019-08-23 12:19 / 2601人阅读

摘要：所以的作用域是静态作用域，也叫词法作用域。总结是一门基于词法作用域静态作用域的语言，会沿着作用域链像气泡一样向外部寻找变量声明。又是函数作用域的语言，在中，使用和关键字后，能让变量处于块作用域中，而且不存在声明提升。

本文共 1700 字，读完只需 7 分钟

概述

变量，编程语言中我们用来模拟现实概念的工具，比方说，变量可以表示对象，数组，数字，字符。既然是工具，那么就用工具的适用范围，这个工具在这个适用范围中才有效，在编程语言中，我们称这个适用范围叫作用域(scope)。

本文会总结 JS 中作用域的相关概念。

什么是作用域

全局作用域

函数作用域

块级作用域

词法作用域(静态作用域)

作用域链

一、什么是作用域？

作用域, 英文意思是 scope, 我自己的话来理解就是：

变量访问规则的有效范围

作用域外，无法引用作用域内的变量

离开作用域后，作用域的变量的内存空间会被清除，比如执行完函数或者关闭浏览器。

二、全局作用域

先看一段代码：

foo = "bar";
console.log(window.foo);  // bar

在浏览器环境中声明变量，该变量会默认成为全局 windows 对象的属性。

再看下面这段代码：

function foo() {
    name = "bar"
}
foo();
console.log(window.name) // bar

在函数中，如果不加 bar声明一个变量，那么这个变量会默认被声明为全局变量，如果是严格模式则会报错。

全局变量可以在任何地方访问到，但是有很大的问题存在。

全局变量会造成命名污染，如果在多处对同一个全局变量进行操作，那么就会覆盖全局变量的定义。同时全局变量数量过多，非常不方便管理。

这也是为什么像jQuery 和 underscore 这样的类库，要在全局建立 $ 和 _ 变量，其余私有方法属性挂载到该全局变量下。

三、函数作用域

JS 是函数作用域，在函数中定义一个局部变量，那么该变量只可以在该函数作用域中被访问。

function doSomething() {
    var thing = "吃早餐";
}

console.log(thing);  // Uncaught ReferenceError: thing is not defined

嵌套函数作用域：

function outter() {
    var thing = "吃早餐";
    function inner() {
        console.log(thing);
    }
    inner();
}

outter();  // 吃早餐

在外层函数中，嵌套一个内层函数，那么这个内层函数可以向上访问到外部作用域的变量。

那么，既然内层函数可以访问到外层函数的变量，那么把内层函数返回后呢？

function outter() {
    var thing = "吃晚餐";
    
    function inner() {
        console.log(thing);
    }
    return inner;
}

var foo = outter();
foo();  // 吃晚餐

前面我们提到了，函数执行完后，函数作用域的变量会被垃圾回收，以上代码可以看出当我们返回了一个访问了外部函数变量的内部函数，最后外部函数的变量得以保存。

这种当变量存在的函数已经执行结束，但仍在可以访问的方式就是`闭包`。

闭包的具体实践，后续文章会详细说明。

四、块级作用域

JS 在 ES6 之前只有函数作用域，没有块级作用域的概念。
看一下代码:

function doSomething() {
    for (var i = 0; i < 10; i++) {
        ...
    }
    console.log(i)
}
doSomething();  // 10

由于 JS 没有块级作用域，变量 i 在函数作用域中只有一个，每次 for 循坏都在改变这一个变量。

再看阮一峰老师 ES6 教程里的一段代码:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();   // 10;

以上代码中，由于没有块级作用域，i 变量全局只有一个，当 for 循坏结束，变量 i 的值等于 10, 所以 a[6]() 对应函数内的变量 i 的打印值就是 10。

ES 6 中通过 let 和 const关键字引用了块级作用域的概念，所谓块级作用域，就是以 {}包裹的区域。

我们将阮一峰老师 ES6 教程里的一段代码改成 let 的形式:

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();   // 6;

这时，数组内的索引为6函数内的变量打印值为6，每次循环，会创建新的块级作用域，然后重新声明一个新的变量 i；JS 的解释引擎会记住上次循环的变量值，所以能够返回正确的结果。

let 和 const 会声明一个块级作用域的变量及常量，不易发生变量命名污染的问题，能规避冲突，帮助你写出简洁优雅的代码，建议一直使用。

五、词法作用域(静态作用域)

词法作用域，也可以叫做静态作用域，是什么意思呢？

无论函数在哪里调用，词法作用域都只由函数被声明时所处的位置决定。

既然有静态作用域，那么也有动态作用域。

而动态作用域的作用域则是由函数被调用执行的位置所决定。

var a = 123;

function func1() {
    console.log(a);
}

function func2() {
    var a = 456;
    func1();
}

func2(); // 123

以上代码，最后输出结果 a 的值，来自于 func1 声明时所在位置访问到的 a 值 123。

所以 JS 的作用域是静态作用域，也叫词法作用域。

六、作用域链

在 JS 引擎中，通过标识符查找标识符的值，会从当前作用域向上寻找，直到作用域找到第一个匹配的标识符为止。就是 JS 的作用域链

如果嵌套作用域有多个相同标识符，那么，最内部的标识符会覆盖外层标识符，这叫做“遮蔽效应”

var a = 1;
function func1() {
    var a = 2;
    function func2() {
        var a = 3;
        console.log(a);  // 3
    }
    func2();
}

func1(); // 3

func2 中变量 a,会从内部开始向外部上层寻找，找到最近的 a 标识符的声明为止。

总结

JS 是一门基于词法作用域（静态作用域）的语言，JS 会沿着作用域链像气泡一样向外部寻找变量声明。

JS 又是函数作用域的语言，在 ES6 中，使用 let 和 const 关键字后，能让变量处于块作用域中，而且不存在声明提升。

后面的文章会介绍 JS 中的声明提升和闭包，敬请期待。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98330.html

javascript作用域和闭包之我见

摘要：查询是在作用域链中，一级级的往上查找该变量的引用。作用域和作用域链作用域的概念，应该两张图几句话就能解释吧。这个建筑代表程序中的嵌套作用域链。一层嵌一层的作用域形成了作用域链，变量在作用域链中的函数内得到了自己的定义。 javascript作用域和闭包之我见看了《你不知道的JavaScript(上卷)》的第一部分——作用域和闭包，感受颇深，遂写一篇读书笔记加深印象。路过的大牛欢迎指点...

SoapEye 2019-08-20 14:51 评论0 收藏0
JS编译之 LHS RHS（你不知道的JavaScript 小记一）

摘要：关于两个专业术语的讨论起自对你不知道的一书的阅读学习。遇到，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。摘录来自你不知道的。 JS 编译之 LHS RHS 一、前言最近和朋友聊技术的时候，聊到 LHS RHS，我竟然没听说过没听说过。。。于是成功引起了我的好奇心。关于两个专业术语的讨论起自对《你不知道的JavaScript》一书的阅读学习。二、编译...

Cristic 2019-08-22 18:41 评论0 收藏0
JavaScript 闯关记

摘要：对象数组初始化表达式，闯关记之上文档对象模型是针对和文档的一个。闯关记之数组数组是值的有序集合。数组是动态的，根闯关记之语法的语法大量借鉴了及其他类语言如和的语法。《JavaScript 闯关记》之 DOM（下） Element 类型除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素...

mj 2019-08-21 18:45 评论0 收藏0
前端面试之闭包

摘要：在函数内部的变量称之为局部变量，它可以在函数内部读取，在函数外部无法正常读取，如果想要读取函数内部的变量则需要用到闭包。前端面试之闭包闭包属于属于JavaScript的难点，但是在很多高级应用都需要用到，也是前端面试中经常会考到的点。作用域谈到闭包首先必须了解作用域，ES5中，JavaScript的作用域只有两种，一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；...

jackzou 2019-08-20 16:54 评论0 收藏0
Javascript重温OOP之作用域与闭包

摘要：的变量作用域是基于其特有的作用域链的。需要注意的是，用创建的函数，其作用域指向全局作用域。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。作用域定义在编程语言中，作用域控制着变量与参数的可见性及生命周期，它能减少名称冲突，而且提供了自动内存管理 --javascript 语言精粹我理解的是，一个变量、函数或者成员可以在代码中访问到的范围。 js的变量作...

JessYanCoding 2019-08-21 10:56 评论0 收藏0