面试经常出的JavaScript变量提升问题分析

简介: 面试经常出的JavaScript变量提升问题分析

Q1:

var a = 10;
(function a(){
    console.log(a)
    a = 20;
    console.log(window.a)
    var a = 30
    console.log(a)
})()

等同于

var a = 10;
(function a(){
  //内部作用域
  var a;//var a = 30 中的声明被提升
    console.log(a)//undefined
    a = 20;//内部作用域的a赋值20
    console.log(window.a)//window中的a依然是10 
    a = 30//内部作用域的a赋值30
    console.log(a)//打印内部作用域中的a 30
})()

Q2:

var name = '张三';
function fn() {
    if (typeof name === 'undefined') {
        var name = '李四';
        console.log('辛苦了:' + name);
    } else {
        console.log('吃饭没:' + name);
    }
}
fn();

等同于

var name = '张三';
function fn() {
  var name ;// var name = '李四'; 中的声明被提前到函数作用域里面
    if (typeof name === 'undefined') {//此时成立
        name = '李四';
        console.log('辛苦了:' + name);
    } else {
        console.log('吃饭没:' + name);
    }
}
fn();

Q3:

var a=10,b=20,c=30;
function fn(a){
  a=1;
  var b=2;
  c=3
}
fn(100)
console.log(a,b,c);

等同于

var a=10,b=20,c=30;
function fn(a){
  //函数调用,形成局部作用域,形参a在内部局部作用域 a=100
  var b;//b在内部变量提升
  a=1;//内部局部作用域 a设置为1
  b=2;//内部局部作用域 b设置为2
  c=3;//全局作用与c被设置值3
}
fn(100)
//可以看到只有c被局部作用域修改了
console.log(a,b,c);//10 20 3

Q4:

if(!("a" in window)){
  var a = 10
}
console.log(a);

等同于

var a;//变量提升了
if(!("a" in window)){//"a" in window 成立了,所以这个条件不执行
  a = 10
}
console.log(a);//'undefined

Q5:

var fn = 'hello';
(function(fn){
  console.log(fn);
  var fn=fn||'world';
  console.log(fn)
})(fn)
console.log(fn);

等同于

var fn = 'hello';
(function(fn){
  //内部作用域
  //形参先被定义 所以fn=hello
  //var fn;//var fn=fn||'world';变量提升到这里,但是会被忽略,因为形参的fn先被定义
  console.log(fn);//打印hello
  fn=fn||'world';//这句fn还是等于hello
  console.log(fn)//打印hello
})(fn)//hello作为实参传入
console.log(fn);//打印hello
//最终结果是:hello hello hello

Q6:

var n=10;
function fn(n){
     console.log(n);
     var n= 20;
     console.log(n);
     function n(){
       
     }
     console.log(n);
}
 fn(n);
 console.log(n);

等同于

var n=10;
function fn(n){
  //局部作用域
  //n根据形参首先定义 n=10
  //函数会提升,覆盖了n,此时n为函数
   function n(){
       
     }
     //var n;//var n =20中的var n 被提升到此处,但是会被忽略
     console.log(n);//打印函数
      n= 20;//n被赋值为20
     console.log(n);//打印20
      //函数已经提升
     console.log(n);//打印20
}
 fn(n);//实参n=10传入调用
 console.log(n);//打印10

Q7:

 function fn(fn){
     console.log(fn);
     var fn = 20;
     console.log(fn);
     function fn(){
       console.log(fn);
     }
}
fn(30);
var fn = 10;
console.log(fn);

等同于

function fn(fn){
   //局部作用域 fn被形参设置 fn为30
    function fn(){//函数被提升到此次,并且fn设置为函数
       console.log(fn);
     }
     var fn ;//var fn = 20;中的var变量提升到这里,但是会被忽略
     console.log(fn);//打印函数
     fn = 20;//赋值20
     console.log(fn);//打印20
}
var fn;//var fn = 10;这句中的var变量提升到这里,但是会被忽略,因为已经存在函数 fn 了
fn(30);//执行函数
fn = 10;//赋值fn为10
console.log(fn);//打印10
最终会依次打印出:fn函数  20 10
相关文章
|
3月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
60 3
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
61 3
|
1月前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
33 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
6月前
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
47 2
|
6月前
|
JavaScript 前端开发
经典面试题【作用域、闭包、变量提升】,带你深入理解掌握!
经典面试题【作用域、闭包、变量提升】,带你深入理解掌握!
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
2月前
|
JavaScript 前端开发 安全
JS中const有没有变量提升
JS中const有没有变量提升
16 0
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
41 0