JavaScript的变量声明提升问题浅析(Hoisting)

 更新时间:2016年11月30日 10:04:04   投稿:daisy  
大家应该都只奥javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多,这篇文章将再次谈谈关于这方面的问题,有需要的朋友们可以参考借鉴。

一、变量声明提升

      hoisting 英[‘hɔɪstɪŋ] 美[‘hɔɪstɪŋ]

      n. 起重,提升

      v. 把…吊起,升起( hoist的现在分词 )

先来看一个栗子

var cc = 'hello';
function foo(){
 console.log(cc);
 var cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

这里将会输出 undefined'world' 'hello'

此处主要有两个知识点:

      1、作用域

      2、变量声明提升

JavaScript是一门解释性语言,当代码在解释器(如Chrome的V8引擎)环境中执行时,会有一个预解析的过程,此时会将变量声明和函数声明提升至当前作用域的最前方,这个行为被称为声明提升(Hoisting)

再来看上面的例子,此代码有两层作用域,全局作用域和函数foo作用域,而foo中的变量声明在预解析的过程中会被提升至函数作用域的前方,于是代码就会变成这样:

var cc = 'hello';
function foo(){
 var cc;
 console.log(cc);
 cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

当执行到第一个log时,变量cc只是进行了声明,并未赋值,所以打印出的是undefined

二、 函数声明提升

函数的声明有两种方式:函数声明和函数表达式

// 函数声明
function foo(a, b) {
 return a + b;
}
// 函数表达式
var foo = function(a, b) {
 return a + b;
}

解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

当然,也可以函数声明和函数表达式同时使用,如var a = function b(){} ,其结果是只具有函数表达式的作用,b会被自动忽略,所以只会发生变量提升效果。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • 一步步教你使用JavaScript打造一个扫雷游戏

    一步步教你使用JavaScript打造一个扫雷游戏

    javascript作为前端常用的开发语言,越来越多的人都在学习它,下面这篇文章主要给大家介绍了关于如何使用JavaScript打造一个扫雷游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • 简单谈谈JavaScript寄生式组合继承

    简单谈谈JavaScript寄生式组合继承

    寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下
    2021-08-08
  • 微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    这篇文章主要介绍了微信小程序分类菜单激活状态跟随列表滚动自动切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • layUI实现前端分页和后端分页

    layUI实现前端分页和后端分页

    这篇文章主要为大家详细介绍了layUI实现前端分页和后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS 获取文件后缀,判断文件类型(比如是否为图片格式)

    JS 获取文件后缀,判断文件类型(比如是否为图片格式)

    这篇文章主要介绍了JS 获取文件后缀,判断文件类型(比如是否为图片格式),需要的朋友可以参考下
    2020-05-05
  • JavaScript获得选中文本内容的方法

    JavaScript获得选中文本内容的方法

    今天希望实现一个,直接在网页上选中文本,点击收藏夹的链接(javascript)即可弹出新窗口(类似“百度搜藏”和“QQ书签”),新窗口中的文本框即显示了选中的文本。
    2008-12-12
  • JavaScript中数组flat方法的使用与实现方法

    JavaScript中数组flat方法的使用与实现方法

    在Array的显示原型下有一个flat方法,可以将多维数组,降维,传的参数是多少就降多少维,下面这篇文章主要给大家介绍了关于JavaScript中数组flat方法的使用与实现的相关资料,需要的朋友可以参考下
    2022-08-08
  • newxtree.js代码

    newxtree.js代码

    newxtree.js代码...
    2007-03-03
  • png在IE6 下无法透明的解决方法汇总

    png在IE6 下无法透明的解决方法汇总

    解决PNG图片在IE6下的透明这类问题谷歌上很多解决方案,属于非常常见的问题,以前我做的时候,这类透明我都是用gif,而直接避开png,所以到现在我并没有去了解过这个问题。今天就把这个问题整理下,解决方案汇总给大家。
    2015-05-05
  • JS操作字符串转数字的常见方法示例

    JS操作字符串转数字的常见方法示例

    这篇文章主要介绍了JS操作字符串转数字的常见方法,结合实例形式分析了javascript字符串类型转换的常用方法及相关操作技巧,需要的朋友可以参考下
    2019-10-10

最新评论