[JS 디자인 모델]: 공장 모델(3)

간단한 공장 모델은 어떤 종류의 실례를 만들어야 하는지를 결정하는 방법인데, 이런 실례들은 항상 같은 인터페이스를 가지고 있다.이런 모델은 주로 실례화된 유형이 번역 기간에 확정되지 않고 집행 기간에 결정되는 상황에 사용된다.통속적으로 말하자면, 회사의 찻물간 음료수처럼 커피를 원하느냐, 우유를 원하느냐에 따라 어떤 버튼을 누르느냐에 달려 있다.

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에서 이른바 구조 함수도 간단한 공장이다.단지 새로운 옷 한 벌을 주문했을 뿐이다.우리 이 옷을 벗겨서 안을 좀 봅시다.
이 코드를 통해 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() 때 도대체 무슨 일이 있었던 거야?

창설 대상은 o, 즉: var o = {};

모든 대상에는 __proto__ 속성이 있는데 이 속성은 하나의 대상을 가리킨다. 여기에는 o 대상의 __Proto__ 구조 함수Person의 원형 대상Person.prototype을 가리킨다.

은o을 this으로 구조 함수Person를 호출하여 o의 속성과 방법을 설정하고 초기화합니다.

이렇게 하면 아날로그 new 조작 코드를 이해할 수 있다.
참조 주소:

JavaScript 시리즈(28): 디자인 모델의 공장 모델

[Javascript 디자인 모델 2] - 단순 공장 모델

javascript 객체 세부 정보: __proto__프로토타입과의 차이점과 연계