1.var a=12

　　? function fn(){

　　　　console.log(a)? ? ? ?//undefined

　　　　var a=45

　　　　console.log(a)? ? ? //45

　　　　}

　　fn()

　　案例解析畫圖：

　　

　　2.var a=12;

　　? ?function fn(){

　　　　console.log(a)? ? ? ? //12

　　　　a=45

　　　　console.log(a)? ? ? ? //45

　　　　}

　　fn()

　　畫圖分析

　　

　　3.function fn(){

　　　　console.log(11)

　　　　function ff(){

　　　　　　console.log(22)

　　　　}

　　　　ff()

　　}

　　fn()? ? ? //11? ?22

　　ff()? ? ? ? //xxx.is not defined

　　畫圖解析：

　　

　　4. 函數遞歸（函數自己內部自己調用自己）

　　function fn(){

　　　　xonsole.log(5)

　　　　fn()

　　fn()

?　　畫圖解析

　　

　　5.function fn(){

　　　　console.log(12)

　　　　}

　　var as=fn()

　　console.log(as)? ? ? //每個函數都有自己的返回值，return，return是什么就返回什么，如果沒有就是undefined?

　　畫圖解析

　　

　　6.var a=12;

　　? ? function fn(){

　　　　　console.log(a)? ? ? //undefined

　　　　? ?return 4

　　　　? var a=45

　　　　}

　　fn()

　　畫圖解析：

　　

　　7.var a=45

　　? function fn(a){

　　　　console.log(a)? ? ?//undefined

　　　　}

　　fn()

?　　畫圖解析：

　　

?

?　　8.var a=123

　　? ? function fn(){

　　　　alert(a)? ? ?//123

　　　　}

　　fn()

　　畫圖解析：

　　

　　9.var a=123

　　? ?function fun(){

　　　　alert(a)

　　　　var a=456

　　　　}

　　fun()? ? ? ?//undefined

　　alert(a)? ? ?//123

　　畫圖解析：

　　

　　10.var a=123

　　　function fun(){

　　　　alert(a)

　　　　a=456

　　}

　　fun()? ? ?//123

　　alert(a)? ? ? ?//456

　　畫圖解析：

　　

　　11.var a=123

　　　 function fun(a){

　　　　　　alert(a)

　　　　　　a=456

　　　　}

　　fun()? ? ? ? ? //undefined

　　alert(a)? ? ? //123

　　畫圖解析：

　　

　　12.var a=123

　　　function fun(a){

　　　　　　alert(a)

　　　　　　a=456

　　　　}

　　fun(123)

　　alert(a)

?　　畫圖解析：

　　

　　形參于實參的區別：

　　形參：相當于一個私有變量，

　　實參：對形參的賦值，如果是數字，則直接對形參賦值，如果是字母，則會通過作用域鏈查找字母的賦值情況，然后給形參傳參，如果沒有，則意味著執行模塊沒有對形參賦值的情況，就需要通過形參來向上查找

　　13.console.log(totai)? ? ? ? ?//undefined

　　? ? ?var total=0;

　　　 function fn(num1,num2){

　　　　　　console.log(total)? ? ? ?//undefined

　　　　　　var total=num1+num2

　　　　　　console.log(total)? ? ? //300

　　　　　}

　　fn(100,200)

　　console.log(total)? ? ? ? 0

　　畫圖解析：

　　

　　14.var to=1;

　　? ? ?function fn(n1,n2){

　　　　console.log(to)

　　　　to=n1+n2

　　　　console.log(to)

　　fn(10,20)

　　console.log(to)

　　畫圖解析：

　　

　　15.function fn(a){

　　　　console.log(a)

　　　　var a=123

　　　　console.log(a)

　　　　function a(){}

　　　　console.log(a)

　　　　var b=function(){}

　　　　console.log(b)

　　　　function d(){}

　　　　}

　　fn(1)

　　畫圖解析：

　　

　　　如果形參，聲明變量，函數名同名時，在預解釋的時候只聲明一次，其他的都是在賦值時后面會把前面的覆蓋掉

　　　權重為 形參<聲明變量<函數名

　　16.function test(a,b){

　　　　console.log(b)? ? ? //function b(){}

　　　　console.log(a)? ? ? //1

　　　　c=0;

　　　　var c;

　　　　a=3;

　　　　b=2;

　　　　console.log(b)? ? 2

　　　　function b(){}

　　　　function d(){}

　　　　console.log(b)? ? ?2

　　}

　　test(1)

　　　畫圖解析：

　　

　　17.function test(a,b){

　　　　console.log(a)

　　　　console.log(b)

　　　　var b=234

　　　　console.log(b)

　　　　a=123;

　　　　console.log(a)

　　　　function a(){}

　　　　var a

　　　　b=234

　　　　var b=function(){}

　　　　console.log(a)

　　　　console.log(b)

　　　　}

　　test(1)

　　畫圖分析：

　　

　　18. 銷毀案例? （閉包）

　　function fn(){

　　　　　　var a=12;

　　　　　　a++

　　　　　　console.log(a)

　　　}

　　fn()? ? ?13

　　fn()? ? ?13

　　fn()? ? ?13

　　畫圖解析：

　　

?

?　　19.解決辦法

　　function fn(){

　　　　var a=12

　　　　return function(){

　　　　　　a++

　　　　　　console.log(a)

　　　　　　}

　　　}

　　var ss=fn()

　　ss()

　　ss()

　　ss()

?　　20.+function(){

　　　　　var a=5

　　　　? ? function a(){}

　　　　　alert(a)? ?5

　　　　　function b(){}

　　　　　b=6;

　　　　　alert(b)? ? ?6

　　　　　var c=d=b

　　　　}()

　　alert(d)? ? ?6

　　alert(c)? ? is not defined

　　畫圖解析：

　　

?

轉載于:https://www.cnblogs.com/shangjun6/p/10055323.html

總結

以上是生活随笔為你收集整理的作用域解析题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。