变量,作为编程语言最基础的部分,每种语言的变量不尽相同,但又大径相庭。大部分编程语言的变量有块级作用域,如if、for、while... 但JavaScript不纯在块级作用域,而是函数作用域,并且有自己独有的特性--变量提升。(ES6新添加的let、const使其可以用块级作用域)

  对于函数的变量访问时遵循作用域链的,即当前函数运行时会有一个当前作用域,当饮用某个变量时,会先查找当前作用域内是否存在该变量的定义,如果不存在则根据作用域链向上去查找父函数的作用域,有则拿来使用,没有则继续向上直到全局作用域。关于作用域链这里就不仔细描述,简单而言,类似原型链,从全局函数直到当前函数的作用域存在一种相互包含的关系,子可以向上访问,但是父不可以向下访问子函数的变量,这样层层嵌套的关系链。

作用链域如下:

var num = 10;

  function a (){
    console.log(num);
  }   a() ; //结果alert(10),a函数作用域里没有num 所以向上查找外层的作用域,有且等于10所以弹出10而不是undefined.

变量的提升:

var num = 10;

  function a (){
//var num;
    console.log(num);
    var num = 11; //num = 11;
  } a(); // undefined

这段代码中,function a(){}里的var num = 11;就拆分等价于被注释掉的蓝色部分,这就是变量提升--所有的变量都事先被提升到所属函数作用域的头部声明。

再来看看有关函数形参的问题,第一段代码稍加改动:

var num = 10;

  function a (num){
    console.log(num);  
}   a() ; //结果undefined,a函数作用域定义形参num,由于没赋值,所以为undefined

函数的提升:

函数的声明方式有俩种:函数声明和函数表达式,在函数提升方面会有所不同

  函数声明的函数提升:

console.log(fn);  //function fn(){console.log(1);}
function fn(){
console.log(1);
} 等同下面一段代码:
function fn(){
    console.log(1);
} console.log(fn);  //function fn(){console.log(1);}

函数声明中,声明的函数整体被提升到作用域最顶部。

  函数表达式的函数提升:

console.log(fn);  // undefined

var fn = function (){
console.log(1);
} 等同下面一段代码:
var fn;
console.log(fn); // undefined fn = function (){
console.log(1);
}

函数表达式中,类似于上面讲的变量提升,var出来的变量被提到作用域最顶部声明。

如有发现错误之处,欢迎拍砖指正,感激不尽!

最后附加一道经典面试题:http://www.codeceo.com/article/one-javascript-interview.html

js变量提升和函数提升的更多相关文章

  1. 浅谈JS变量声明和函数声明提升

    先来两个问题 很多时候,在直觉上,我们都会认为JS代码在执行时都是自上而下一行一行执行的,但是实际上,有一种情况会导致这个假设是错误的. a = 2; var a; console.log(a); 按 ...

  2. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  3. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. JS逻辑题 技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序

    考查的技术点:  1). 变量提升 2). 函数提升  3). 预处理  4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...

  5. js中的变量提升和函数提升

    从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const: ...

  6. JS——变量提升和函数提升

    一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...

  7. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

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

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

  9. JavaScript:变量提升和函数提升

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

  10. JavaScript: 变量提升和函数提升

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

随机推荐

  1. 创建,删除DOM

    需求说明: 1.上传图片,有删除功能,可上传5张,至少上传一张 html代码如下 <div class="imgUpBox"> <div class=" ...

  2. AngularJS入门教程:日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  3. 【原创】bootstrap框架的学习 第五课

    一.Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式. <!DOCTYPE html> <html> <head> <title&g ...

  4. Printk与sched_clock_init的一点分析

    在分析Linu内核启动的过程中,发现一段"不平常"的日志,感觉产生这段日志的代码肯定是"不可思议"的.因此就大致分析了一下: 日志如下: [ 0.000000] ...

  5. VR全景加盟、720全景、VR全景技术平台-全国招商模式疯狂开始

    VR全景:互联网与实体店的完美结合  VR元年已过,VR项目.VR创业潮转为理性,VR行业分为两个方向:硬件和内容.硬件又分为VR头显和辅助设备,内容又分为VR全景和VR虚拟内容,如游戏.娱乐.根据行 ...

  6. Linux command not found 问题解释

    执行可执行文件 执行文件就是具有可执行权限的文件,如果在文件所在目录上执行 ll 或 ls -l命令时,可能看到如下结果:-rwxr-xr-- 1 usr users 289 Jul 29 09:15 ...

  7. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  8. 【Java SE】利用Java的for循环加random制作小学试卷

    前期介绍:很多同学以为学习一门编程语言,一定要学到很高深的时候才可以做项目,其实不然,很多时候我们不需要学到面向对象的思想,就可以从事一些小项目的开发,来增加自己对开发的热情,比如现在我就可以利用Ja ...

  9. Spring 日期时间处理

    1 Spring自身的支持 1.1 factory-bean <bean id="dateFormat" class="java.text.SimpleDateFo ...

  10. Angular环境准备和Angular cli

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...