ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js的变量提升理解

2022-01-01 00:00:30  阅读:191  来源: 互联网

标签:function console log 函数 myname js 理解 showName 变量


先来看一段代码

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

思考一下它的输出
在这里插入图片描述

为什么myname在声明之前就可以输出到控制台=>这就是因为变量提升

上面的代码等价于下边的代码


/*
* 变量提升部分
*/
// 把变量 myname提升到开头,
// 同时给myname赋值为undefined
var myname = undefined
// 把函数showName提升到开头
function showName() {
    console.log('showName被调用');
}

/*
* 可执行代码部分
*/
showName()
console.log(myname)
// 去掉var声明部分,保留赋值语句
myname = '极客时间'

js代码执行前会进行编译(变量提升也就在这个阶段发生)

在这里插入图片描述

注意

在这里插入图片描述

思考题1


function showName() {
    console.log('极客邦');
}
showName();
function showName() {
    console.log('极客时间');
}
showName(); 

在这里插入图片描述

分析一下执行过程

  • 首先是编译阶段。遇到了第一个 showName 函数,会将该函数体存放到变量环境中。接下来是第二个 showName 函数,继续存放至变量环境中,但是变量环境中已经存在一个 showName 函数了,此时,第二个 showName 函数会将第一个 showName 函数覆盖掉。这样变量环境中就只存在第二个 showName 函数了。
  • 接下来是执行阶段。先执行第一个 showName 函数,但由于是从变量环境中查找 showName 函数,而变量环境中只保存了第二个 showName 函数,所以最终调用的是第二个函数,打印的内容是“极客时间”。第二次执行 showName 函数也是走同样的流程,所以输出的结果也是“极客时间”。

思考题2


showName()
var showName = function() {
    console.log(2)
}
function showName() {
    console.log(1)
}

在这里插入图片描述

分析一下执行过程

  • 编译阶段:
    var showName = undefined
    function showName(){console.log(1)}

  • 执行阶段:
    showName()//输出1
    showName=function(){console.log(2)}
    //如果后面再有showName执行的话,就输出2因为这时候函数引用已经变了

标签:function,console,log,函数,myname,js,理解,showName,变量
来源: https://blog.csdn.net/xinbaiyu/article/details/122263670

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有