[JS 설계 모드]: 구조 함수 모드(2)

기본용법

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= function () {
        return this.model + " " + this.miles + " ";
    };
}

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

console.log(tom.output());
console.log(dudu.output());

문제는 output () 가 대상을 만들 때마다 다시 정의되어 공유되지 않았다는 것입니다.
다음과 같이 할 수 있습니다.

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= formatCar;
}

function formatCar() {
    return this.model + " " + this.miles + " ";
}

더 좋은 방법은 원형 계승 output 방법을 사용합니다.

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}

/*
 ： Object.prototype. ， Object.prototype
 prototype 
*/
Car.prototype.output= function () {
    return this.model + " " + this.miles + " ";
};

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

console.log(tom.output());
console.log(dudu.output());

new를 제외하고는 함수 호출,call 방식으로 사용할 수 있습니다

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    //  output 
    this.output = function () {
        return this.model + " " + this.miles + " ";
    }
}

// 1： 
Car(" ", 2009, 20000);  // window 
console.log(window.output());

// 2： 
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output()); 

이 코드의 방법 1은 좀 특수합니다. 만약에 new가 함수를 직접 호출하지 않는다면,this는 전역 대상인 윈도우를 가리키고 있습니다. 검증해 보겠습니다.

// 
var tom = Car(" ", 2009, 20000);
console.log(typeof tom); // "undefined"
console.log(window.output()); // " 20000 "

이때 대상tom은undefined이고 윈도우입니다.output () 는 결과를 정확하게 출력하지만, new 키워드를 사용하면 이 문제가 없습니다.

// new  
var tom = new Car(" ", 2009, 20000);
console.log(typeof tom); // "object"
console.log(tom.output()); // " 20000 "

instanceof를 사용하여 new를 강제로 사용합니다.

function Car(model, year, miles) {
    if (!(this instanceof Car)) {
        return new Car(model, year, miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function () {
        return this.model + " " + this.miles + " ";
    }
}

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

console.log(typeof tom); // "object"
console.log(tom.output()); // " 20000 "
console.log(typeof dudu); // "object"
console.log(dudu.output()); // "Dudu 5000 "

this의 instanceof가 Car인지 아닌지를 판단하여 new Car로 되돌아갈지 아니면 계속 코드를 실행할지 결정합니다. 만약 new 키워드를 사용한다면 (this instanceof Car) 아래의 매개 변수 값을 계속 실행합니다. new를 사용하지 않으면 (this instanceof Car) 가짜로 되돌아옵니다.

참조 주소

JavaScript 시리즈(26): 디자인 모델의 구조 함수 모델을 깊이 이해한다