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

Comparison with All-in-one constructor

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

References


這篇文章的原始位置在這裡-JavaScript Object Oriented Programming - Factory Constructor Pattern

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: javascript
comments powered by Disqus