简单了解JavaScript作用域


Posted in Javascript onJuly 31, 2020

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

在 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作用域的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript引导程序
Oct 26 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 #Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 #Javascript
JS可断点续传文件上传实现代码解析
Jul 30 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP输出时间差函数代码
2013/01/28 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Python 专题一 函数的基础知识
2017/03/16 Python
Python数据结构之单链表详解
2017/09/12 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python线程的几种创建方式详解
2019/08/29 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
DataReader和DataSet的异同
2014/12/31 面试题
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
郭明义观后感
2015/06/08 职场文书
导游词之无锡梅园
2019/11/28 职场文书
详解Python类和对象内容
2021/06/22 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers