js掃盲---面向對象的程序設計

對象的屬性

對象的屬性分為兩種: 數據屬性(可直接定義)和訪問器屬性(必須通過Object.defineProperty()函數定義)

  • 數據屬性的描述符

    • [[Configurable]] : 能否通過delete刪除;能否修改屬性的特性;能否把屬性改為訪問器屬性;一旦把此項改為false,則不能再改為true
    • [[Enumerable]] : 可否枚舉。for...in、Object.keys()、JSON.stringify()會忽略不可枚舉的對象屬性
    • [[Writable]] : 能否修改屬性的值。
    • [[Value]] : 數據屬性的值
  • 訪問器屬性的描述符

    • [[Configurable]] : 同上。
    • [[Enumerable]] : 同上。
    • [[Get]] : 在獲取屬性時,執行的函數。
    • [[Set]] : 再設置屬性時,執行的函數。
  • 設置對象的方法

    • Object.defineProperty(obj, attr, descriptors)

    參數分別為: 屬性所在的對象、屬性的名字、描述符對象

         var person = {
             name: liyang
         };
         Object.defineProperty(person, 'name', {
             writable : false
         })
         person.name = 'kevin';
         console.log(person.name);   // 'liyang'
    
    • Object.defineProperties(obj, obj)
         var person = {};
         // name前的下劃線是一種常用的記號,表示只能通過對象方法訪問的屬性。
         // _name為數據屬性,name為訪問器屬性
         Object.defineProperties(person, {
             _name: {    
                 value: 'liyang',
                 writable: true
             },
             name: {
                 get: function(){
                     return this._name;
                 },
                  set: function(newVal){
                     return this._name = 'Mr/Miss ' + newVal;
                 },               
             },
         })
         person.name = 'kevin';
         console.log(person.name);   // 'Mr/Miss kevin'
    
    • Object.getOwnPropertyDescriptor(obj, attr) : 用于讀取屬性的特性。

創建對象

  • 工廠模式

    這種模式抽象了創建具體對象的過程。

        function createPerson(name, age){
            var o = new Object();
            o.name = name;
            o.age = age;
            return o;
        }
        var per1 = creatPerson(kevin, 24);
    
  • 構造函數模式

        function Person(name, age){
            this.name = name;
            this.age = age;
            this.sayName = function(){
                console.log(this.name)
            }
        }
        var per1 = new Person(kevin, 24);
        var per2 = new Person(liyang, 23);
    
    • 構造函數的函數名一般以大寫字母開頭;
    • 要是用new操作符創建Person實例;
    • per1和per2都有constructor(構造函數)屬性,指向Person;
    • instanceof 可以檢測對象類型
          per1 instanceof Object;   // true
          per1 instanceof Person;   // true
      
    • 創建自定義的構造函數,意味著它的實例可以被標識為一種特殊類型(比如為Person的實例),這也是構造函數模式勝過工廠模式的地方
    • 構造函數當函數使用
        // 全局調用
        Person('kevin', 23);
        console.log(window.sayName);   // kevin
        // 使用call() 或 apply() 在另一個對象的作用域執行
        var o = {};
        Person.call(o, 'kevin', 27);
        o.sayName();    // kevin
    

    缺點: 構造函數里的函數屬性會在每一個實例里重新創建一遍,即使函數代碼是完全相同的。

  • 原型模式

    創建的每一個函數都會有一個prototype屬性,它指向一個對象,包含此構造函數的所有實例共享的屬性和方法。不必在構造函數中定義對象

        function Person(){
        }
        Person.prototype.name = 'kevin';
        Person.prototype.age = 23;
        Person.prototype.sayName = function(){
            console.log(this.name);
        }
        var per1 = new Person();
        console.log(per1.name);  // kevin  來自原型
        per1.name = 'liyang';
        console.log(per1.name);  // liyang  來自實例
        // hasOwnProperty() 判斷屬性是否在實例中  
        per1.hasOwnProperty('name');   // true
        delete per1.name;
        console.log(per1.name);  //  kevin  來自原型
        per1.hasOwnProperty('name');   // false
    
  • 組合模式(組合構造函數和原型模式)

          function Person(name, age){
              Person.prototype.name = name;
              Person.prototype.age = age;
          }
          Person.prototype.sayName = function(){
              console.log(this.name);
          }
          var per1 = new Person('kevin', 23);
    

對象的繼承

  • 原型繼承(原型鏈)

      // 父類
      function Animal(name){
          this.name = name;
      }
      Animal.prototype.howling = function(){
          console.log('my name is ' + this.name);
      }
      // 子類
      function Wolf(){
      }
      // 此時Wolf的實例都會有animal所有的的屬性和方法
      Wolf.prototype = new Animal('wolf');
      var wolf1 = new Wolf();
    

    缺點:
    + 實例中繼承到的屬性和方法都是公用的,一經修改,所有的實例都會有所體現。
    + 實例中繼承到的實例和屬性都是相同的,不能在實例化時,自定義父類中的屬性和方法

  • 借用構造函數繼承

      // 父類
      function Animal(name){
          this.name = name;
          this.howling = function(){
              console.log('my name is ' + this.name);
          }
      }
      // 子類
      // 此時Wolf的實例都會有單獨一份、繼承自父類中的屬性和方法。
      function Wolf(name){
          Animal.call(this, name);
      }
      Wolf.prototype = new Animal('wolf');
      var wolf1 = new Wolf();
    

    缺點: 缺點和構造模式創建對象相同: 實例中的屬性方法都是單獨一份,即使函數代碼是完全相同的,也不能復用,浪費內存

  • 組合模式

      // 父類
      function Animal(name){
          this.name = name;
      }
      Animal.howling = function(){
          console.log('my name is ' + this.name);
      }
      // 子類
      // 使用構造函數繼承,
      // 優點:這樣可以在實例對象時自定義父類中的屬性。
      function Wolf(name){
          Animal.call(this, name);
      }
      // 使用原型鏈繼承父類中原型的方法
      // 優點:可以復用相同的函數。
      Wolf.prototype = new Animal();
      var wolf1 = new Wolf(‘little wolf’);
    
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容