麦子学院 2017-07-30 23:28
Javascript中如何提升变量与函数？
回复:0 查看:2245
一.提升
1.js代码的执行分为两个步骤
a.
预解析
提升（hoisting
）
JavaScript
代码在预解析阶段，会对以
var
声明的变量名，和
function
开头的语句块，进行提升操作
b.
执行
func();
function
func(){
alert("Funciton has been called");
}
2.如何提升
a.
变量的提升
alert(
a);
var a = 1;
提升之后的代码模拟
var a;
alert(
a);
a = 1;
b.
函数同名，如何提升
预处理的时候，会将两个函数全部提升，但是后面的函数会覆盖掉前面函数
func1(); //last
function
func1(){
console.log('This is first func1');
}
func1(); //last
function
func1(){
console.log('This is last func1');
}
//
预解析提升后的代码
function
func1(){
console.log('This is first func1');
}
function
func1(){
console.log('This is last func1');
}
func1(); //last
func1(); //last
c.
变量和函数同名
在提升的时候，如果有变量和函数同名，会忽略掉变量，只提升函数
alert(foo); //undefined
函数体
function
foo(){}
var foo = 2;
alert(foo); //2
//
预解析 提升后的代码
function
foo(){};
alert(foo);
foo=2;
alert(foo);
3.变量提升是分作用域的
var num = 456;
function test(){
console.log(num);
var num = 10;
}
test();//
提升代码之后
var num;
num = 456;
function test(){
var num; //
定义未赋值
console.log(num);
num = 10;
}
test(); // undefined
var num = 456;
function
f1() {
console.log(num);
num = 10;
}
f1();
console.log(num);
//
提升之后的代码
var num;
function
f1(){
console.log(num);
num = 10;
}
num = 456;
f1(); //456
console.log(num); //10
当调用
f1
（）时，定义了一个新的全局变量，
num=10
；
4.函数表达式与函数声明提升
a.
函数声明全部被提前
;
b.
函数表达式（变量声明）仅将变量提前，赋值操作没有被提前
;
foo(); //
函数声明
foo_later(); // foo_later is not a function
function
foo(){ console.log('
函数声明
'); }
var foo_later =
function(){ console.log('
函数表达式
'); }
提升之后的代码
function
foo(){ console.log('
函数声明
'); } //
函数声明全部被提前
var foo_later; //
函数表达式（变量声明）仅将变量提前，赋值操作没有被提前
foo();
foo_later();
foo_later =
function(){ console.log('
函数表达式
'); }
5.变量搜索原则
a.
在使用变量的时候
首先在所在的作用域中查找；
如果找到了
就直接使用；
如果没有找到
就去上级作用域中查找。
b.
重复以上步骤
如果直到0
级作用域链也就是全局作用域还没有找到，报错。
var num = 456;
function
f() {
num = 678;
function
foo() {
var num = 999;
console.log(num); // 999
}
foo();
console.log(num); //
}
f();
提升之后的代码
var num;
function
f(){
function
foo() {
var num;
num = 999;
console.log(num); // 999
}
num = 678;
foo();
console.log(num); //678
}
num = 456;
f();
来源：简书