说明
浏览器工作原理与实践专栏学习笔记
例子
使用过 JavaScript 开发的程序员应该都知道,JavaScript 是按顺序执行的。若按照这个逻辑来理解的话,那么:下面的例子
- 当执行到第 1 行的时候,由于函数 showName 还没有定义,所以执行应该会报错;
- 同样执行第 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 = '极客时间'
- 当执行到 showName 函数时,JavaScript 引擎便开始在
变量环境对象
中查找该函数,由于变量环境对象中存在该函数的引用,所以 JavaScript 引擎便开始执行该函数,并输出“函数 showName 被执行”结果。 - 接下来打印“myname”信息,JavaScript 引擎继续在变量环境对象中查找该对象,由于变量环境存在 myname 变量,并且其值为 undefined,所以这时候就输出 undefined。
- 接下来执行第 3 行,把“极客时间”赋给 myname 变量,赋值后变量环境中的 myname 属性值改变为“极客时间”
代码中出现相同的变量或者函数怎么办?
举个例子:
function showName() {
console.log('极客邦');
}
showName();
function showName() {
console.log('极客时间');
}
showName();
- **首先是编译阶段。**遇到了第一个 showName 函数,会将该函数体存放到变量环境中。第二个 showName 函数会将第一个 showName 函数覆盖掉。
- **接下来是执行阶段。**由于是从变量环境中查找 showName 函数,而变量环境中只保存了第二个 showName 函数,所以都是执行的第二个函数。
总结
- JavaScript 代码执行过程中,需要先做变量提升,而之所以需要实现变量提升,是因为 JavaScript 代码在执行之前需要先编译。
- 在编译阶段,变量和函数会被存放到变量环境中,变量的默认值会被设置为 undefined。
- 在代码执行阶段,JavaScript 引擎会从变量环境中去查找自定义的变量和函数。
- 如果在编译阶段,存在两个相同的函数,那么最终存放在变量环境中的是最后定义的那个,这是因为后定义的会覆盖掉之前定义的。
- JavaScript 的执行机制:先编译,再执行。
下面是关于同名变量和函数的两点处理原则:
- 如果是同名的函数,JavaScript编译阶段会选择最后声明的那个。
- 如果变量和函数同名,那么在编译阶段,变量的声明会被忽略
习题
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因为这时候函数引用已经变了
函数提升要比变量提升的优先级要高一些,且不会被变量声明覆盖,但是会被变量赋值之后覆盖。