JS中變量、做用域的本質，定義及使用方法

時間 2020-02-13

原文原文鏈接

全局做用域和局部做用域html

全局做用域c++

局部做用域：函數做用域瀏覽器

全局做用域在全局和局部均可以訪問到，局部做用域只能在局部被訪問到函數

var name="cyy";

function fn(){ var age=25; console.log(name);//cyy console.log(age);//25 } fn(); console.log(name);//cyy console.log(age);//報錯age is not defined

js沒有塊級做用域，此處依然是全局變量測試

if(){
    //全局變量
} for(){ //全局變量 }

在函數內，用var聲明的變量是局部變量，沒有用var的是全局變量spa

function fn(){
    var x=y=1; } fn(); console.log(y);//1 console.log(x);//x is not defined

var name="cyy";
function fn(){ name="cyy2";//沒有用var，因此這裏修改的直接是外面的全局變量name console.log(name);//cyy2 } fn(); console.log(name);//cyy2

變量對象和做用域鏈code

此處全局做用域下有name變量和fn函數，實際上都是window對象上的htm

全局做用域的變量對象的屬性和方法，看得見摸得着，能夠訪問對象

var name="cyy";
function fn(){ var age=25; function fn2(){ var gender="girl"; } } console.log(window.name===name);//true console.log(window.fn===fn);//true

此處fn下有age變量和fn2函數blog

局部做用域的變量對象的屬性和方法，看不見摸不着

訪問不存在的變量，會報錯

訪問不存在的屬性，不會報錯

這裏補充一下：一開始我用name進行測試，出現了意想不到的狀況

後來發現name是js對象的內置屬性，應儘可能避免命名時使用，建議使用 _name

打印window對象便可查看到name

console.log(window._name);
console.log(_name);

做用域鏈：

若是要查找一個變量，首先會在當前做用域內查找；

若是沒有，就去上一級做用域內查找；

直至到window

所以，裏層能夠訪問到外層的變量，可是外層沒法訪問到裏層的變量

延長做用域鏈的方法

with()至關於開闢了一個新的做用域

裏面的屬性，找不到的話會去外層window上查找

可是不推薦使用with，會帶來後續其餘問題

var person={};
person.name="cyy";
person.age=25;
var score=90;

console.log(person.name);//cyy
console.log(person.age);//25
console.log(score);//90

with(person){
    name="cyy2";
    age=cyy2;
    score=99;
}
console.log(person.name);//cyy2
console.log(person.age);//cyy2
console.log(score);//99

循環添加點擊事件，獲取到每一個點擊按鈕的index

單擊方法須要在循環外面定義，不然只會輸出循環結束後的 i 的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
<script>

var btns=document.querySelectorAll("button");
for(var i=0,len=btns.length;i<len;i++){
    myClick(i);
}
function myClick(i){
    btns[i].onclick=function(){
        alert(i);
    }
}
</script>
</body>
</html>

不存在的變量或函數會報錯；不存在的屬性或方法，返回undefined；||是短路操做，形如a||b，若是a的值轉換成布爾值是true的話，a||b等於a；若是a的值轉換成布爾值是false的話，a||b等於b

此處window.person = undefined，所以返回window.person="cyy"

//console.log(person || (person="cyy"));//報錯，person is not defined
console.log(window.person || (window.person="cyy"));//cyy

若是在循環中直接綁定點擊事件，因爲在循環時只是綁定；等到去點擊按鈕是，循環早已結束，所以 i 永遠都是循環結束後的值

var btns=document.querySelectorAll("button");
for(var i=0,len=btns.length;i<len;i++){
    btns[i].onclick=function(){
        alert(i);//3
    }
}

JS解析機制：預解析

最簡單的狀況

var age=25;
function fn(){
    var age=26;
    console.log(age);//26
}
fn();

JS的解析過程：

預解析

逐行讀代碼

var age=25;
function fn(arg){
    console.log(age);
    var age=26;    
}
fn();
/*
js的解析機制：
window:
    age undefined 25
    fn function fn(arg){
            console.log(age);//undefined
            var age=26;    
            console.log(age);//25
        }
fn:
    arg（參數也做爲局部變量） undefined
    age undefined
首先查找全部的var，將var聲明的變量都賦值給undefined
函數直接拿過來
讀取時，因爲函數已經聲明完了，因此正常執行時直接跳過
直接執行fn()
console.log(age)中的age是預解析的undefined
*/

變量名衝突：預解析時都是undefined

var age=25;//預解析：undefined
...
var age=26;//預解析：undefined

變量和函數名衝突：預解析時跳過變量名，只聲明函數

var age=25;//預解析：undefined
function age(){
    
}

函數與函數名衝突：預解析時選擇後面一個函數，第一個函數被幹掉

function age(){
    var age=24;
}
function age(){
    var age=25;
}

在某些老版本瀏覽器，好比低版本火狐中，沒法解析 if 或者 for 內部的函數

因此不推薦在代碼塊裏定義函數

if(){
    function fn(){

    }
}

for(){
    function fn2(){
        
    }
}

變量的解析機制：

以var 聲明的變量會預解析

以let 聲明的變量不會預解析

函數的聲明會預解析

函數表達式不會預解析

document.write(fn);
function fn(){}

函數的聲明在預解析時就已經被提早聲明瞭

函數變量的賦值，預解析時被定義爲undefined

document.write(fn);//undefined
var fn=function(){}

提早打印後面的變量，打印出來是undefined

console.log(age);//預解析爲undefined
var age=25;

若是沒有用var聲明，則沒法進行預解析，這樣提早打印時，不知道有該變量的存在，就會報錯

console.log(age);//報錯
age=25;

console.log(a);//打印出預解析的結果，是函數a()
var a=1;
console.log(a);//1
function a(){
    console.log(2);//跳過沒有執行
}
console.log(a);//1
var a=3;
console.log(a);//3
function a(){
    console.log(4);//跳過沒有執行
}
console.log(a);//3
a();//此時a是3，不能當作函數執行，所以報錯

/*
預解析時先查找var：找到var a=1;和var a=3；預解析結果爲undefined
而後查找到函數，發現函數a與變量重名，此時變量被幹掉
因爲存在兩個重名函數，前面的函數被幹掉，所以a的預解析結果爲：
function a(){
    console.log(4);
}
*/

預解析是分標籤進行的

此處上下沒有聯繫，會報錯

<script>
    console.log(a);//報錯
</script>

<script>
    var a=1;
</script>

可是上下順序對換不會出現問題，由於已經正常執行了，與預解析無關

<script>
    var a=1;
</script>

<script>
    console.log(a);//1
</script>

    var a=1;//undefined 1
    function fn(){
        console.log(a);//undefined
        var a=2;//undefined 2
    }
    fn();
    console.log(a);//1

當函數內部沒有var時，不會進行預解析，變量就會經過做用域鏈進行查找

若是函數內部存在var，會進行預解析，變量提早打印就會是undefined

    var a=1;//undefined 1
    function fn(){
        console.log(a);//1 沒有var進行預解析，經過做用域鏈找到外面的a
        a=2;//沒有var進行預解析，經過做用域鏈改變a
    }
    fn();
    console.log(a);//2

參數做爲局部變量，也會進行預解析

    var a=1;//undefined 1
    function fn(a){
        //a做爲參數，也是局部變量，也會進行預解析
        console.log(a);//undefined
        a=2;//此處修改參數a爲2，全局變量沒有影響
    }
    fn();
    console.log(a);//1

    var a=1;//undefined 1
    function fn(a){
        //a做爲參數，也是局部變量，也會進行預解析
        console.log(a);//undefined 1
        a=2;//此處修改參數a爲2，全局變量沒有影響
    }
    fn(a);//執行時參數爲a=1
    console.log(a);//1