首頁 > web前端 > js教程 > 主體

JS物件導向程式設計中封裝的解析

不言
發布: 2018-08-01 16:07:37
原創
2178 人瀏覽過

這篇文章要跟大家介紹的內容是關於JS物件導向程式設計中封裝的解析,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

我們所熟知的物件導向語言如C 、Java 都有類別的概念,類別是實例的類型模板,例如Student表示學生這種類型,而不表示任何具體的某個學生,而實例就是根據這個類型創建的一個具體的對象,比如zhangsanlisi,由類別生成對象體現了抽像模板到具體化的過程,這叫做基於類別的物件導向方式,而JavaScript 沒有類別的概念,是基於原型的物件導向方式(雖然Es6 增加了class,實質是對原型方式的封裝)。總結起來就是以下兩點:

  • 在基於類別的物件導向方式中,物件(object)依賴類別(class)來產生。

  • 在基於原型的物件導向方式中,物件(object)則是依賴建構子(constructor)和原型(prototype)建構出來的。

物件導向語言的第一個特性毫無疑問是封裝,在JS 中,封裝的過程就是把一些屬性和方法放到物件中「包裹」起來,那麼我們要怎麼去封裝屬性和方法,或者說怎麼去創建物件呢(後文統一說創建物件)?以下用逐步推進的方式闡述:

物件字面量--> 工廠模式--> 建構子--> 原型模式--> 建構子原型模

物件字面量

JS中建立物件最原始的方式有兩種:

  • 物件字面量

  • #

    var  person = {
        name: "leon",
        age: "20",
    
        greeting: function() {
          alert('Hi!');
        }
    }
    登入後複製
  • Object
實例新增屬性方法
  • #

    var person = new Object();
    person.name = "leon";
    person.age = "20";
    
    person.greeting = function() {
      alert('Hi!');
    };
    登入後複製
  • ##優點:程式碼簡單
  • 缺點: 建立多個物件會產生大量的程式碼,編寫麻煩,且沒有實例與原型的概念。
  • 解決方法:工廠模式。

工廠模式

    工廠模式是程式設計領域一種廣為人知的設計模式,它抽象化了創建具體物件的過程。 JS 中建立一個函數,把建立新物件、新增物件屬性、傳回物件的過程放到這個函數中,使用者只需呼叫函數來產生物件而無需關注物件建立細節,這叫做工廠模式:
  • function createPerson(name, age) {
      var person = new Object();
      person.name = name;
      person.age = age;
    
      person.greeting = function() {
        alert('Hi!');
      };
    }
    
    var person1 = createPerson("leon", "20");
    登入後複製

  • 優點:工廠模式解決了物件字面量建立物件程式碼重複問題,建立相似物件可以使用相同API。
  • 缺點:因為是呼叫函建立對象,無法辨識對象的型別。
  • 解決方法:建構子

建構子JS 中建構子與其他函數的唯一區別,就在於調用它的方式不同。任何函數,只要透過

new

操作符來調用,那它就可以作為建構函數。來看下面的範例:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function Person(name, age) {   this.name = name;   this.age = age;      this.greeting = function() {     alert('Hi!');   };   // return this; } var person1 = new Person(&quot;leon&quot;, &quot;20&quot;); var person2 = new Person(&quot;jack&quot;, &quot;21&quot;);</pre><div class="contentsignin">登入後複製</div></div>透過建構子

new
    一個實例經歷了四個步驟:
  1. 建立一個新物件;
  2. 將建構子內的

    this
  3. 綁定到新物件上;
  4. 為新物件新增屬性和方法;
  5. 傳回新物件(JS 引擎會預設新增

    return this;
  6. )。

而透過建構函式所建立的物件都有一個

constructor

屬性,它是一個指向建構函式本身的指針,因此就可以偵測物件的型別啦。 :

alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true
登入後複製

但是仍然存在問題:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert(person1.greeting == person2.greeting) //false</pre><div class="contentsignin">登入後複製</div></div>同一個建構子中定義了

greeting()
    ,而不同實例上的同名函數卻是不相等的,意味著這兩個同名函數的記憶體空間不一致,也就是建構函式中的方法要在每個實例上重新建立一次。這顯然是不划算的。
  • 優點:解決了類似物件建立問題,且可以偵測物件類型。
  • 缺點:建構子方法要在每個實例上新建一次。
  • 解決方法:原型模式。

原型模式終於講到了原型模式,JS 中每個建構函式都有一個prototype<em>屬性,這個屬性是一個指標,指向原型對象,而這個原型對象包含了這個建構子所有實例共享的屬性和方法。而實例物件中有一個</em>proto屬性,它指向原型對象,也就是建構子.prototype = = 原型物件== 物件._proto_,那麼對象就可以取得到原型物件中的屬性和方法啦。同時,所有物件中都有一個constructor屬性,原型物件的

constructor###指向其對應的建構子。 ###

使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new一个实例,原型对象中定义的方法都不会重新创建一次。来看下面的例子:

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true
登入後複製
  • 优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。

  • 缺点:使用空构造函数,实例 person1 和 person2 的 name都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。

  • 解决办法:构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性,这里罗列一下:

  • Object.getPrototypeOf(),取得实例的原型对象。

Object.getPrototypeOf(person1);
登入後複製
  • isPrototypeOf(),判断是不是一个实例的原型对象。

Person.prototype.isPrototypeOf(person1);
登入後複製
  • hasOwnProperty(),检测一个属性是否存在于实例中

person1.hasOwnProperty("name");
登入後複製
  • in,判断一个属性是否存在于实例和原型中。

"name" in person1;
登入後複製

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,同时又有对共享方法的引用,节省内存。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true
登入後複製

上面代码中用对象字面量的形式重写了原型对象,这样相当于创建了一个新的对象,那么它的constructor属性就会指向Object,这里为了让它继续指向构造函数,显示的写上了constructor: Person

这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。

相关文章推荐:

jQuery自调用匿名函数是如何调用的?

JavaScript是否使用var定义变量的区别,举例说明

以上是JS物件導向程式設計中封裝的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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