JavaScript变量作用域_动力节点Java学院整理


Posted in Javascript onJune 27, 2017

在JavaScript中,用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量:

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量,那么该变量只在各自的函数体内起作用。换句话说,不同函数内部的同名变量互相独立,互不影响:

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

function bar() {
  var x = 'A';
  x = x + 'B';
}

由于JavaScript的函数可以嵌套,此时,内部函数可以访问外部函数定义的变量,反过来则不行:

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var y = x + 1; // bar可以访问foo的变量x!
  }
  var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

如果内部函数和外部函数的变量名重名怎么办?

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var x = 'A';
    alert('x in bar() = ' + x); // 'A'
  }
  alert('x in foo() = ' + x); // 1
  bar();
}

这说明JavaScript的函数在查找变量时从自身函数定义开始,从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量,则内部函数的变量将“屏蔽”外部函数的变量。

变量提升

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}

foo();

虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。但是alert显示Hello, undefined,说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。

对于上述foo()函数,JavaScript引擎看到的代码相当于:

function foo() {
  var y; // 提升变量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量:

function foo() {
  var
    x = 1, // x初始化为1
    y = x + 1, // y初始化为2
    z, i; // z和i为undefined
  // 其他语句:
  for (i=0; i<100; i++) {
    ...
  }
}

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上,JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性:

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

因此,直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了,由于函数定义有两种方式,以变量方式var foo = function () {}定义的函数实际上也是一个全局变量,因此,顶层函数的定义也被视为一个全局变量,并绑定到window对象:

'use strict';

function foo() {
  alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

进一步大胆地猜测,我们每次直接调用的alert()函数其实也是window的一个变量:

'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}

// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

这说明JavaScript实际上只有一个全局作用域。任何变量(函数也视为变量),如果没有在当前函数作用域中找到,就会继续往上查找,最后如果在全局作用域中也没有找到,则报ReferenceError错误。

名字空间

全局变量会绑定到window上,不同的JavaScript文件如果使用了相同的全局变量,或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如:

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
  return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中,会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的:jQuery,YUI,underscore等等。

局部作用域

由于JavaScript的变量作用域实际上是函数内部,我们在for循环等语句块中是无法定义具有局部作用域的变量的:

'use strict';

function foo() {
  for (var i=0; i<100; i++) {
    //
  }
  i += 100; // 仍然可以引用变量i
}

为了解决块级作用域,ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量:

'use strict';

function foo() {
  var sum = 0;
  for (let i=0; i<100; i++) {
    sum += i;
  }
  i += 1; // SyntaxError
}

常量

由于varlet申明的是变量,如果要申明一个常量,在ES6之前是不行的,我们通常用全部大写的变量来表示“这是一个常量,不要修改它的值”:

var PI = 3.14;

ES6标准引入了新的关键字const来定义常量,const与let都具有块级作用域:

'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错,但是无效果!
PI; // 3.14
Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
详解微信小程序 登录获取unionid
Jun 27 #Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 #Javascript
详解vue项目构建与实战
Jun 27 #Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 #Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 #Javascript
微信小程序商品到详情的实现
Jun 27 #Javascript
微信小程序的分类页面制作
Jun 27 #Javascript
You might like
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
django中嵌套的try-except实例
2020/05/21 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
员工培训邀请函
2014/01/11 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2014年团队工作总结
2014/11/24 职场文书
表扬信格式模板
2015/05/05 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang