面试经常出的JavaScript变量提升题分析,一劳永逸,吊打面试官!
2023-09-11 14:21:46 时间
目录
第一题:
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
})()
第二题:
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();
第三题:
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
第四题:
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
第五题:
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
第六题:
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
第七题:
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
目前就收集了这些,望共勉之!!
相关文章
- [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!
- javascript原型的改动与重写(覆盖)区别
- 【JavaScript】关于javascript原型的深入理解
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】重温Javascript继承机制
- 【JavaScript】Understanding callback functions in Javascript
- 【JavaScript】理解与使用Javascript中的回调函数
- 《JavaScript设计模式》——第9章 JavaScript设计模式9.1 Constructor(构造器)模式
- 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.2 创建站点
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识
- 《JavaScript核心概念及实践》——2.3 运算符
- 《JavaScript设计与开发新思维》——导读
- Object_C 与JavaScript交互使用总结
- javascript:警告(alert 消息对话框),确认(confirm 消息对话框)
- 奇特的JavaScript连续赋值运算
- JavaScript目录
- javascript事件处理程序
- JavaScript之ClassName属性学习
- JavaScript(2)