JavaScript面向對象

面向對象的概念：

- 兩種編程思路： 函數式（過程式）、面向對象（OOP）

- 類 ： 具備相同的屬性和方法的一類對象的抽象

- 實例 ：某一類當中的一個對象

- 對象: 具備屬性和方法的具體的事物

 

面向對象的三大特色：

1. 封裝
2. 繼承
3. 多態

繼承的種種：

• 原型鏈繼承——把子類的原型（prototype）設置成父類的一個實例，效果就是把父類的私有和共有變成子類的共有

      ```
         /* 父類（基類） */
        function Girl(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.hair = "長頭髮";
        }
        Girl.prototype.chat = function () {
            console.log('hello world');
        }


        /* 子類（派生類） */
        function BeautifulGirl() {

        }
        // 把子類的原型設置爲父類的一個實例
        BeautifulGirl.prototype = new Girl();

        var bg1 = new BeautifulGirl();
        console.log(bg1.hair);
        bg1.chat();
        var bg2 = new BeautifulGirl();
        console.log(bg2.hair);

      ```

• 冒充對象繼承——在子類的構造函數裏邊，把父類的構造函數當作普通函數執行，而且用call方法把裏面的this指向改爲子類的實例，效果是把父類的私有變成子類的私有

        ```
            /* 父類（基類） */
        function Girl(name, age, sex, hair) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.hair = hair;
        }
        Girl.prototype.chat = function () {
            console.log('hello world');
        }


        /* 子類（派生類） */
        function BeautifulGirl(name, age, sex, hair, longleg) {
            Girl.call(this, name, age, sex, hair); /* 冒充對象繼承 */
            this.longleg = longleg;
        }
    

        var bg1 = new BeautifulGirl('真真', 18, '女', '大波浪', '大長腿');
        console.log(bg1);
        ```

• 混合繼承——原型鏈+冒充對象繼承：父類的私有變成子類的私有，父類的公有變成子類的公有

        ```
            /* 父類（基類） */
        function Girl(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.hair = "長頭髮";
            this.ary = [1, 2, 3];
        }
        Girl.prototype.chat = function () {
            console.log('hello world');
        }


        /* 子類（派生類） */
        function BeautifulGirl() {

        }

        BeautifulGirl.prototype = new Girl();

        var bg1 = new BeautifulGirl();
        console.log(bg1.hair);
        bg1.ary[1] = 5;
        bg1.chat();
        var bg2 = new BeautifulGirl();
        console.log(bg2.hair);
        console.log(bg2.ary);
        ```

 

面向對象的建立：

• 普通模式——每次建立對象都要設置一遍屬性，屬性相同時，代碼冗餘；

    ```
          var girl1 = {
            name: '如花',
            age: 18,
            sex: '女'
        ; 
        var girl3 = new Object();
        girl3.name = '春花';
        girl3.age = 19;
        girl3.sex = '女';

    ```

• 工廠模式——把建立對象和返回對象的功能封裝在函數中，減小代碼冗餘，沒有類的概念；

    ```
         function girl(name, age, sex) {
            var obj = new Object();  /* 建立對象 */
            obj.name = name;
            obj.age = age;
            obj.sex = sex;
            return obj; /* 返回對象 */
        }

        var g1 = girl('如花', 18, '女');
        console.log(g1);

        var g2 = girl('似玉', 18, '女');
        console.log(g2);

        console.log(g1 instanceof girl); //false
    ```

 

• 構造函數模式——有類的概念，建立出來的實例是屬於同一類，使用 instanceof 運算符能夠檢測出來，全部的屬性和方法都是實例私有的；

        - 1）-構造函數函數名首字母大寫（規律）
        - 2）-用new 方式執行,new操做符會自動建立並返回對象，這個對象稱之爲這個類的實例
        - 3）-構造函數裏面的this指向當前實例

    ```
        function Girl(name, age, sex) {
            //自動建立對象
            this.name = name;
            this.age = age;
            this.sex = sex;
            //自動返回對象
        }

        var g1 = new Girl('如花', 18, '女');
        var g2 = new Girl('似玉', 18, '女');

       // Girl('如花', 18, '女'); //若是用普通函數方式執行，裏面this指向window
       // console.log(window); 
    ```

• 原型

        - 全部對象天生自帶一個屬性 `__proto__`, 指向的是其構造函數的原型
        - 全部的函數天生自帶一個屬性 `prototype`（原型）

• 原型+構造函數模式——便可以實現私有屬性，也能夠實現共有方法

        ```
             function Girl(name, age, sex, str) {
                //自動建立對象
                this.name = name;
                this.age = age;
                this.sex = sex;
                this.str = str;
                //自動返回對象
            }

            Girl.prototype.chat = function () {
                // 公有方法裏面的this指向當前調用它的實例  
                console.log(this.str + 'hahaha');
            }
            var g1 = new Girl('如花', 18, '女', 'hello world');
            g1.chat();

        ```

• 動態混合模式——把共有方法放在構造函數裏邊

        ```
            /* 動態混合模式 */
            function Girl(name, age, str) {
                this.name = name;
                this.age = age;
                this.str = str;
                if (typeof chat != 'function') { //若是不存在chat方法，就添加
                    Girl.prototype.chat = function () {
                        console.log(this.str);
                    }
                }
            }
            var g1 = new Girl('小紅', 18, 'hello world');
        ```

 

this的指向：

• 在普通函數中，沒有對象調用，this指向window；
• 在對象方法中，this指向調用它的對象；
• 在事件處理函數中，this指向觸發事件的元素；
• 在構造函數中，this指向當前實例；

call和apply方法能夠改變this的指向——使用方法參考：

 

         var obj = {
            a: 10,
            b: 20
        }
        function fn(c, d) {
            console.log(this.a + this.b + c + d);
        }
        //fn.call(obj, 30, 40);

        fn.apply(obj, [30, 40]);  //apply的第二個參數是一個數組
        fn.apply(null, [30, 40]); // 第一個參數傳null，指向window

     ```

 

call()方法和apply()方法用法總結 - 菲比月 - 博客園 https://www.cnblogs.com/phoebeyue/p/9216514.html