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

2019独角兽企业重金招聘Python工程师标准>>>

变量声明提升的作用在一个函数体内声明的变量，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

 

转载于:https://my.oschina.net/u/2949632/blog/793898