JS变量提升问题（及一些作用域面试题）

摘要: 变量提升

变量声明提升的作用在一个函数体内声明的变量，JS解析器都会将其移动到函数体的顶部

var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();    //Goodbye Jack

等价为==>

var name = 'World!';
(function () {
var name;
if (typeof name === 'undefined') {
name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();

执行的时候有个变量查找的过程，如果在当前函数体内没找到，就会到定义的函数体的外层函数中去寻找，一直向上到全局对象中寻找，还是找不到就会报

TypeError

错误

var name = 'World!';
(function () {
console.log(name)     // World!
})();

以上代码就表现为这种行为~~

2、函数同名情况提升

func01();                   //打印last
function func01() {
console.log("first");
}

func01();                   //打印last
function func01() {
console.log("last");
}

//模拟提升后的情况
function func01() {
console.log("first");
}

function func01() {
console.log("last");
}

func01();
func01();

3、变量名和函数同名的情况（结论：如果出现变量和函数同名的情况,则在进行提升的时候,只会提升函数到当前作用域顶端而忽略变量的提升操作）

console.log(a);                     //打印function
function a() {
console.log("我是一个函数");
}
var a = 20;
console.log(a);                     //打印20

//变量和函数提升后的结果 错误
//    function a() {
//        console.log("我是一个函数");
//    }
//    var a ;
//    console.log(a);
//    a = 20;
//    console.log(a);

//变量和函数提升后的结果 正确
function a() {
console.log("我是一个函数");
}
console.log(a);
var a = 20;
console.log(a);

********************************************************************************

变量提升和作用域笔试题 1、

// f1();
// console.log(b);
// console.log(c);
// console.log(a);

// function f1(){
//   var a = b = c = 9;
//   console.log(a);      // 9 9 9 9 9 (not define)
//   console.log(b);      // 原因只有a是局部变量
//   console.log(c);      // b,c都是全局变量
// }

2、

/*f2();
console.log(a);
console.log(b);
console.log(c);

function f2(){
var a = 9,b = 9,c = 9;
console.log(a);         // 9 9 9 (not define)
console.log(b);         // 原因a,b,c都是局部变量
console.log(c);
console.log(c);
}*/

3、

/* var num = 1;
function f3(){
console.log(num); // 1  全局变量影响
num = 2;
}
f3();*/

4、

/*var num = 1;
f4();
function f4(num){
console.log(num);// undefine 有形参的情况并且
num = 2;         //没有传实参默认传空值
}*/

5、

/*var num = 1;
f5(num);
function f5(num){
console.log(num);// 1  参数影响
num = 2;
}*/

6、in 关键字 判断某个对象中是否有某个属性

function f1(){
var a;
if("a" in window){
var a = 10;
}
alert(a);        // 10
}
f1();

if("a" in window){
var a = 10;
}
alert(a); // 10

//预解析
var a;
if("a" in window){
a = 10;
}
alert(a);

var a;
if(!"a" in window){
a = 10;
}
alert(a); // undefined

7、

var foo = 1;
function bar() {
if(!foo) {
var foo = 10;
}
alert(foo);
}
bar();   // 10
//
//        //提升后的代码
//        var foo;
//        function bar(){
//            var foo;
//            if(!foo) {
//                foo = 10;
//            }
//            alert(foo); //??10
//        }
//        foo = 1;
//        bar();

8、

function Foo() {
getName = function(){ alert(1); };
return this;
}

Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); }

Foo.getName(); //       2
getName(); //           4
Foo().getName(); //     1  -->  使this指向window，Foo()函数的getName也就是window的属性
getName(); //           1
new Foo.getName(); //   2  -->  new (Foo.getName());
new Foo().getName(); // 3  -->  (new Foo()).getName();
new new Foo().getName(); // 3  -->  new 3 = 3