今天在知乎看前端面试题的时候,看到这样的问题,发现自己懂的真的是太少了,看了给的例子,所以写一下自己的理解。

首先放一段代码:

var v= “hello JavaScript”;
alert(v);

  很明显,这样的是会弹出对话框;

将alert(v)写到一个函数中:

var v= “hello JavaScript”;
function test(){
alert(v);
};
test();

  这样弹出的结果肯定也是和第一个一样;那么下面这种方式输出的结果是什么?

var bar=1;
function test(){
console.log(bar);
var bar=2;
console.log(bar);
}
test();

  第一个console会打印undefined,第二个打印2;

这就涉及到了变量提升,同时也涉及了JavaScript的作用域的问题,JavaScript中浏览器解析变量的时候,会先在test()函数中进行变量的解析,console.log(bar);输出时浏览器在test()函数中寻找变量bar,但是因为在它的后面才定义了bar变量,,所以变量提升,浏览器把定义的变量放到了前面,但是为什么不应该是2呢?

再看下面的代码:

function(){
var a='one';
var b='two';
}

  这个函数中用了这种定义变量并同时赋值的方式,其实相当于:

function(){
var a,b;
a='one';
b='two';
}

  这也就是为什么输出的不是2了,var bar = 2;就相当于先定义了var bar;之后又给bar=2,但是bar的变量提升所以在执行console.log(bar);的时候会是undefined;后面的那个输出就不说了,很明显是正常输出2;

这也是涉及了作用域的问题,浏览器寻找变量是层层向上寻找,像下面这个例子:

var t=4;
function test(){
var Oitem=12;
funciton bar(){
var Titem=34;
console.log(t+" "+Oitem+" "+Titem);
}
}

  输出的时候,bar()函数中对t变量进行寻找,首先在bar函数的作用域中进行查找,但是在bar函数中没有定义t变量,所以又会进行上一层的函数中查找,即对test()函数中进行查找,但是依然没有找到,所以会继续进行再上一层的查找,在window的作用域中找到了。

JavaScript变量提升及作用域的更多相关文章

  1. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  2. javascript变量声明及作用域总结

    javascript变量声明及作用域总结 一.总结 一句话总结:还是得好好看书,光看视频是不得行的,浅学无用,要相互印证,要真正理解才有用,比如<Javascript权威指南> 书 1.j ...

  3. JavaScript变量提升和函数声明预解析

    1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...

  4. js javascript变量提升

    var:变量提升(无论声明在何处,都会被提至其所在作用域的顶部) let:无变量提升(所在的块内,未到let声明时(即let声明之前),是无法访问该变量的(not defined)),let变量不能重 ...

  5. JavaScript变量提升 面试题

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. javascript变量类型及作用域

    javascript变量类型及作用域 一.简介 变量类型 ECMAScript变量可能包含两种不同类型的数据值:基本类型和引用类型. 基本类型 基本类型指的是简单的数据段,5种基本数据类型:undef ...

  7. 关于JavaScript变量提升的理解

    废话不说,直接上代码(这是在JavaScript面对对象编程指南上面看到的一个例子) var a=123; function f(){ alert(a); var a=1; alert(a); } f ...

  8. javascript变量声明 及作用域

    javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...

  9. 【转】javascript变量声明 及作用域

    javascript变量声明提升(hoisting) javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看 ...

随机推荐

  1. mongodb数据库的导出与导入

    数据库的导出 导出类型为json,数据库:mapdb,集合:bike 字段:bikeId,lat,lng,current_time,source ,条件为source字段为ofo第一条数据 mongo ...

  2. Silverlight之我见——数据批示(2)

    接着上一回的话题,继续来研究数据批示特性,先拿简单的RageAttribute来弄弄,接着上次的示例,添加一个Age属性,并加上RangeAttribute. [Range(20,60,ErrorMe ...

  3. noip模拟赛 党

    分析:一道非常恶心的dp题.每个人要么选或不选,很像是0-1背包,可以套用背包问题的状态,但是因为题目要求3个值,所以可以再加一维表示3个答案. f[i][j][k][l][p][0/1/2]表示i个 ...

  4. [Bzoj4196] [NOI2015] 软件包管理器 [树链剖分,线段树]

    题解摘要:树链剖分后用线段树区间查询修改,对于安装软件,将改点到根的路径全部变为1,对于卸载软件,将子树清空.注意边界,编号是从0开始的,容易漏掉树根. 第一次写树剖- #include <io ...

  5. 【ACM】nyoj_6_喷水装置(1)_201308150853

    喷水装置(一)时间限制:3000 ms  |  内存限制:65535 KB 难度:3描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它为中心 ...

  6. linux 下ip命令对比ifconfig命令

    原文:https://linux.cn/article-3144-1.html ------------------------------------------------------------ ...

  7. HDOJ题目3440 House Man(差分约束)

    House Man Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. iOS 代码方式设置按钮标题、图片的偏移

    button.imageEdgeInsets = UIEdgeInsetsMake(0,1 , 2, 3); button.titleEdgeInsets = UIEdgeInsetsMake(0,1 ...

  9. 大数据处理之道(实验方法&lt;二&gt;)

    一:交叉验证(crossvalidation)(附实验的三种方法)方法简单介绍   (1) 定义:交叉验证(Cross-validation)主要用于建模应用中,比如PCR(Principal Com ...

  10. Java-CyclicBarrier的简单样例

    内容:一个主任务等待两个子任务,通过CyclicBarrier的await()实现.此Runnable任务在CyclicBarrier的数目达到后,全部其他线程被唤醒前被运行. public clas ...