标签：顺序 06 变量 JavaScript myname log console showName 函数

说明

【浏览器工作原理与实践】专栏学习笔记

例子

使用过 JavaScript 开发的程序员应该都知道，JavaScript 是按顺序执行的。若按照这个逻辑来理解的话，那么：下面的例子

1. 当执行到第 1 行的时候，由于函数 showName 还没有定义，所以执行应该会报错；
2. 同样执行第 2 行的时候，由于变量 myname 也未定义，所以同样也会报错。

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

但是执行结果却是：

变量提升（Hoisting）

声明和赋值

变量的声明和赋值

var myname = '极客时间'

var myname    //声明部分
myname = '极客时间'  //赋值部分

函数的声明和赋值

// 完整的函数声明，没有涉及到赋值操作
function foo(){
  console.log('foo')
}

// 函数是先声明变量 bar，再把function(){console.log('bar')}赋值给 bar。
var bar = function(){
  console.log('bar')
}

所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。

模拟变量提升

调整一下代码如下图：

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

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

效果跟上面的代码一样，函数和变量在执行之前都提升到了代码开头。

JavaScript 代码的执行流程

实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。

1. 编译阶段

第一部分：变量提升部分的代码。

var myname = undefined
function showName() {
    console.log('函数showName被执行');
}

第二部分：执行部分的代码。

showName()
console.log(myname)
myname = '极客时间'

细化JavaScript 的执行流程：

执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。在执行上下文中存在一个变量环境的对象（Viriable Environment），该对象中保存了变量提升的内容。

从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码。

2. 执行阶段

可以简单地把变量环境对象看成是如下结构

VariableEnvironment:
     myname -> undefined, 
     showName -> function : {console.log(myname)

再来分析一下执行代码的过程

showName()
console.log(myname)
myname = '极客时间'

1. 当执行到 showName 函数时，JavaScript 引擎便开始在变量环境对象中查找该函数，由于变量环境对象中存在该函数的引用，所以 JavaScript 引擎便开始执行该函数，并输出“函数 showName 被执行”结果。
2. 接下来打印“myname”信息，JavaScript 引擎继续在变量环境对象中查找该对象，由于变量环境存在 myname 变量，并且其值为 undefined，所以这时候就输出 undefined。
3. 接下来执行第 3 行，把“极客时间”赋给 myname 变量，赋值后变量环境中的 myname 属性值改变为“极客时间”

代码中出现相同的变量或者函数怎么办？

举个例子：

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

1. **首先是编译阶段。**遇到了第一个 showName 函数，会将该函数体存放到变量环境中。第二个 showName 函数会将第一个 showName 函数覆盖掉。
2. **接下来是执行阶段。**由于是从变量环境中查找 showName 函数，而变量环境中只保存了第二个 showName 函数，所以都是执行的第二个函数。

总结

1. JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。
2. 在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined。
3. 在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。
4. 如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。
5. JavaScript 的执行机制：先编译，再执行。

下面是关于同名变量和函数的两点处理原则：

1. 如果是同名的函数，JavaScript编译阶段会选择最后声明的那个。
2. 如果变量和函数同名，那么在编译阶段，变量的声明会被忽略

习题

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

参考答案：

输出1

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

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

函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

标签：顺序,06,变量,JavaScript,myname,log,console,showName,函数
来源： https://blog.csdn.net/kaimo313/article/details/114927771

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