DIV CSS 佈局教程網

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);

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