Javascript oop設計模式 物件導向編程簡單一實例介紹_javascript技巧

Javascript oop設計模式 物件導向編程

最初我們寫js代碼的時候是這麼寫

 function checkName(){    //驗證姓名  }  function checkEmail(){    //驗證郵箱  }  function checkPassword(){    //驗證密碼  }

這種方式會造成全域變數的嚴重汙染，再過渡到

var checkObject = {  checkName : function(){};  checkEmail: function(){};  checkPassword: funcion(){}; }//也可如此寫var checkObject = {} // || function(){}checkObject.checkName = function(){};checkObject.checkEmail = function(){};checkObject.checkPassword = function(){};//以上這兩種寫法不能複製一份，也就是說在new 方法建立新的對象的時候，新對象不能繼承這些方法

以上是直接使用，而不是建立對象複製一份的,複製一份的話可以這麼寫

var checkObject = function(){    return {      checkName:function(){},      checkEmail:function(){},      checkPassword:function(){}    }  }//使用的時候 可以var a = checkObject();a.checkName();

這麼寫可以實現對象的複製 但是這不符合物件導向，新建立的類和checkObject 沒有任何關係
於是我們可以採用建構函式的方式書寫代碼

  var checkObject = function(){    this.checkName = function(){}    this.checkEmail = function(){}    this.checkPassword = function(){}  }//像這樣我們便可以用CheckObject 來建立新的對象了,通過new 來建立對象，建立出來的每個對象都會對this上的屬性進行複製,但是這麼做的話，每次都會有相對較大消耗，對於共有的方法，我們可以放在對象的原型上var checkObject = function(){};checkObject.prototype.checkName = function(){};//...//這樣寫要將prototype 書寫很多遍 ，所以我們可以這麼寫,並實現鏈式調用，將this返回var checkObject = function(){};checkObject.prototype={  checkName:function(){    //驗證姓名    return this;  },  checkEmail:function(){    //驗證郵箱    return this  },  checkPassword:function(){    //驗證密碼    return this;  }  }// 這兩種方式不可混用，否則後邊會覆蓋前邊，此時我們調用只需new checkObject().checkName().checkEmail().checkPassword();

下面再來介紹一下物件導向和面向過程兩種編程方式 .page 10

多個function 書寫的方式是一種面向過程書寫代碼的實現方式，添加了很多全域變數而且不利於別人複用，在別人使用時你也不可修改，我們可以改用物件導向方式來重寫，我們把需求抽成一個對象，這個對象稱之為類，物件導向一個重要特點就是封裝，將屬性和方法封裝在一個對象中，就像將物品放在一個旅行箱中，這樣不管是使用和管理我們都方便，(雖然有時候感覺直接拿在外邊擺放也很方便，但是東西一多便不利於管理)

  var Book = (function () {    //靜態私人變數    var bookNum = 0;    //靜態私人方法    function checkBook() {    }    //返回建構函式    return function (newId, newName, newPrice) {      //私人變數      var name, price;      //私人方法      function checkId(id) {      }      //特權方法      this.getPrice = function () {      };      this.getName = function () {      };      this.setName = function (name) {        this.name = name      };      this.setPrice = function () {      };      //公有屬性      this.id = newId;      //公有方法      this.copy = function () {      };      bookNum++;      if (bookNum > 100)        throw new Error('oop javascript');      //構造器 執行個體化過程中被調用的方法      this.setName(name);      this.setPrice(price);    }  })();  Book.prototype = {    //靜態公有屬性    isJSBook: false,    //靜態公有方法    display: function () {    }  };  //對比Java 別被js 起的這些名字弄混了 其實Js 就模仿了一個New 其他的跟Java基本一樣 類 全域變數 方法 有自己的理解比較好 以前未想明白  // java 為什麼那麼些

//為了看起來更像一個類 我們將原型上的方法 寫到類裡邊

 var Book = (function () {    //靜態私人變數    var bookNum = 0;    //靜態私人方法    function checkBook() {    }    //返回建構函式     function _Book(newId, newName, newPrice) {      //私人變數      var name, price;      //私人方法      function checkId(id) {      }      //特權方法      this.getPrice = function () {      };      this.getName = function () {      };      this.setName = function (name) {        this.name = name      };      this.setPrice = function () {      };      //公有屬性      this.id = newId;      //公有方法      this.copy = function () {      };      bookNum++;      if (bookNum > 100)        throw new Error('oop javascript');      //構造器 執行個體化過程中被調用的方法      this.setName(name);      this.setPrice(price);    }    _Book.prototype = {      //靜態公有屬性      isJSBook: false,      //靜態公有方法      display: function () {      }    };    return _Book;  })();

下面再介紹一種建立對象的安全模式   

//注意 執行new Book 方法之前 this.title 會先執行一次  var Book = function (title) {    if (this instanceof Book) {      alert(1);      this.title = title;    }else{      return new Book(title);    }  };  var book = new Book('js');  alert(book.title);

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！