1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 明白javascript封裝

        時間:2024-08-11 17:32:03 JavaScript 我要投稿
        • 相關推薦

        明白javascript封裝

          封裝可以被定義為對對象的內部數據表現形式和實現細節進行隱藏。通過封裝可以強制實施信息隱藏。

          在JavaScript中,并沒有顯示的聲明私有成員的關鍵字等。所以要想實現封裝/信息隱藏就需要從另外的思路出發。我們可以使用閉包的概念來創建只允許從對象內部訪問的方法和屬性,來達到封裝的要求。

          基本方式

          一般來說,我們學用的有三種方法來達到封裝的目的。

          使用this.XXX來聲明一個變量,然后再聲明getXXX、setXXX等取值、賦值的方法。

          使用this._XXX來聲明一個變量,然后再聲明getXXX、setXXX等取值、賦值的方法。

          利用“函數作用域”這一個概念來做。

          1. 門戶大開型

          var Book = function(isbn,title,author){ this.setIsbn(isbn); this.setTitle(title); this.setAuthor(author); }; Book.prototype = { setIsbn: function(isbn){ this.isbn = isbn; }, getIsbn: function(){ return this.isbn; }, setTitle: function(title){ this.title = title; }, getTitle: function(){ return this.title; }, setAuthor: function(author){ this.author = author; }, getAuthor: function(){ return this.author; } };

          使用這種方法實現的封裝,雖然實現了取值器與賦值器以保護私有屬性。但是在實際使用中,私有屬性依然可以從外部訪問,所以從根本上講,沒有實現封裝。

          2. 用命名規范進行區別

          var Book = function(isbn,title,author){ this.setIsbn(isbn); this.setTitle(title); this.setAuthor(author); }; Book.prototype = { setIsbn: function(isbn){ this._isbn = isbn; }, getIsbn: function(){ return this._isbn; }, setTitle: function(title){ this._title = title; }, getTitle: function(){ return this._title; }, setAuthor: function(author){ this._author = author; }, getAuthor: function(){ return this._author; } };

          使用這種方法與第一種類似,區別在于使用不同的命名來保護私有屬性的使用。但是,從實際應用來說其仍然沒有實現封裝。

          3. 使用函數作用域

          var Book = function(newIsbn,newTitle,newAuthor){ var isbn,title,author; this.setIsbn=function(newIsbn){ isbn = newIsbn; }; this.getIsbn=function(){ return isbn; }; this.setTitle=function(newTitle){ title = newTitle; }; this.getTitle=function(){ return title; }; this.setIsbn=function(newAuthor){ author = newAuthor; }; this.getIsbn=function(){ return author; }; }

          由于在JavaScript的函數中聲明的變量是有作用域的,所以使用這種方法可以避免在外部直接訪問私有屬性;具_到封裝所要求的內容。

          這里要注意的是,我們在函數的內部,可以使用this.XXX以及var來聲明變量。區別是使用this.XXX聲明的變量在外部是可以訪問的。使用var聲明的變量,由于受到函數作用域的保護,在函數的外部是無法直接訪問的。

          4. 使用函數作用域的變形

          var Book = (function(){ // ...其他靜態方法 return function(newIsbn,newTitle,newAuthor){ var isbn,title,author; this.setIsbn=function(newIsbn){ isbn = newIsbn; }; this.getIsbn=function(){ return isbn; }; this.setTitle=function(newTitle){ title = newTitle; }; this.getTitle=function(){ return title; }; this.setIsbn=function(newAuthor){ author = newAuthor; }; this.getIsbn=function(){ return author; }; }; })();

          這種方法是直接返回一個構造器的執行。且這里的構造器是一個內嵌函數。

          這種方法的優點是“在內存中只會存在一份。因為其他靜態方法被聲明在構造器之外,所以它們不是特權方法!

          判斷一個方法是否應該被設計為靜態方法的原則是“這個方法是否會訪問私有屬性”。如果它不需要,那么將其設計為靜態方法會更有效率,因為它只會被創建一份。

          常量

          我們可以使用“只有取值器,沒有賦值器”的方式來實現常量。

          // 1. var Book = function(){ var constants = ["key1": "1","key2": "2","key3": "3"]; this.getConstant = function(key){ return constants[key]; }; }; Book.getConstant("key1"); // 2. var Book = (function(){ var constants = ["key1": "1","key2": "2","key3": "3"]; var con = function(){}; con.getConstant = function(name){ return constants[name]; }; return con; })(); Book.getConstant("key1");

          利弊

          1、利處

          封裝保護了內部數據的完整性;

          封裝使對象的重構更輕松;

          弱化模塊間的耦合,提高對象的可重用性;

          有助于避免命名空間沖突;

          ……

          2、弊處

          私用方法很難測試;

          必須與復雜的作用域鏈打交道,使錯誤調度更困難;

          容易形成過度封裝;

          JavaScript并不原生支持封裝,所以在JavaScript中實現封裝存在復雜性的問題;

        【明白javascript封裝】相關文章:

        對javascript的理解08-08

        常用的JavaScript模式09-22

        Javascript的this用法簡述08-15

        JavaScript學習筆記08-24

        JavaScript 基礎教學09-29

        JavaScript的課堂講解09-03

        JavaScript常用方法匯總10-25

        JavaScript數組常用方法介紹09-04

        JavaScript中的with關鍵字07-24

        高效編寫JavaScript代碼的技巧08-25

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>