[JS设计模式]：工厂模式（3）

时间：2023-03-08 15:46:09

简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定， 而是在执行期决定的情况。 说的通俗点，就像公司茶水间的饮料机，要咖啡还是牛奶取决于你按哪个按钮。

var Car = (function () {

    var Car = function (model, year, miles) {

        this.model = model;

        this.year = year;

        this.miles = miles;

    };

    return function (model, year, miles) {

        return new Car(model, year, miles);

    };

})();

var tom = new Car("Tom", 2009, 20000);

var dudu = new Car("Dudu", 2010, 5000);

不好理解的话，我们再给一个例子：

var productManager = {};

productManager.createProductA = function () {

    console.log('ProductA');

}

productManager.createProductB = function () {

    console.log('ProductB');

}

productManager.factory = function (typeType) {

    return new productManager[typeType];

}

productManager.factory("createProductA");

如果还不理解的话，那我们就再详细一点咯，假如我们想在网页面里插入一些元素，而这些元素类型不固定，可能是图片，也有可能是连接，甚至可能是文本，根据工厂模式的定义，我们需要定义工厂类和相应的子类，我们先来定义子类的具体实现（也就是子函数）：

var page = page || {};

page.dom = page.dom || {};

//子函数1：处理文本

page.dom.Text = function () {

    this.insert = function (where) {

        var txt = document.createTextNode(this.url);

        where.appendChild(txt);

    };

};

//子函数2：处理链接

page.dom.Link = function () {

    this.insert = function (where) {

        var link = document.createElement('a');

        link.href = this.url;

        link.appendChild(document.createTextNode(this.url));

        where.appendChild(link);

    };

};

//子函数3：处理图片

page.dom.Image = function () {

    this.insert = function (where) {

        var im = document.createElement('img');

        im.src = this.url;

        where.appendChild(im);

    };

};

那么我们如何定义工厂处理函数呢？其实很简单：

page.dom.factory = function (type) {

    return new page.dom[type];

}

使用方式如下：

var o = page.dom.factory('Link');

o.url = 'http://www.cnblogs.com';

o.insert(document.body);

实际上在js里面，所谓的构造函数也是一个简单工厂。只是批了一件new的衣服. 我们扒掉这件衣服看看里面。

通过这段代码, 在firefox, chrome等浏览器里，可以完美模拟new.

function A( name ){

  this.name = name;

}

function ObjectFactory(){

  var obj = {},

  Constructor = Array.prototype.shift.call( arguments );

  obj.__proto__ =  typeof Constructor.prototype === 'number'  ? Object.prototype :  Constructor.prototype;

  var ret = Constructor.apply( obj, arguments );

  return typeof ret === 'object' ? ret : obj;

}

var a = ObjectFactory( A, 'mr mo' );

console.log ( a.name );  //mr mo

这段代码来自es5的new和构造器的相关说明， 可以看到，所谓的new， 本身只是一个对象的复制和改写过程， 而具体会生成什么是由调用ObjectFactory时传进去的参数所决定的。

看一下new一个构造函数进行了什么操作，如下代码：

function Person(name, age) {

    this.name = name;

    this.age = age;

}

var person1 = new Person('jessica', 27);

当我们new Person()的时候到底发生了什么？

  1. 创建对象，设为o，即： var o = {};

  2. 每个对象都有__proto__属性，该属性指向一个对象，这里，将o对象的__Proto__指向构造函数Person的原型对象（Person.prototype）;

  3. 将o作为this去调用构造函数Person，从而设置o的属性和方法并初始化。

这样也就可以理解模拟new操作的代码了。

参考地址：

相关文章