>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20912 个阅读者 刷新本主题
 * 贴子主题:  JavaScript 变量提升 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-01-30 19:16:46     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript 变量提升

    JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。

    JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

    以下两个范例将获得相同的结果:    

范例 1

       x =  5;  // 变量 x 设置为 5

       elem = document.getElementById( "demo");  // 查找元素

      elem.innerHTML = x;            

      // 在元素中显示 x

      var x;  // 声明 x    

范例 2

    var x;  // 声明 x

    x =  5;  // 变量 x 设置为 5

    elem = document.getElementById( "demo");  // 查找元素
    elem.innerHTML = x;            
  
    // 在元素中显示 x


     要理解以上范例就需要理解 "hoisting(变量提升)"。

     变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。    

JavaScript 初始化不会提升

     JavaScript 只有声明的变量会提升,初始化的不会。

     以下两个范例结果结果不相同:    

范例 1

      var x =  5;  // 初始化 x
      var y =  7;  // 初始化 y

      elem = document.getElementById( "demo");  // 查找元素

      elem.innerHTML = x +  " " + y;   // 显示 x 和 y      

范例 2

       var x =  5;  // 初始化 x

       elem = document.getElementById( "demo");  // 查找元素

       elem.innerHTML = x +  " " + y;   // 显示 x 和 y

        var y =  7;  // 初始化 y


        范例 2 的 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

       范例 2 类似以下代码:

        var x = 5; // 初始化 x

        var y;     // 声明 y

        elem = document.getElementById("demo"); // 查找元素

        elem.innerHTML = x + " " + y;           // 显示 x 和 y

        y = 7;    // 设置 y 为 7        

在头部声明你的变量

        对于大多数程序员来说并不知道 JavaScript 变量提升。

        如果程序员不能很好的理解变量提升,他们写的程序就容易出现一些问题。

        为了避免这些问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。

    
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 JavaScript 严格模式(strict mode)不允许使用未声明的变量。
在下一个章节中我们将会学习到 "严格模式(strict mode)"






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-05 10:15:41 重新编辑]
  Java面向对象编程-->继承
  JavaWeb开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->数据库事务的并发问题的解决方案
  Java网络编程-->用Axis发布Web服务
  精通Spring-->绑定CSS样式
  Vue3开发-->虚拟DOM和render()函数
  qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
  前端面试官指导前端面试攻略
  axios.all()解决并发请求
  Axios拦截器的用法
  javaScript中==和===的区别详解
  基于vue和springmvc前后端分离,json类接口调用介绍
  Vue之引用第三方JS插件,CKPlayer使用
  拯救React的hooks:react的问题和hooks的作用
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  JavaScript 进制转换的实用代码
  SQL NULL 值
  jQuery 遍历DOM 树中的同胞元素
  JavaScript中的HTML DOM Label 对象
  JavaScript Error(错误) 对象
  JavaScript中的 this关键字
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。