首頁 > web前端 > js教程 > javascript建立物件導向方法和優缺點實例詳解

javascript建立物件導向方法和優缺點實例詳解

伊谢尔伦
發布: 2017-07-26 10:48:11
原創
1388 人瀏覽過

知識點: 
(1)JS物件導向基礎:ECMA-262把物件定義為:「無序屬性的集合,其屬性可以包含基本值、物件或函數」。 
(2)JS建立物件的方法: 
  (a)工廠模式:用函數來封裝以特定介面建立物件的細部。     

 function createPerson(name, age, job){ 
          var o = new Object(); 
          o.name = name; 
          o.age = age; 
          o.job = job; 
          o.sayName = function(){ 
          alert(this.name); 
          }; 
      return o; 
      } 
    var person1 = createPerson(“Nicholas”, 29, “Software Engineer”); 
    var person2 = createPerson(“Greg”, 27, “Doctor”);
登入後複製

    缺點:工廠模式雖然解決了創建多個相識對象的問題,但卻沒有解決對象識別的問題(即怎樣知道一個對象的類型)。 
  (b)建構函數模式:ECMAScript中的建構子可以用來建立特定類型的物件。可以建立自訂的建構函數,從而定義自訂物件類型的屬性和方法。     

 function Person(name, age, job){ 
        this.name = name; 
        this.age = age; 
        this.job = job; 
        this.sayName = function(){ 
        alert(this.name); 
        }; 
      } 
      var person1 = new Person(“Nicholas”, 29, “Software Engineer”); 
      var person2 = new Person(“Greg”, 27, “Doctor”);
登入後複製

    缺點:使用建構函數的主要問題,就是每個方法都要在每個實例上重新創建一遍。別忘了-ECMAScript中的函數是對象,因此每定義一個函數, 
    就是實例化一個物件。
  (c)原型模式:我們創建的每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型 
    的所有實例共享的屬性和方法。使用原型物件的好處是可以讓所有物件共享它所包含的屬性和方法     

  function Person(){ 
      } 
      Person.prototype.name = “Nicholas”; 
      Person.prototype.age = 29; 
      Person.prototype.job = “Software Engineer”; 
      Person.prototype.sayName = function(){ 
        alert(this.name); 
      }; 
      var person1 = new Person(); 
      person1.sayName(); //”Nicholas” 
      var person2 = new Person(); 
      person2.sayName(); //”Nicholas” 
      alert(person1.sayName == person2.sayName); //true
登入後複製

    缺點:原型中所有屬性是被很多實例共享的,這種共享對於函數非常合適。但是對於引用類型值的屬性來說,問題就比較突出了。 
    (d)組合使用建構函式模式和原型模式:建立自訂類型最常見的方式,就是使用組合使用建構函式模式和原型模式。建構函數模式用於定義實例屬性, 
      而原型模式用於定義方法和共享的屬性。  

     function Person(name, age, job){ 
        this.name = name; 
        this.age = age; 
        this.job = job; 
        this.friends = [“Shelby”, “Court”]; 
      } 
      Person.prototype = { 
        constructor: Person, 
        sayName : function () { 
        alert(this.name); 
        } 
      }; 
      var person1 = new Person(“Nicholas”, 29, “Software Engineer”); 
      var person2 = new Person(“Greg”, 27, “Doctor”); 
      person1.friends.push(“Van”); 
      alert(person1.friends); //”Shelby,Court,Van” 
      alert(person2.friends); //”Shelby,Court” 
      alert(person1.friends === person2.friends); //false 
      alert(person1.sayName === person2.sayName); //true
登入後複製

以上是javascript建立物件導向方法和優缺點實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板