JavaScript變量提高五道題,你都作對了嗎?!

變量提高:在當前做用域下,會把帶var和function進行提早聲明或定義web

注意:塊級做用域只對let/const/function有效,對var無效面試

開始看題吧瀏覽器

變量提高塊級做用域面試題目一

console.log(a)
var a = 0
if(true){
    console.log(a)
    a = 1
    console.log(a)
    function a (){}
    console.log(a)
    a = 21
    console.log(a)
}
console.log(a)
複製代碼

打印結果

ƒ a(){}
1
1
21
1
複製代碼

分析

//變量提高var a , function a 
console.log(a)//undefined
var a = 0
if(true){
    console.log(a)//function a 
    a = 1
    console.log(a)//1
    function a (){}//把a以前的變化,映射全局a=1
    console.log(a)//1
    a = 21//私有,未映射到全局
    console.log(a)//21
}
console.log(a)//1

複製代碼

函數中包含形參的題目二

//包含形參
var a= 10,b=11,c=12;
console.log(test)
function test(a){
    a= 1
    var b =2
    c=3
}
test(5)
console.log(a)
console.log(b)
console.log(c)
複製代碼

打印結果

ƒ test(a){
    a= 1
    var b =2
    c=3
}
10
11
3
複製代碼

分析

//變量提高:var a ,function test(){}
var a= 10,b=11,c=12;
console.log(test)//沒有塊級做用域,聲明並定義
function test(a){
    a= 1 //傳入的形參爲私有變量,不會影響公有
    var b =2//var聲明function的私有變量
    c=3//沒有var,全局
}
test(5)
console.log(a)
console.log(b)
console.log(c)
複製代碼

變量提高私有做用域題目三

var n = 0
function a({
    var n = 10
    function b({
        n++
        console.log(n)
    }
    b()
    return b
}
var c = a()
c()
console.log(n)
複製代碼

打印結果

11
12
0
複製代碼

分析

//變量提高
//var n ; var c ; function a (){}

var n = 0
function a({
    //私有做用域, var n ,function b(){}
    var n = 10
    function b({
        n++ //操做本身上級的做用域,不操做全局
        console.log(n)
    }
    b()
    return b
}
var c = a()
c()//至關於調用b函數
console.log(n)//全局變量不受影響,function a操做的是`var n = 10`這裏的私有變量
複製代碼

變量提高之私有做用域易錯題四

var foo = 1
function bar (){
    if(!foo){
        var foo = 10
    }
    console.log(foo)
}
bar()

// 打印結果
//10

複製代碼

分析: 變量提高 var foo ; function bar (){} bar()私有做用域內:變量提高 var foo,此時的foo爲undefined,!foo爲true,符合條件 foo = 10 ,結果打印 10編輯器

變量提高之沒有var題五

console.log(a)
a = 12
function fn(){
    console.log(a)
    a = 13
}
fn()
console.log(a)
複製代碼

結果報錯:a is not defined函數

Tips:變量提高之新舊瀏覽器差別

注意新舊版本對塊級做用域下的function的處理方式不一樣(不管塊級做用域的條件是否成立,只有有大括號{},就存在塊級做用域)flex

  • 新版本:只提早聲明function,不進行定義
  • 舊版本:提早聲明並定義

例子:ui

console.log(a)
var a = 0
if(true){
    console.log(a)
    function a(){}
    console.log(a)
}
console.log(a)
複製代碼

新版本分析

  1. 變量提高 var a ,function a
  2. console.log(a) 打印a,此時a只聲明,未定義,爲undefined 在這裏插入圖片描述
  3. var a = 0給變量a賦值,a=0 在這裏插入圖片描述
  4. 一旦進入塊級做用域, function a(){}不會給a從新賦值,可是爲了兼容舊版本,會把修改過的a映射到全局,此時全局的a就是一個函數 在這裏插入圖片描述 在這裏插入圖片描述
  5. 因此打印的三個結果都是 function a(){} 在這裏插入圖片描述

新版本谷歌打印結果 在這裏插入圖片描述 新版本IE11打印結果 在這裏插入圖片描述url

舊版本分析

變量提高:var a , function a (){}spa

  1. 因爲舊版本無視塊級做用域,因此會對function進行變量提高並定義,此時得到的a就是function
  2. 定義了a變量值爲0,那麼a =0
  3. 進入塊級做用域,舊版本無視,因此打印a依然是0,function a(){}已經聲明定義過,再也不執行,打印a,依然爲a=0,全局仍是a=0
console.log(a)//第1步
var a = 0//第2步
if(true){
    console.log(a)
    function a(){}
    console.log(a)
}
console.log(a)
複製代碼

IE10及如下打印結果 在這裏插入圖片描述3d

總結

只有新瀏覽器能夠識別塊級做用域,因此爲了兼容舊瀏覽器,會採起先聲明的方式,可是新瀏覽器不會進行定義,只有進入該函數所在的塊級做用域纔會進行定義。

小編:以上題目都對的話,證實變量提高的基礎很強啦啦,沒有作對的話建議本身再複習一下。歡迎勘誤,不勝感激,有用的話點贊關注哦!

掃描二維碼關注咱們!
掃描二維碼關注咱們!

本文使用 mdnice 排版

相關文章
相關標籤/搜索