预解析详解

预解析导读

    • 1.1预解析
    • 1.2变量预解析和函数预解析
    • 1.3预解析案例

1.1预解析

js解析器在运行代码的时候分两步:预解析和代码执行。

  • js引擎会把里面所有的var 还有 function 提升到当前作用域的最前面
  • 代码执行——按照书写顺序依次执行

1.2变量预解析和函数预解析

!!!预解析分为:变量预解析(变量提升)和函数预解析(函数提升)

  • 变量提升就是把所有的变量声明放到当前作用域最前面,不提升赋值操作(举个例子)
console.log(num);
var num = 100;
//下面进行预解析
var num;//这个意思就是将变量声明放到最前面,下面代码不变
console.log(num);
num = 100;
//所以打印结果是undefined
下面这个也是变量呦,fun是变量名不是函数名之前的文章有提到
fun();
var fun = function {
	console.log(22);
	}
//相当于以下代码
var fun;
fun();
fun = function {
	console.log(22);
	}
  • 函数提升自然也是这个意思(举个例子)
fun()
function fn(){
	console.log(22);
}
在这里会把函数声明预解析放到前面所以不会报错,是正常的

利用关键字申请函数是可以这样的,但是前面的用变量申请函数就不可以啦。

1.3预解析案例

方法:先进行预解析,再按照作用域链的方式(就近原则)查找数据。

案例1
var num = 10;
fun();

function fun() {
    console.log(num);
    var num = 20;
}
相当于执行了以下操作
var num;//变量预解析
function fun() {//函数预解析
    var num;
    console.log(num);//这里就近原则输出undefined
    num = 20;
}
num = 10;
fun();

再来一题

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();

答案:undefined 20;

面试题:

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
   var a = b = c = 9;
   console.log(a);
   console.log(b);
   console.log(c);
}
//9 9 9 9 9 undefined

你可能感兴趣的:(javascript,前端,vue.js)