JavaScript Object Oriented Programming - Factory Constructor Pattern

JavaScript Object Oriented Programming - Factory Constructor Pattern JavaScript Object Oriented Programming - Factory Constructor Pattern

「Factory Constructor Pattern」不使用new來宣告新物件,新物件用function call來建立,如下:

var animal = Animal('fox');
var rabbit = Rabbit('rab');

物件宣告

建構子使用function定義,並回傳一個新物件。

function Animal(name) {
  return {
    run: function() {
      console.log(name + " is running!")
    }
  }
};

然後我們這樣使用這個建構子來建立新物件,並沒有使用到new。

var animal = Animal('fox'); //fox is running
animal.run();

繼承

「Rabbit」這個物件是繼承「Animal」所建立的建構子,然後我們來做些變化吧。

function Rabbit(name) {
  var rabbit = Animal(name); //make animal

  rabbit.bounce = function() { //mutate
    this.run(); //rab is running!
    console.log(name + ' bounces to the skies! :)'); //rab bounces to the skies! :)
  }
  return rabbit //return the result
}

var rabbit = Rabbit('rab');
rabbit.bounce()

封裝:Private/protected methods

public method可以被外部呼叫,例如;this.move(),但不能被private method呼叫。private method,例如;openWings,不能參考this - 因此 local function在此無法參考到這個新建立的物件。(但其實我的測試結果是沒有這個問題,如果有大大可以告訴我是發生什麼事情的話,會非常感激的!)

function Bird(name) {
  var speed = 100; //private property
  function openWings() { //private method
    console.log('open wings');
  };
  return {
    fly: function() {
      openWings();
      this.move();
    },
    move: function() {
        console.log('move');
    } 
  }
};

var bird = Bird('Jack');
bird.fly();
bird.move();

其中一個解法是使用一個local變數儲存物件來回傳。

function Bird(name) {
  var speed = 100; //private property

  function openWings() { //private method
    console.log('open wings');
  };    

  function doFly() { //private method
    openWings();
    self.move();
  };

  var self ={
    fly: function() { 
        doFly(); 
    },
    move: function() {
        console.log('move');
    }   
  }
  return self
};

var bird = Bird('Jack');
bird.fly();
bird.move();

Summary

  • Factory Constructor Pattern不使用new來宣告新物件,新物件用function call來建立
  • 繼承:建立父物件,知後修改它即可。
  • 區域method和method是private的,物件必須先在閉包中儲存再回傳,這樣才能在公開的method中使用。

Comparison with All-in-one constructor

「Factory Constructor Pattern」和「All-in-one constructor」其實結果是相同的,只是寫法上稍為有些不同,選一個你喜歡的即可。


References


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-JavaScript Object Oriented Programming: Factory Constructor Pattern
張貼留言