JavaScript Object Oriented Programming: Factory Constructor Pattern

08 Feb 2016

JavaScript

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