分享學習內容，一起進步

孤獨的造夢者~君發表於2020-10-14

哈羅，我又來了，來分享一下昨天的學習，一起進步呀！

原型的特點引出的一些問題

        // 原型的概念：原型物件裡的所有屬性和方法 被所有建構函式例項化出來的物件所共享
                    //   這是一個很好的特點，但是也帶來了一些問題

        //       function Person(){

        //       }
        //     //   簡單物件
        //     Person.prototype={
        //         constructor:Person,
        //         name:'z3',
        //         age:'20',
        //         jop:'程式設計師',
        //         friends:['李四','王五'],
        //         sayName:function(){alert('我的名字！');},
        //     };


        //     var p1=new Person();
        //     var p2=new Person();
         
        //  // 問題：給p1新增了屬性，整體都會被新增(修改某一個例項物件，整體都會被修改)
        //     p1.friends.push('趙柳');
        //     alert(p1.friends);
        //     alert(p2.friends);   //所以P2裡面也有趙柳

        // 解決方法
        // 組合使用原型和建構函式式模式  (定義一個類  開發時常用的方式  也是最廣泛的)
        // function Person(name,age,friends,job){   //建構函式式
        //        this.name=name;
        //        this.age;age;
        //        this.friends=friends;
        //        this.job=job;
        // }
        // Person.prototypr={    //原型
        //         constructor:Person,
        //         sayName:function(){alert(this.name);},
        // };
        // // 這兩種結合就不會出現屬性值一樣的問題了(不會出現衝突了)，這種方式，才是開發中用的模式

        // var p1=new Person('z3','23','xiaoli','程式設計師');
        // var p2=new Person('l4','21','xiaolu','程式設計師');

        // alert(p1.friends);
        // alert(p2.friends);

常用的開發模式

  //  其他常用模式
        // 1.動態原型模式：（讓你的程式碼 都封裝到一起）(把屬性和方法讀寫在一起)
    //   function Person(name,age,friends,job){   //建構函式式
    //               this.name=name;      
    //               this.age;age;
    //              this.friends=friends;
    //              this.job=job;
    //             // 動態原型方法: (這裡只會執行一次，第一不存在，執行，第二次存在後不再執行)
    //             if(typeof this.sayName !='function'){ //通過這種方式新增方法
    //                    Person.prototype.sayName=function(){
    //                        alert(this.name);
    //                    }
    //             }

    //       }


        // 2.穩妥建構函式式：durable object(穩妥物件) 非常安全的環境中開發
        // 沒有公共屬性 ，不能使用this，適合在安全的環境中開發
         function Person(name,age,job){   //建構函式式
            //    建立一個要返回的物件
            var obj=new Object();
            // 可以定義一下私有的變數核函式 （只能裡面呼叫 private）
            var name=name;
            // var sex='男',
            // var saySex=function(){};

            // 新增一個對外的方法
            obj.sayName=function(){
                alert(name);  //在函式裡面可以呼叫私有變數
            }
            return obj;

        }

        var p1=new Person('z3');
        p1.sayName();//要呼叫函式裡面的屬性，只能通過sayName()方法

JS的繼承

   // js中怎麼去實現繼承:採用原型鏈的概念

        // 建構函式 原型物件 例項物件  的關係

        // 1. 建構函式.prototype=原型物件
        // 2. 原型物件.constructor=建構函式
        // 3.原型物件.isPrototypeOf(例項物件)  判斷例項物件的原型 是不是當前物件
        // 4.建構函式 例項物件 （類與例項的關係）

        // 父類建構函式 Sup
        function Sup(name){
            this.name=name;
        }
        // 父類的原型物件
        Sup.prototype={
            constructor:Sup,
            sayName:function(){alert(this.anme);},
        };

        // 子類建構函式  Sub
        function Sub(age){
              this.age=age;
        }

        // 如果我們讓子類的  “原型物件”  等於  “父類的例項物件”，結果會怎樣？(實現了js的繼承)
        // 有兩個變化
        // 1.顯然此時原型物件將包含一個指向另一個原型的指標
        // Sub的例項物件 和 Sup的例項物件有一個關係
        // 2.相應的另一個原型中也包含著指向另一個建構函式的指標
        // 子類的原型物件的構造器變成了 父類的構造器
             Sub.prototype=new Sup('張三');
            alert(Sub.prototype.constructor);//相當於父類的物件.constructor
            var sub1=new Sub();
            alert(sub1.name);  //子類繼承了父類，所以繼承成了父類的屬性和方法
            sub1.sayName();

昨天就學習了這些內容，今天也繼續加油吧！

相關文章