作为世界上最优美的语言javascript的使用者,呵呵,js的魅力是无穷的,今天来聊聊他的魅(dan)力(teng)之一,变量提升。

  每种语言所定义的变量基本都会有一定得作用域,而js的作用域则存在着一定的陷阱。首先看一下下面一道题:

<script>
var str1 = "haha";
var str2 = "hehe"; function t1() {
console.log(str1);
console.log(str2); var str2 = "kidding";
console.log(str2);
} t1(); </script>
结果是:
haha
undefine
kidding     

纳尼?hehe哪去了?结果不应该是:haha hehe kidding吗?

实际上这里就有一个变量提升的问题。如果函数写成这样,你可能就一目了然了

<script>
var str1 = "haha";
var str2 = "hehe"; function t1() {
    var str2;
     console.log(str1); 
     console.log(str2);      str2 = "kidding";
     console.log(str2);
  }    t1();
</script>

实际上js在解析的时候正是按照这样的执行顺序进行的,在执行到t1内部的时候,会优先找到函数内部作用域里的变量执行,而且函数内的所有var 声明function声明都会被提到函数体的最上方执行。并且var 声明会先声明之后,执行到赋值的时候再赋值。

再看下面的例子:

<script>
function t(userName) {
console.log(userName); function userName() {
console.log('tom');
}
}
t('toby');
</script>

由于function声明会被提前到函数体最上方,所以相当于这样:

function t(userName) {
function userName() {
console.log('tom');
}
console.log(userName);
}
t('toby');

结果很明显是:

function userName(){

  console.log('tom');

}

但是像下面这样的函数表达式,则会把var t2进行提升,而后再对t2进行赋值

<script>
  test();   var test = function () {
console.log('hello toby');//这里会输出什么?
};
</script>
解析后变成:
<script>
  var test ;
  test();   test = function () {
console.log('hello toby');//这里会输出什么?
};
</script>

由于执行到test()的时候,test还是一个undefine所以代码会报错。

但是变量提升只是在该变量在改作用域内从未出现的时候才会发生。看下面的题:

<script>
function t(userName) {
console.log(userName);// (1)
var userName = function () {
console.log(userName);//(2)
}
userName();//(3)
}
t('haha');
</script>

如果按照刚才所说的变量提升,可能会认为结果是:

(1) 处为undefine

(2)处是

function () {
console.log(userName);//(2)
}
实际上结果是:(1)处输出的是haha ,原因在于执行到t函数内部的时候,userName这个变量在传参的时候在这个内部作用于内已经存在了,所以不会进行变量提升,而是直接使用已经
存在的userName='haha'。(2)执行(3)的时候userName就是一个function了,所以(2)处的结果就一目了然了。 自己的一番拙见,如有不对,还望指出。
参考链接:http://www.jianshu.com/p/43bf4f2e0d57?from=singlemessage

js变量提升小记的更多相关文章

  1. js 变量提升+方法提升

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

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

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

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

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

  4. JS变量提升和作用域

    一.JS变量提升 1.当浏览器引擎解析js代码时,将js中的所有一开始就是var声明的和function声明的都提升到全局.此时又叫全局作用域 console.log(aa); console.log ...

  5. js变量提升的坑

    关于js变量提升 变量提升 在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念 原理: 先查看有没有函数变量bb 查看形参有没有bb 查看全局有没有bb 报错, 找 ...

  6. js 变量提升和函数提升原理

    关于js的变量,开始的时候我们都会被告知,变量声明应该在引用该变量之前.关于为什么要这样做呢,开始的时候本着会用就行的目的,也没去深究.不过后来经常会发现一些让人很费解的..姑且称为现象吧.先看一段代 ...

  7. 关于JS变量提升的一些坑

    function log(str) { // 本篇文章所有的打印都将调用此方法 console.log(str); } 函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 变量声明.命名 ...

  8. JS 变量提升

    var a = 1; function foo() { console.log(a); var a = 2; } foo(); //undefined 根据变量提升机制,最后得出undefined; ...

  9. js变量提升与函数提升

    在es6之前,js语言并没有块级作用域,即{}形成的作用域,只有全局作用域和函数作用域,所谓的提升,即是将该变量的声明或者函数的声明提升,举个例子 console.log(global); //und ...

随机推荐

  1. ajax接受json响应

    一.显示页面(ajax_xml.html) body部分 <!-- 支持多选的列表框 --> <select name="first" id="firs ...

  2. Python的下划线_

    1.单下划线(_) 通常情况下,单下划线(_)会在以下3种场景中使用: 1.1 在解释器中: 在这种情况下,"_"代表交互式解释器会话中上一条执行的语句的结果.这种用法首先被标准C ...

  3. .Net Ajax跨域请求实现

    下一阵子要做一个网站Web储备一下知识,AJAX 实现跨域请求,估计会用到,以前在学  WebServer  时候老师整理的一个文档,现在便于查阅和使用现在放到我的博客中. 一般平时我写web页面的时 ...

  4. Linux chgrp

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chgrp 基础的命令 命令名称:chgrp 命令英文原意:change fi ...

  5. 《程序员的思维修炼:开发认知潜能的九堂课》【PDF】下载

    <程序员的思维修炼:开发认知潜能的九堂课>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196325 内容简介 运用一门程序设计语言 ...

  6. C#中的GET和SET访问器

    我们在学习C#语法的属性时,都要首先和GET,SET访问器打交道,从英文的字面意思上理解,GET应该就是获得什么什么,而SET应该是设置什么什么,那我们看一下,官方是怎么定义这对访问器的:get是读取 ...

  7. listbox控件使用

    1. 属性列表: SelectionMode    组件中条目的选择类型,即多选(Multiple).单选(Single)    Rows             列表框中显示总共多少行    Sel ...

  8. P、NP、NP完全问题

    如果一个算法的最差时间效率属于O(p(n)),则该算法可以在多项式的时间内对问题进行求解,其中p(n)是输入规模n的一个多项式函数. 可以在多项式时间内求解的问题是易解的.不能在多项式时间内求解的问题 ...

  9. 关于git的一些理论知识

    一.什么是版本控制器 好多刚用git的coder一说起git,就随口会说出版本控制器嘛,我问那是干嘛的,大部分人就回答上传代码的.然后会用,但是有些理论你问他们他们就不知道了,比如不是代码的文件就不能 ...

  10. .NET使用DAO.NET实体类模型操作数据库

    一.新建项目 打开vs2017,新建一个项目,命名为orm1 二.新建数据库 打开 SqlServer数据库,新建数据库 orm1,并新建表 student . 三.新建 ADO.NET 实体数据模型 ...