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

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

  1. <script>
  2. var str1 = "haha";
  3. var str2 = "hehe";
  4.  
  5. function t1() {
  6. console.log(str1);
  7. console.log(str2);
  8.  
  9. var str2 = "kidding";
  10. console.log(str2);
  11. }
  12.  
  13. t1();
  14.  
  15. </script>
  16. 结果是:
  17. haha
  18. undefine
  19. kidding     

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

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

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

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

再看下面的例子:

  1. <script>
  2. function t(userName) {
  3. console.log(userName);
  4.  
  5. function userName() {
  6. console.log('tom');
  7. }
  8. }
  9. t('toby');
  10. </script>

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

  1. function t(userName) {
  2. function userName() {
  3. console.log('tom');
  4. }
  5. console.log(userName);
  6. }
  7. t('toby');

结果很明显是:

function userName(){

  console.log('tom');

}

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

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

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

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

  1. <script>
  2. function t(userName) {
  3. console.log(userName);// (1)
  4. var userName = function () {
  5. console.log(userName);//(2)
  6. }
  7. userName();//(3)
  8. }
  9. t('haha');
  10. </script>

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

(1) 处为undefine

(2)处是

  1. function () {
  2. console.log(userName);//(2)
  3. }
    实际上结果是:(1)处输出的是haha ,原因在于执行到t函数内部的时候,userName这个变量在传参的时候在这个内部作用于内已经存在了,所以不会进行变量提升,而是直接使用已经
    存在的userName='haha'。(2)执行(3)的时候userName就是一个function了,所以(2)处的结果就一目了然了。
  4.  
  5. 自己的一番拙见,如有不对,还望指出。
    参考链接: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. JAVA入门[11]-jsp几点基础语法

    一.include <%@include file="copyright.jsp"%> <jsp:include page="copyright.jsp ...

  2. 通过gitbub桌面工具同步

    1.先创建目录,和选择路径 2.commit -> sync 3. cd ~/.ssh 查看公钥 在github 添加公钥. 4. 克隆文件git clone git@github.con:cu ...

  3. 50、html补充

    今天补充几个html标签 <body>内常用标签 1.<div>和<span> <div></div> : <div>只是一个块 ...

  4. 【java】io流之字符输出流:java.io.Writer类及子类的子类java.io.FileWriter

    package 文件操作; import java.io.File; import java.io.FileWriter; import java.io.IOException; import jav ...

  5. Effective Java 第三版——9. 使用try-with-resources语句替代try-finally语句

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  6. 在 ReactNative 的 App 中,集成 Bugly 你会遇到的一些坑

    一.前言 最近开新项目,准备尝试一下 ReactNative,所以前期做了一些调研工作,ReactNative 的优点非常的明显,可以做到跨平台,除了少部分 UI 效果可能需要对不同的平台进行单独适配 ...

  7. iOS 本地项目上传github,github管理项目配置

    一.注册github账号   首先需要注册一个github账号,注册地址:https://github.com 接着会来到这 然后会收到一封github发的邮件,进入邮箱验证 二.创建个人的githu ...

  8. n年前,我没钱但年轻,我怕n年后我老时,还是一无所成——2017我的收获和反思

    记得当年我刚从学校里出来时,应该和现在的95后差不多,当时还是很惶恐的,怕找不到工作,怕无法挣到足够的钱买房子支撑家庭,(当然还有其它的担心点),却唯独没意识到自己拥有着最宝贵的财富:年轻. 年轻意味 ...

  9. 关于table布局的推荐使用原因

    一.关于table布局的性能 1.table标签比其他html标签占用更多字节,导致下载时间延迟,占用服务器更多的流量资源: 2.table会阻碍浏览器渲染引擎的渲染顺序,导致页面生成的延迟,造成不良 ...

  10. ElasticSearch 学习记录之ES如何操作Lucene段

    近实时搜索 提交(Commiting)一个新的段到磁盘需要一个 fsync 来确保段被物理性地写入磁盘,这样在断电的时候就不会丢失数据.但是每次提交的一个新的段都fsync 这样操作代价过大.可以使用 ...