JS變數+作用域-有解無憂

基本型別-堆疊記憶體

保存基本型別的變數保存的是值本身

參考型別-堆記憶體

保存參考型別的變數保存的并不是物件本身，而是一個指向該物件的參考地址

參考型別判斷物件是否相等

    function equalObjs(a, b) {
        for (var p in a) {
            if (a[p] !== b[p]) return false;
        }
        return true;
    }
    console.log(equalObjs(xm, xh));

參考型別判斷陣列是否相等

    function equalArrays(a, b) {
        if (a.length !== b.length) return false;
        for (var i = 0; i < a.length; i++) {
            if (a[i] !== b[i]) return false;
        }
        return true;
    }

參考型別物件復制（淺拷貝：只拷貝一層）

    function copyObj(obj) {
        var newObj = {};
        for (var p in obj) {
            newObj[p] = obj[p];
        }
        return newObj;
    }

console.log(undefined==null); /*true*/
console.log(undefined===null); /*false*/

從一個變數向另一個變數復制參考型別的值，復制的其實是指標，因此兩個變數最終都指向同一個物件，當給變數賦新值時，此變數就不再指向原來的物件了；

陣列是參考型別的 , 如題中b=a相當于a與b指向同一個地址 , 但是a=[4,44]之后改變了a的地址 , 所以b不會受到影響為[4] . 后面又把a=b指向了同一個地址 ,此時為b添加元素 , 因為a、b的地址都沒有改變 ,a也會隨之改變 ,所以a為[4,44] .

引數傳遞的本質是值的復制，由于person是參考型別，這里就相當于把person的地址復制給了函式setName的引數obj

    function setName(obj) {
        obj.name = 'xm';
        obj = {};
        obj.name = 'xh';
    }
    var person = {};
    setName(person);
    console.log(person.name); /*xm*/
    obj = person

檢測變數型別typeof

    console.log(typeof 4);//number
    console.log(typeof(4));//number
    console.log(typeof 'str');//string
    console.log(typeof true);//boolean
    console.log(typeof undefined);//undefined
    console.log(typeof null);//object
    console.log(typeof []);//object
    console.log(typeof {});//object
    console.log(typeof function () {});//function
    console.log(typeof /a/);//object

instanceof檢測參考型別

不能檢測基本資料型別，只要是基本資料型別和instanceof連用，回傳的都是false

    console.log([] instanceof Array);//true
    console.log([] instanceof Object);//true
    console.log({} instanceof Object);//true
    console.log({} instanceof Array);//false
    console.log(1 instanceof Number);//false
console.log(null instanceof Object);//false

有兩個變數，分別是a = {name: 'xm'}, b = [4]，我們不用第三個變數來調換a和b的值

    var a = {name: 'xm'}, b = [4];
    a=[a,b];
    b=a[0];
    a=a[1];

作用域與決議機制

全域變數容易被污染，少用

with(obj)可以延長作用域鏈，但不推薦使用

    var person = {};
    person.name = 'xm';
    person.sex = 'male';
    var score = 4;
    
    with(person) {
        name = 'xh';
        sex = 'female';
        score = 44;
    }
    console.log(person.name);
    console.log(person.sex);
    console.log(score);

有3個按鈕給每個按鈕添加點擊事件，希望每次點擊時輸出當前點擊的是第幾個按鈕，但是目前不論點擊哪個按鈕，最終輸出的都是4

原因：由于先系結，后觸發，給每個按鈕系結事件，但是在觸發的時候i已經是回圈完之后，i的值了

（1）單擊方法導致的回圈問題，提示：單擊方法在回圈外面定義

（2）在回圈中呼叫，并將被點的按鈕的型號傳進去

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>變數、作用域</title>
    
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script type="text/javascript">
        // 錯誤代碼
        var btns = document.getElementsByTagName('button');
            for (var i = 0; i < 3; i++) {
                btns[i].onclick = function () {
                alert(i + 1);
            };
        }

        //正確代碼
        var btns = document.getElementsByTagName('button');
        var fn=function(i){
            btns[i].onclick=function(){
                alert(i+1);
            }
        }
        for(var i=0;i<btns.length;i++){
            fn(i);
        }
    </script>
</body>
</html>

不存在的變數或函式會報錯；不存在的屬性或方法，回傳undefined；||是短路操作，形如a||b，如果a的值轉換成布林值是true的話，a||b等于a；如果a的值轉換成布林值是false的話，a||b等于b

        console.log(person||(person='xm'));
        console.log(window.person||(window.person='xm'));

預決議

1. 以var 宣告的變數會預決議，賦值為undefined；沒有var則不進行預決議
2. 以let 宣告的變數不會進行預決議
3. 函式的宣告會預決議 , 函式會被提升，然后從上到下執行代碼的時候，輸出fn，就是提升的函式
4. 函式運算式不進行預決議

案例1：

（1）預決議：外層查找var，name和age為undefined

（2）預決議：內層函式fn，函式在預決議時，已經提前進行了該函式的宣告，函式內變數argument、name、age為undefined

（3）正常執行：外層name從undefined變為’xm’，age從undefined變為18

（4）正常執行：內層輸出name為undefined

（5）正常執行：內層name從undefined變為’xh’，age從undefined變為10

    var name = 'xm';
    var age = 18;
    function fn(argument) {
        console.log(name); //undefined
        var name = 'xh';
        var age = 10;
    }
    fn();

如果預決議時變數名與函式名重復，那么只預決議函式

案例2：

    console.log(a);
    var a = 1;/*var預決議之后是undefined*/

案例3：

    console.log(a);
    a = 1;/*沒有預決議，報錯*/

案例4：

    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，不是函式

案例5：

函式內部沒有var，不進行預決議，輸出時查找外層a，輸出1；賦值時對外層a進行操作

    var a = 1;
    function fn() {
        console.log(a);
        a = 2;//修改全域變數a
    }
    fn();
    console.log(a);

案例6：

函式引數也相當于var定義的區域變數，預決議為undefined，賦值時對引數a進行操作

    var a = 1;
    function fn(a) {
        console.log(a);
        a = 2;/*對引數a進行操作，從undefined變為2，全域變數a沒有改變*/
    }
    fn();
    console.log(a);

案例7：

函式引數也相當于var定義的區域變數，預決議為undefined，賦值時對引數a進行操作

    var a = 1;
    function fn(a) {
        console.log(a);//將全域變數賦值給引數，因此引數輸出1
        a = 2;//將引數從1變成2，全域變數沒有改變
    }
    fn(a);//執行時將全域變數a=1傳入引數
    console.log(a);//1

垃圾收集機制

解除變數參考的方法是將其設定為null

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158703.html

標籤：JavaScript

上一篇：my97日期控制元件彈出位置顯示例外

下一篇：JS函式深入