简单了解JavaScript作用域

作用域通常是指在指定的时间内，变量存在于一段代码中。缺乏对作用域的理解可能会导致令人沮丧的调试体验。作用域的概念是关于我们的代码中可以访问到哪些确定的函数或变量，代码的上下文和执行环境。

在 JavaScript 中，有两种类型的作用域：全局和局部作用域。

全局作用域

第一种作用域是全局作用域。它很容易定义。如果一个变量或函数是_全局的_，那么在程序中的任何地方都可以访问到它们。在浏览器中，全局作用域是 window对象。如果在函数外面声明一个变量，那么这个变量就存在全局对象中。例如：

var x = 9;

一旦该变量被定义，则可以被引用为 window.x，因为它存在于全局对象中，我们可以简单的引用它为 x。

局部作用域

JavaScript 也可以在每个函数体中创建局部作用域。例如：

function myFunc() {
  var x = 5;
}

myFunc();

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

由于 x 是在 myFunc() 中初始化，所以它只能在 myFunc() 中被访问，如果我们试图在 myFunc() 外面访问 x，则会得到一个引用错误。

注意

如果你忘记使用 var 关键字声明变量，那么这个变量会自动变成全局变量。所以这段代码可以运行：

function myFunc() {
  x = 5;
}

myFunc();

console.log( x ); // 5

这是一个坏主意。全局变量的值可以被程序的任何部分或者其他脚本更改。这是不期望发生的，因为它会导致无法预料的副作用。

立即调用表达式（IIFE）提供了一个避免全局变量的方式。你会看到许多如 jQuery 的 JavaScript 库经常使用这种方式：

(function() {
  var jQuery = { /* All my methods go here. */ };
  window.jQuery = jQuery;
})();

将一切包含在一个函数中并立即调用这个函数，这意味着函数中的所有变量都被绑定在_局部作用域_中。在函数结尾部分，你可以通过将 jQuery 对象绑定在全局对象 window 上，将一些方法和属性公开出来。了解更多关于立即调用函数表达式，请查看 Ben Alman 的文章 Immediately-Invoked Function Expression。

因为局部作用域通过函数而工作，任何在另一个函数中定义的函数都可以访问外部函数里的变量：

function outer() {
  var x = 5;

  function inner() {
    console.log( x );
  }

  inner(); // 5
}

但是 .outer() 函数不能访问 .inner() 函数中定义的任何变量。

function outer() {
  var x = 5;

  function inner() {
    console.log( x );
    var y = 10;
  }

  inner(); // 5

  console.log( y ); // ReferenceError: y is not defined
}

另外，在一个函数中没有使用 var 关键字定义的变量不是这个函数的局部变量 － JavaScript 会向上遍历作用域链（最后会到 window 对象）寻找之前定义的这个变量。如果这个变量没有定义，则会在全局中定义该变量，这样会导致意外的结果。

// Functions have access to variables defined in the same scope.

var foo = "hello";

var sayHello = function() {
  console.log( foo );
};

sayHello(); // "hello"

console.log( foo ); // "hello"

相同名称的变量可以在不同作用域中保存不同的值：

var foo = "world";

var sayHello = function() {
  var foo = "hello";
  console.log( foo );
};

sayHello(); // "hello"

console.log( foo ); // "world"

当在一个函数中引用一个外部作用域定义的变量，函数可以访问在该函数定义之后发生改变的变量值。

var myFunction = function() {
  var foo = "hello";
  var myFn = function() {
    console.log( foo );
  };
  foo = "world";
  return myFn;
};

var f = myFunction();

f(); // "world"

这是一个更复杂的作用域例子：

(function() {

  var baz = 1;

  var bim = function() {
    console.log( baz );
  };

  bar = function() {
    console.log( baz );
  };

})();

在这个实例中，运行：

console.log( baz ); // baz is not defined outside of the function

将会得到一个 ReferenceError。baz 仅仅是在函数中定义，并且没有暴露在全局作用域中。

bar(); // 1

.bar() 是在匿名函数中定义的， 但是它没有使用 var 关键字定义，这意味着它没有绑定到局部作用域，而是在全局作用域创建。另外，它可以访问 baz 变量，因为 .bar() 是在与 baz 相同的作用域定义的，所以它可以访问变量 baz，即使函数外部的其他代码不可以。

bim(); // ReferenceError: bim is not defined

.bim() 只在函数中定义的，所以它作为局部变量而不存在于全局对象中。

以上就是简单了解JavaScript作用域的详细内容，更多关于JavaScript作用域的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解JavaScript作用域、作用域链和闭包的用法

    1. 作用域 作用域是指可访问的变量和函数的集合. 作用域可分为全局作用域和局部作用域. 1.1 全局作用域 全局作用域是指最外层函数外面定义的变量和函数的集合. 换言之,这些最外层函数外面定义的变量和函数在任何地方都能访问. 举个例子: // 最外层定义变量 var a = 1; console.log(a); // 最外层可以访问 function fnOne() { // 最外层函数 console.log(a); // 函数内可以访问 function fnTwo() { // 子函数

  • JS中作用域以及变量范围分析

    变量作用域 js作为一门脚本语言,他与c,java这些语言是不相同的. 全局变量 在js中声明全局变量,有下面几种方式: 1.在函数外通过var来声明. var test ="hello"; console.log(test); function a(){ test="xx"; console.log(test); } a(); console.log(test); 结果: hello xx xx 这种方式通过声明的变量在任何地方都可进行修改和使用. 2.在函数中隐

  • JavaScript中作用域链的概念及用途讲解

    从零开始讲解JavaScript中作用域链的概念及用途 引言 之前我写过一篇关于JavaScript中的对象的一篇文章,里面也提到了作用域链的概念,相信大家对这个概念还是没有很深的理解,并且这个概念也是面试中经常问到的,因为这个概念实在太重要了,在我们平时写代码时,也可能会因为作用域链的问题,而出现莫名其妙的bug,导致我们花费大量的时间都查找不出原因.所以我就准备单独写一篇关于作用域链的文章,来帮大家更好地理解这个概念. 正文 一.执行环境 首先,我们要引入一个概念,叫做执行环境(下面简称环境

  • 深入理解javascript中的this

    深入理解Js中的this JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及在何处声明的,只关心它们从何处调用,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,当然实际上this的最终指向的是那个调用它的对象. 作用域 我们先来了解一下JavaScript的作用域,以便理解为什么说this更类似于动态作用域,通常来说,一段程序代码中

  • 深入了解JavaScript词法作用域

    JavaScript并不是传统的块级作用域,而是函数作用域! 一.作用域 JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤: 第一步(编译阶段):var a 在其作用域中声明新变量.这会在最开始的阶段,也就是代码执行前进行. 第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值. LHS & RHS(当前作用域->上级作用域->...->全局作用域) LHS(左侧):试图找到变量的容器本

  • 详解JavaScript作用域 闭包

    JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

  • JavaScript中的执行环境和作用域链

    JavaScript中的执行环境和作用域链

    前言 JS 中的执行环境和作用域链是非常重要的概念,它们是 JS 引擎在处理 JS 代码的时候对变量和函数的处理方式,这两个概念的正确理解能够帮助我们更好地理解和预测代码的行为. 执行环境 执行环境定义了变量或者函数有权访问的数据集合,每一个执行环境都有一个与之关联的变量对象,该执行环境中定义的所有变量和函数都保存在这个对象中.我们无法直接访问这个对象,这个对象只是在解析器处理数据的时候使用. 我们平时说的全局变量就是在最外围的一个执行环境中定义的变量,全局执行环境根据 ECMAScript 的

  • 简单了解JavaScript作用域

    作用域通常是指在指定的时间内,变量存在于一段代码中.缺乏对作用域的理解可能会导致令人沮丧的调试体验.作用域的概念是关于我们的代码中可以访问到哪些确定的函数或变量,代码的上下文和执行环境. 在 JavaScript 中,有两种类型的作用域:全局和局部作用域. 全局作用域 第一种作用域是全局作用域.它很容易定义.如果一个变量或函数是_全局的_,那么在程序中的任何地方都可以访问到它们.在浏览器中,全局作用域是 window对象.如果在函数外面声明一个变量,那么这个变量就存在全局对象中.例如: var

  • JavaScript作用域链使用介绍

    JavaScript作用域链使用介绍

    之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时候发现作用域和执行环境确实很重要,又很基础,对理解JavaScript闭包很有帮助,所以在写一篇对作用域和执行环境的理解. 作用域 作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域. 单纯的JavaScript作用域还

  • JavaScript 作用域scope简单汇总

    什么是作用域 程序的执行,离不开作用域,也必须在作用域中才能将代码正确的执行. 所以作用域到底是什么,通俗的说,可以这样理解:作用域就是定义变量的位置,是变量和函数的可访问范围,控制着变量和函数的可见性和生命周期. 而JavaScript中的作用域,在ES6之前和ES6之后,有两种不同的情况. ES6之前,JavaScript作用域有两种:函数作用域和全局作用域. ES6之后,JavaScript新增了块级作用域. 作用域的特性 在JavaScript变量提升的讨论中,我们其实是缺少了一个作用域

  • JavaScript作用域示例详解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

  • javascript作用域链(Scope Chain)用法实例解析

    本文实例分析了javascript作用域链(Scope Chain)用法.分享给大家供大家参考,具体如下: 关于js的作用域链,早有耳闻,也曾看过几篇介绍性的博文,但一直都理解的模棱两可.近日又精心翻看了一下<悟透Javascript>这本书,觉得写得太深刻,在"代码的时空"一节里有一段介绍作用域链的地方寥寥数语,回味无穷(其实还是理解的模棱两可^_^).现在整理下自己的读书笔记,顺便借鉴网上资源,写下来. 一.从一个简单的问题说起 下面的js代码在页面中运行显示什么结果:

  • 关于javascript作用域的常见面试题分享

    本文主要给大家分享了关于javascript作用域面试题的相关内容,分享出来供大家参考学习,下面来一起看看吧. 一.作用域: 在了解作用域之前,首先需要明白一些基础概念: 每一个变量.函数都有其作用的范围,超出作用不得使用,这个叫做作用域. 二.全局变量.局部变量: 1.全局变量: (1)在全局范围内声明的变量,如var a=1; (2)只有赋值没有声明的值,如a=2; (注:如果a=2在函数环境中,也是全局变量) 2.局部变量: 写入函数中的变量,叫做局部变量. 3.作用: (1)程序的安全.

  • 关于JavaScript作用域你想知道的一切

    Javacript 中有一系列作用域的概念.对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未必能.这篇文章主要目的帮助理解JavaScript中的一些概念如:scope,closure, this, namespace, function scope, global scope, lexical scope and public/private scope. 希望从这篇文章中能回答如下的问题: 什么是作用域(scope)? 什么是全局(Global)和局部(Local)作用域

  • 深入理解JavaScript作用域和作用域链

    深入理解JavaScript作用域和作用域链

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript. JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 1. 全局作用域(Global Sc

  • javascript作用域和闭包使用详解

    作用域的嵌套将形成作用域链,函数的嵌套将形成闭包.闭包与作用域链是 JavaScript 区别于其它语言的重要特性之一. 作用域JavaScript 中有两种作用域:函数作用域和全局作用域. 在一个函数中声明的变量以及该函数的参数享有同一个作用域,即函数作用域.一个简单的函数作用域的例子: 复制代码 代码如下: function foo() {    var bar = 1;    {        var bar = 2;    }    return bar; // 2} 不同于C等其它有块

  • 深入理解javascript作用域第二篇之词法作用域和动态作用域

    前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇--词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成词法单元.这个概念是理解词法作用域

随机推荐