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

首先放一段代码:

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. proxy 跨域配置, 针对有axios的baseURL

    1.首先主要的config文件下的index.js中的proxytable配置 proxyTable:{ '/proxy': { target:'http://192.168.2.141:8080', ...

  2. 暑假集训D20总结

    刷题 今天是瞎XX切题的一天 我要是不写题解的话,我自己都不知道刷了多少专题 数学什么的= = 生活 也就那样吧,没啥特别的 这两天倒是特别鬼畜 先是我点了一下某喵的$cena$,然后他的$cena$ ...

  3. CF410div2 A. Mike and palindrome

    /* CF410div2 A. Mike and palindrome http://codeforces.com/contest/798/problem/A 水题 */ #include <c ...

  4. 关于在JSP页面中为什么一定要用${pageContext.request.contextPath}来获取项目路径,而不能用${request.contextPath}?

    这里的疑问在于pageContext和request都是JSP中的内置对象之一,为什么不直接用${request.contextPath}来获取项目路径? 出现这种疑问,其实是将JSP的内置对象和EL ...

  5. [bzoj4282]慎二的随机数列_动态规划_贪心

    慎二的随机数列 bzoj-4282 题目大意:一个序列,序列上有一些数是给定的,而有一些位置上的数可以任意选择.问最长上升子序列. 注释:$1\le n\le 10^5$. 想法:结论:逢N必选.N是 ...

  6. Swift: 一句话获取虚拟机上APP所在的目录

    在XCode6上,虚拟机的App的存放位置发生了变化,通过下面语句,我们可以立即获得其所在的位置: println(NSTemporaryDirectory())

  7. Zend_Form 创建、校验和解析表单的基础--(手冊)

    1.  创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...

  8. Android 开源框架Universal-Image-Loader全然解析(一)--- 基本介绍及使用

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303).请尊重他人的辛勤劳动成果,谢谢! 大家好! ...

  9. C++ Primer 学习笔记_5_变量和基本类型(续2)

     变量和基本类型 七.枚举 枚举不但定义了整数常量集,并且还把它们聚集成组. 枚举与简单的const常量相比孰优孰劣, 通过以下一段代码. 一看便知: enum {input, output, a ...

  10. 【oracle 11G Grid 】Crsctl start cluster 和 crsctl start crs 有差别么?

     [oracle 11G Grid ]Crsctl start cluster 和 crsctl start crs 有差别么? q:Crsctl start cluster 是 11.2新特性和 ...