从一个例子来理解函数声明预解析

LYF edited this page Mar 18, 2016 · 5 revisions

先来看一个例子:

console.log(sayHello()); //  Hello function 

var sayHello = function() {
   return 'Hello var';
};
console.log(sayHello()); // Hello var 

function sayHello(name) {
   return 'Hello function';
};
console.log(sayHello()); // Hello var 

第一轮处理:

第一轮处理是JS引擎干的事儿,此时并没有真正的执行代码

1.函数声明预解析。在全局变量对象中声明一个变量sayHello,并初始化其值为

function(name) {
   return 'Hello function';
};

2.第一轮接着往下走,现在遇到了一个变量声明var sayHello,由于全局变量对象上已经有了同名变量sayHello,且此同名变量已经有值,所以会忽略这个变量声明。

3.第一轮处理完毕

第二轮处理:

第一轮处理完毕之后,进入第二轮,即JS引擎开始真正的执行你写的代码了

1.遇到一个函数调用 console.log(sayHello());,查询全局变量对象,发现有此函数,调用之(此时的函数值是函数声明所声明的函数值)。

2.遇到一个赋值语句

var sayHello = function() {
   return 'Hello var';
};

把新值赋值给sayHello变量。

3.遇到一个函数调用console.log(sayHello());,查询全局变量对象,发现有此函数,调用之(此时的函数值就是第2步设置的值)

4.遇到一个函数声明,由于其值已经被预声明和初始化,所以什么也不干

5.遇到一个函数调用console.log(sayHello());,查询全局变量对象,发现有此函数,调用之(此时的函数值也是第2步设置的值)

6.第二轮执行完毕


稍加变化的例子:

console.log(sayHello()); //  Hello function 

function sayHello(name) {
   return 'Hello function';
};

console.log(sayHello()); // Hello function 

var sayHello = function() {
   return 'Hello var';
};
console.log(sayHello()); // Hello var 

分析方法同上。

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.