目錄

• 一、JS的解析與執行過程
  • 預處理階段
  • 執行階段
• 二、作用域
  • 塊作用域
  • 函數作用域
  • 動態作用域
  • 詞法作用域
• 三、閉包
  • 什麽是閉包
  • 閉包的好處
• 四、類與對象
  • 對象
  • 類
  • 原型(prototype)
  • this
  • new的理解
• 五、封裝
• 六、繼承
• 七、多態
• 八、項目實戰minijQuery

一、JS的解析與執行過程

1.1、預處理階段

註意：js預處理階段會掃描所有var聲明的變量，把var聲明的變量或函數存放到詞法作用域裏，如果是變量初始值為“undefined”，如果是函數則指向函數；

全局（window）

　　詞法作用域（Lexical Environment）：頂級的Lexical Environment是window；

　　1、先掃描函數聲明後掃描變量(var聲明)；

　　2、處理函數聲明有沖突，會覆蓋；處理變量聲明時有沖突，會忽略。

函數

　　詞法作用域（Lexical Environment）：每調用一次，產生一個Lexical Environment；

　　1、先函數的參數：比如arguments（函數內部對象，代表函數實參，可通過下標獲取調用函數時傳的實參）；

　　2、先掃描函數聲明後掃描變量(var聲明)；

　　3、處理函數聲明有沖突，會覆蓋；處理變量聲明時有沖突，會忽略。

1.2、執行階段

　　1、給預處理階段的成員賦值

　　2、如果沒有用var聲明的變量，會成為最外部LexicalEnvironment的成員（即window對象的變量）

函數內部對象：arguments

<script>
    /*提示：*/
    // arguments是每一個函數內部的一個對象
    // 可以訪問實際傳遞給函數的參數的信息。
    // 聲明的時候參數的個數與實際調用時無關
    
    function add(a,b){
    console.log(add.length);// 形參的個數
    console.log(arguments.length);// 實際傳過來的參數
    var total = 0;
    for(var i = 0;i< arguments.length;i++){
        total 
 
+= arguments[i];
    }
    return total;// 返回實參的總和
    }
    
    // 調用時傳的實參
    var result = add(1,2,3,4,5);
    var result2 = add(1,2);
    
    console.log(result);// 15
    console.log(result2);// 3
</script>

二、作用域

提示：js的作用域不是塊級別的；js的作用域是函數級別的。

2.1、塊作用域

2.2、函數作用域

2.3、動態作用域

2.4、詞法作用域

代碼示例：

<script>
            //js作用域
            // 定義：用來查找變量的值的規則集;決定一個變量的範圍
            // 提示：js的作用域不是塊級別的；js的作用域是函數級別的。
            // javascript使用的是詞法作用域，它的最重要的特征是它的定義過程發生在代碼的書寫階段
            
            /*以下js代碼用立即調用寫法（私有化），避免變量沖突*/
            
            //1、塊作用域：代碼在花括號裏面有效（js沒有塊作用域）
            (function(){
                for(var i=0;i<5;i++){
                    var a = i ;
                }
                // 在花括號外面可以訪問到i,a
                console.log(i);// 5
                console.log(a);// 4
            })();
            
            
            //2、函數作用域：代碼在function()函數的花括號裏面有效
            (function(){
                var message = "函數外部的";
                function fn(){
                    var message = "函數內部的";
                    console.log(message);// 函數內部的
                }
                console.log(message);// 函數外部的
            })();
            
            
            //3、動態作用域：在運行時決定（是this指向的表現；誰調用，this指向誰）；動態作用域其實是指this的詞法作用域
                // 動態作用域並不關心函數和作用域是如何聲明以及在任何處聲明的，只關心它們從何處調用。
                // 換句話說，作用域鏈是基於調用棧的，而不是代碼中的作用域嵌套
            (function(){
                var a = 2;
                function foo() {
                    console.log( a );
                }
                function bar() {
                    var a = 3;
                    foo();// 此時this===window
                }
                bar();// 2
            })();
            /*
            var a = 2;
            bar = {
                a:3,
                foo:function(){
                    console.log(this.a);
                }
            }
            bar.foo();//3
            */
            

            //4、詞法作用域：詞法作用域(也稱為靜態作用域或閉包)
                // js的作用域解析，用new Function創建函數
            (function(){
                // 閉包
                var a = 2;
                function bar() {
                    var a = 3;
                    return function(){
                        console.log(a);// 此時捕獲a=3
                    };
                }
                var foo = bar();
                foo();// 3
            })();
            
            
            
            // 如果處於詞法作用域，也就是現在的javascript環境。變量a首先在foo()函數中查找，沒有找到。於是順著作用域鏈到全局作用域中查找，找到並賦值為2。所以控制臺輸出2
　　        // 如果處於動態作用域，同樣地，變量a首先在foo()中查找，沒有找到。這裏會順著調用棧在調用foo()函數的地方，也就是bar()函數中查找，找到並賦值為3。所以控制臺輸出3
            
            //小結：兩種作用域的區別，簡而言之，詞法作用域是在定義時確定的，而動態作用域是在運行時確定的
            
        </script>

三、閉包

3.1、什麽是閉包

3.2、閉包的好處

四、類與對象

4.1、對象

4.2、類

4.3、原型(prototype)

4.5、this

4.6、new的理解

　　簡單的可以理解為new

五、封裝

六、繼承

七、多態

八、項目實戰minijQuery

javascript面向對象編程（OOP）——匯總