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

首先放一段代码:

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. 新浪微博API生成短链接

    通过新浪微博API,生成短链接,支持一次性转多个长链接 什么是短链接 短链接,通俗来说,就是将长的URL网址,通过程序计算等方式,转换为简短的网址字符串. 短链接服务 国内各大微博都推出了自己的短链接 ...

  2. Windows环境下flask+Apache+mod_wsgi部署及爬坑

    文章目录 安装python Windows 环境使用virtualenv和virtualenvwrapper 安装mod_wsgi 安装nginx 安装Apache 遇到的坑 安装Apache遇到的坑 ...

  3. Golang之路

    目录 Golang之路 Golang之路 Golang(一) - 开篇必须吹牛逼 Golang(二) - 第一个go程序和基本语法 Golang(三) - 函数 Golang(四) - 流程控制 Go ...

  4. Python网络请求urllib和urllib3详解

    Python网络请求urllib和urllib3详解 urllib是Python中请求url连接的官方标准库,在Python2中主要为urllib和urllib2,在Python3中整合成了urlli ...

  5. 【codeforces 767B】The Queue

    [题目链接]:http://codeforces.com/contest/767/problem/B [题意] 排队去办护照; 给你n个人何时来的信息; 然后问你应该何时去才能在队伍中等待的时间最短; ...

  6. FOJ2250 不可能弹幕结界

    Problem 2250 不可能弹幕结界 Time Limit: 1000 mSec    Memory Limit : 65536 KB Problem Description 咲夜需要穿过一片弹幕 ...

  7. hdu_1008_Elevator_201308191629

    ElevatorTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  8. 各个领域常见的一些bug汇总

    一 Android系统功能测试设计的测试用例 a.对所测APP划分模块 b.详细列出每个模块的功能点(使用Xmind绘制功能图) c.使用等价类划分.边界值.场景发等对各功能点编写测试用例(考虑中断功 ...

  9. HDOJ 5417 Victor and Machine 水

    Victor and Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Othe ...

  10. [python 基础]python装饰器(二)带参数的装饰器以及inspect.getcallargs分析

    带参数的装饰器理解无非记住两点: 1.本质不过在基本的装饰器外面再封装一层带参数的函数 2.在使用装饰器语法糖的时候与普通装饰器不同,必须要加()调用,且()内的内容可以省略(当省略时,admin默认 ...