1. 作用域

• 全局
• 函數(shù)
• 塊

1.1 全局作用域

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

1.2 函數(shù)作用域

        let a = 1;
        //console.log(a);
        function foo() {
            let a = 5;
            return a;
        }
        console.log(foo());
        //5

1.3 塊作用域

• 只有在塊作用域中使用let或const聲明才有效，使用var無效（作用域會提升）

        {
            let m = 8;
            const M = 9;
        }
        console.log(M);
        console.log(m);
        //均會報錯

2. 閉包

• 用來訪問函數(shù)內(nèi)部的局部變量

        function foo() {
            let a = 0;
            return function f(params) {
                return a;
            }
        }
        let f = foo();
        console.log(f());

3. 循環(huán)

• 用于遍歷數(shù)組，對象

3.1 while loop

• 數(shù)組

        const arr = ["cat", "dog", "pig"];
        let i = 0;
        while (i < arr.length) {
            console.log(`animal: ${arr[i]}`);
            i += 1;
        }
        //animal: cat
        //animal: dog
        //animal: pig

3.2 do…while loop

• 數(shù)組

        let i = 1;
        do {
            i += 1;
            console.log(`animal: ${arr[i]}`);
        } while (i < arr.length - 1);
        //animal: pig

3.3 for…in

• 對象

        const stu = {
            id: 1,
            name: "Jack",
            gender: "male",
            graduate: false
        }
        for (const key in stu) {
            console.log("%c%s", "color:green", stu[key]);
        }
        //1
        //Jack
        //male
        //false

3.3 迭代器

        for (const item of arr) {
            console.log(item);
        }
        //animal: cat
        //animal: dog
        //animal: pig

4. 構(gòu)造函數(shù)和原型

JavaScript 常被描述為一種基于原型的語言 (prototype-based language)——每個對象擁有一個原型對象，對象以其原型為模板、從原型繼承方法和屬性。原型對象也可能擁有原型，并從中繼承方法和屬性，一層一層、以此類推。這種關(guān)系常被稱為原型鏈 (prototype chain)，它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。

準(zhǔn)確地說，這些屬性和方法定義在Object的構(gòu)造器函數(shù)(constructor functions)之上的prototype屬性上，而非對象實例本身。

• 函數(shù)本身是對象，其中一個屬性為prototype
• 可作為對象的構(gòu)造器，構(gòu)造函數(shù)
• javascript沒有“類”的概念，都是通過原型來實現(xiàn)繼承

4.1 構(gòu)造函數(shù)

• 在函數(shù)中不再創(chuàng)建對象并返回
• 命名一般以大寫字母開頭，以區(qū)分構(gòu)建函數(shù)和普通函數(shù)
• 函數(shù)作為構(gòu)造函數(shù)使用時，必須使用new關(guān)鍵字
• 類的實例化：通過構(gòu)造函數(shù)創(chuàng)建對象的過程（此時構(gòu)造函數(shù)可看成類）

       function User(name, age) {
            this.name = name;
            this.age = age;
            this.info = function () {
                return { name: this.name, age: this.age };
            }
        }

4.2 原型

• 每一個函數(shù)的特殊屬性：prototype
• 原型函數(shù)的實例的proto屬性，相當(dāng)于原型函數(shù)的prototype屬性
• 每個實例對象都從原型中繼承了一個constructor屬性，該屬性指向了用于構(gòu)造此實例對象的構(gòu)造函數(shù)。

        function User(params) {
            this.p = params;
        }
        const user = new User("hehe");
        console.log(user);
        //user對象的原型
        console.log(user.__proto__);
        //user構(gòu)造函數(shù)的原型
        console.log(User.prototype);
        console.log(user.__proto__ === User.prototype);

原型鏈

1. 當(dāng)訪問原型函數(shù)實例的屬性時，會先檢查該實例是否具有要訪問的屬性。
2. 如果 實例 沒有這個屬性, 然后瀏覽器就會在 實例 的 proto 中查找這個屬性(也就是 原型函數(shù)的.prototype)
3. 如果 實例 的 proto 有這個屬性, 那么它的 proto 上的這個屬性就會被使用.
4. 否則, 如果 實例 的 __proto 沒有這個屬性, 瀏覽器就會去查找它的 proto 的 proto ，看它是否有這個屬性.
5. 默認情況下, 所有函數(shù)的原型屬性的 proto 就是 window.Object.prototype.
6. 所以 實例 的 proto 的 proto (也就是 原型函數(shù)的.prototype 的 proto (也就是 Object.prototype)) 會被查找是否有這個屬性.
7. 如果沒有在它里面找到這個屬性, 然后就會在 實例 的 proto 的 proto 的 proto 里面查找.
8. 然而這有一個問題: 實例 的 proto 的 proto 的 proto 不存在.
9. 最后, 原型鏈上面的所有的 proto 都被找完了, 瀏覽器所有已經(jīng)聲明了的 proto 上都不存在這個屬性
10. 然后就得出結(jié)論，這個屬性是 undefined.

常見定義做法：

• 在構(gòu)造函數(shù)內(nèi)定義屬性
• 在其prototype屬性上定義方法

        function User(name, age) {
            this.name = name;
            this.age = age;
            // this.info = function () {
            //     return { name: this.name, age: this.age };
            // }
        }
        //將info()放到原型prototype屬性中
        User.prototype.info = function () {
            return { name: this.name, age: this.age };
        };
        //生成對象
        const user = new User("Tom", 23);
        console.log(user);
        //User {name: "Tom", age: 23}
        console.log(user.info());
        //{name: "Tom", age: 23}

5. 類與繼承

• 子類繼承父類的屬性
• 可以重寫父類方法
• 可以有新的屬性
• 不能繼承父類的私有屬性

        class Animal {
            //構(gòu)造方法
            constructor(name, leg) {
                this.name = name;
                this.leg = leg;
            }
            //原型方法
            info() {
                return { name: this.name, leg: this.leg, isPet: this.#isPet };
            }
            //靜態(tài)方法
            static eat() {
                return "food";
            }
            //靜態(tài)屬性
            static nature = "creature";
            //私有屬性
            #isPet = false;
            //訪問器方法 getter, setter
            get isPet() {
                return this.#isPet;
            }
            set isPet(value) {
                this.#isPet = value;
            }
        }
        const cat = new Animal("Cat", 4);
        const bird = new Animal("Bird", 2);
        console.log(cat.info());
        //{name: "Cat", leg: 4, isPet: false}
        console.log(bird.info());
        //{name: "Bird", leg: 2, isPet: false}
        console.log(`動物吃：${Animal.eat()}`);
        //動物吃：food
        console.log(`動物本身是：${Animal.nature}`);
        //動物本身是：creature
        console.log(`貓是寵物嗎？ ${cat.isPet}`);
        //貓是寵物嗎？ false
        cat.isPet = true;
        console.log(`貓是寵物嗎？ ${cat.isPet}`);
        //貓是寵物嗎？ true
        //繼承
        class Dog extends Animal {
            //繼承 
            //第一步必須執(zhí)行父類構(gòu)造方法，否則無法使用this
            constructor(name, type) {
                super(name, 4);
                //新成員初始化
                this.type = type;
            }
            info() {
                return { name: this.name, leg: this.leg, type: this.type };
            }
            //父類的私有屬性不會被繼承
        }
        const dog = new Dog("Dog", "哈士奇");
        console.log(dog.info());
        //{name: "Dog", leg: 4, type: "哈士奇"}

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：