在ES6标准之前,var 作为唯一的声明变量关键字,本篇将着重介绍var的作用域和变量提升。

1. var Hoisting(变量提升)

va rHoisting:使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它,这种行为称为Hoisting(提升)。

比较注意一点是此提升只是把声明提升上来,而赋值操作还是在原先的位置。

下面以简单的例子来说明:

示例

function foo() {
console.log(x); // => undefined
var x = 1;
console.log(x); // => 1
}
foo();

相当于

function foo() {
var x;
console.log(x); // => undefined
x = 1;
console.log(x); // => 1
}
foo();

2. var Scoping(变量作用域)

在上面的var Hoisting(变量提升)了解到声明会提升到函数或全局内的最顶部,那么其变量的作用域就相当于整个函数或全局。

3. 应用场景

了解了var的Scoping和Hoisting知识点,我们将结合几个场景进一步了解它们。

3.1 函数内声明相同变量

函数内声明了一个跟外部相同名称的变量时,函数外部的变量作用域无法延伸到此函数内。

var x = 1;

function foo() {
var x = 2;
console.log(x);
}
foo(); // => 2
console.log(x); // => 1

结论:foo()函数内部也声明了一个 x 变量,此变量在 foo() 函数内的作用域覆盖了外部 x 变量。

3.2 函数内声明相同变量前调用 return 关键字

首先我们修改下上面的代码,在foo()函数内声明变量前加一个return:

var x = 1;

function foo() {
x = 10;
return; // 新加的代码
var x = 2;
}
foo();
console.log(x); // => 1

运行代码后输出为1。这是为什么呢?

还是因为 var 的变量提升特性,foo() 函数实际为:

3.3 控制语句内声明变量

先回顾下var Hoisting特性的知识点,其中有提到"在函数或全局范围内任何地方声明变量,就相当于在函数或全局内的顶部声明",任何地方也包括了控制语句内

说白了就是var没有块级作用域,在块内声明的变量也会提升到函数或全局内的顶部。

示例1:

说明:在控制语句内声明的变量,在控制语句外面也可以使用

function foo() {
for (var i = 1; i < 10; i++) {}
if (true) {
var x = 2;
}
console.log(i); // => 10
console.log(x); // => 2
}
foo();

示例2:

说明:在控制语句内声明一个与外部同名的变量。

var x = 1;
if (true) {
var x = 10; // 与外部 x 变量同名
}
console.log(x); // => 10

按照var Hoisting特性转换为以下代码:

var x;
x = 1;
if (true) {
x = 10;
}
console.log(x); // => 10
End
菜单加载中...

JavaScript var的作用域和提升的更多相关文章

  1. JavaScript的作用域和提升机制

    JavaScript的作用域和提升机制 你知道下面的JavaScript代码执行时会输出什么吗? 1 2 3 4 5 6 7 8 var foo = 1; function bar() {     i ...

  2. JavaScript 函数作用域的“提升”现象

    在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的.例如 : message = "hello JavaScript ! " ...

  3. 关于JavaScript的词法作用域及变量提升的个人理解

    关于JavaScript的作用域,最近听到一个名词:“词法作用域”:以前没有听说过(读书少),记录一下对此的理解,加深印象. 词法作用域:在JavaScript中,一个函数的作用域,在这个函数定义好的 ...

  4. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  5. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  6. javascript笔记:javascript的关键所在---作用域链

    javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...

  7. 【翻译】JavaScript中的作用域和声明提前

    原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执 ...

  8. JavaScript中的作用域和声明提前

    [翻译]JavaScript中的作用域和声明提前 原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译 ...

  9. javascript的关键所在---作用域链

    javascript的关键所在---作用域链 javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript ...

随机推荐

  1. JavaScript时间处理插件

    摘要:代码返回的有两种时间格式  一种是///  另外一种是---分割的 两个接收参数的说明 timestr  是接收的时间  mark是格式   默认返回的格式是///   加上-  返回的格式是- ...

  2. 摸索出来的chrom调试前后台数据(Java&&Ajax)交互的方法分享一下咯!!!

    1:开始没想分享的,后来看到有大佬分享如何使用Chrom的工具进行调试,哈哈哈哼,我就借着他的博客写一下我摸索的如何进行前后台数据交互吧(注:反正是自己瞎 捣鼓出来的,也许适合我,and我脑补一下吧, ...

  3. 微信小程序 - 上拉加载

    demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'& ...

  4. Linux基本操作笔记

    1.Linux是一个统称,内核是一致的.分为Linux系统管理员和Linux程序员包括管理和软件开发. 2.要掌握Linux,有四步,第一,在Linux平台上的开发,比如,vi.gcc.gdb等和Li ...

  5. 积累jquery一些有意思的函数

    $("#btn").unbind("click"); // 让btn这个元素的点击事件失效 $("#btn").unbind(); // 让 ...

  6. Codeforces 893F - Subtree Minimum Query

    893F - Subtree Minimum Query 题意 给出一棵树,每次询问 \(x\) \(k\),求以 \(x\) 为根结点的子树中的结点到结点 \(x\) 的距离小于等于 \(k\) 的 ...

  7. python 使用paramiko模块上传本地文件到ssh

    我们要了解几个函数: paramiko.Tranport(("目标ip,端口"))#这是上传目标的IP和端口 paramiko.SFTPClient.from_tranport() ...

  8. 【一小时入门】webpack 入门指南

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  9. PE 001~010

    题意: 001(Multiples of 3 and 5):对小于1000的被3或5整除的数字求和. 002(Even Fibonacci numbers):斐波那契数列中小于等于4 000 000的 ...

  10. poj_3281Dining(网络流+拆点)

    poj_3281Dining(网络流+拆点) 标签: 网络流 题目链接 题意: 一头牛只吃特定的几种食物和特定的几种饮料,John手里每种食物和饮料都只有一个,问最多能够满足几头牛的需求(水和食物都必 ...