引例
//1问
// console.log(num);
//2问
console.log(num); //undefined
var num = 10;
//3问
fn();
function fn() {
console.log(11);
}
//4问
fun();
var fun = function () {
console.log(22);
}
步骤
js引擎运行js主要分为2步:
- 预解析
- 代码执行
预解析:把JS里面所有的var还有function提升到当前作用域的最前面
主要分为:
- 变量提升:把所有的变量声明提升到作用域的最前面。注意:只是声明不赋值
- 函数提升:就是把所有的函数声明提升到作用域的最前面,但是不调用函数
代码执行:按照代码的书写顺序从上往下执行
结论
所以对于引例的第四问,代码可以等价为
var fun;
fun();
fun = function(){
console.log(22);
}
所以问4 的运行结果是ERROR
结合函数声明的原因,也解释了问3为什么可以顺利执行,相当于在预解析的时候已经对函数进行了初始化了
案例1
//案例1
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//相当于执行了以下操作
var num
function fun() {
var num
console.log(num);
num = 20;
}
num = 10;
fun();
运行结果:
案例2
//案例2
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
//等价于
var num;
function fn() {
var num
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fn();
运行结果:
案例3
//案例3
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
注意,第三行的连等赋值相当于
var a = 9; b = 9; c = 9;
其中b、c没有var赋值,当全局变量来看
所以
console.log( c );
console.log( b );
这两句话不会报错,可以正常执行,但是a在外面并没有赋值,最后会报错
所以结果如下
写在最后
注:上述笔记均来自JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程 这一课程的学习记录,主要供自己的学习分享
各位看官,都看到这里了,麻烦动动手指头给博主来个点赞8,您的支持作者最大的创作动力哟! <(^-^)>
才疏学浅,若有纰漏,恳请斧正
本文章仅用于各位同志作为学习交流之用,不作任何商业用途,若涉及版权问题请速与作者联系,望悉知