js 디자인 모델 의 2 - 구조 함수 모델

소개 하 다.
구조 함 수 는 모두 가 잘 알 고 있 지만, 당신 이 초보 라면 구조 함수 가 무엇 인지 알 아 볼 필요 가 있 습 니 다.구조 함 수 는 특정 유형의 대상 을 만 드 는 데 사 용 됩 니 다. 사용 대상 을 설명 할 뿐만 아니 라 구조 함 수 는 대상 을 처음 만 들 때 대상 의 구성원 값 을 설정 할 수 있 도록 인 자 를 받 아들 일 수 있 습 니 다.구조 함 수 를 사용자 정의 한 다음 유형 대상 의 속성 이나 방법 을 설명 할 수 있 습 니 다.
기본 용법
자바 스 크 립 트 에서 구조 함 수 는 보통 인 스 턴 스 를 실현 하 는 데 사용 된다 고 생각 합 니 다. 자바 스 크 립 트 는 클래스 의 개념 이 없 지만 특수 한 구조 함수 가 있 습 니 다.new 키 워드 를 통 해 정 의 된 초기 함 수 를 호출 할 수 있 습 니 다. 자바 스 크 립 트 에 새로운 대상 을 만 들 고 새로운 대상 의 구성원 성명 은 모두 구조 함수 에서 정 의 된 것 이 라 고 알려 줄 수 있 습 니 다.구조 함수 내부 에서 this 키 워드 는 새로 만 든 대상 을 참조 합 니 다.기본 용법 은 다음 과 같다.

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("cll", 2009, 20000);
var dudu= new Car("geek", 2010, 5000);

console.log(cll.output());
console.log(geek.output());

위의 예 는 매우 간단 한 구조 함수 모델 이지 만 약간의 문제 가 있다.우선 계승 을 사용 하 는 것 이 번 거 롭 습 니 다. 그 다음 에 output () 는 대상 을 만 들 때마다 다시 정 의 했 습 니 다. 가장 좋 은 방법 은 모든 Car 유형의 인 스 턴 스 가 이 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 + "  ";
}

이 방식 은 비록 사용 할 수 있 지만, 우 리 는 다음 과 같은 더 좋 은 방법 이 있다.
구조 함수 와 원형
JavaScript 에 함 수 는 프로 토 타 입 이라는 프로 토 타 입 속성 이 있 습 니 다. 구조 함수 생 성 대상 을 호출 할 때 이 구조 함수 프로 토 타 입 의 속성 은 새 생 성 대상 에서 사용 할 수 있 습 니 다.이렇게 하면 여러 개의 Car 대상 인 스 턴 스 가 같은 원형 을 공유 할 수 있 습 니 다. 우 리 는 상기 코드 를 다시 확장 할 수 있 습 니 다.

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("cll", 2009, 20000);
var dudu = new Car("geek", 2010, 5000);

console.log(cll.output());
console.log(geek.output());

여기 서 output () 단일 인 스 턴 스 는 모든 Car 대상 인 스 턴 스 에서 공유 하여 사용 할 수 있 습 니 다.
또한 일반적인 함 수 를 구분 하기 위해 구조 함 수 를 대문자 로 시작 하 는 것 을 추천 합 니 다.
new 밖 에 안 돼 요?
위의 예 는 함수 car 에 대해 모두 new 로 대상 을 만 드 는 것 입 니 다. 이것 만 있 습 니까?사실 또 다른 방법 이 있 습 니 다. 우 리 는 두 가 지 를 열거 합 니 다.

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("cll", 2009, 20000);     window   

console.log(window.output());

//  2：              

var o = new Object();
Car.call(o, "geek", 2010, 5000);
console.log(o.output());

이 코드 의 방법 1 은 좀 특수 합 니 다. new 직접 호출 함수 가 적용 되 지 않 으 면 this 가 가리 키 는 것 은 전역 대상 window 입 니 다. 검증 해 보 겠 습 니 다.

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

이 때 대상 tom 은 undefined 이 고 window. output () 는 결 과 를 정확하게 출력 합 니 다. new 키 워드 를 사용 하면 이 문제 가 없습니다. 검증 은 다음 과 같 습 니 다.

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

new 강제 사용
상술 한 예 는 new 를 사용 하지 않 는 문 제 를 보 여 주 었 습 니 다. 그러면 우 리 는 구조 함수 가 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("cll", 2009, 20000);
var dudu = Car("geek", 2010, 5000);

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

this 의 instanceof 가 Car 인지 아 닌 지 를 판단 하여 new Car 로 돌아 갈 지, 코드 를 계속 실행 할 지 결정 합 니 다. new 키 워드 를 사용 하면 (this instanceof Car) 이 진실 이 고 아래 의 매개 변수 할당 을 계속 실행 합 니 다. new 를 사용 하지 않 으 면 (this instanceof Car) 는 가짜 입 니 다. new 인 스 턴 스 를 사용 하지 않 으 면 다시 new 인 스 턴 스 를 되 돌려 줍 니 다.
원시 포장 함수
JavaScript 에는 3 가지 원시 포장 함수 가 있 습 니 다: number, string, boolean, 가끔 두 가지 모두 사용 합 니 다.

//         
var s = new String("my string");
var n = new Number(101);
var b = new Boolean(true);


//     
var s = "my string";
var n = 101;
var b = true;

추천 합 니 다. 수치 상 태 를 유지 하고 싶 을 때 만 이 포장 함 수 를 사용 합 니 다. 차이 점 에 대해 서 는 아래 코드 를 참고 하 십시오.

//   string
var greet = "Hello there";
//   split()    
greet.split(' ')[0]; // "Hello"
//               
greet.smile = true;
//         （18 ECMAScript          ）
console.log(typeof greet.smile); // "undefined"

//   string
var greet = new String("Hello there");
//   split()    
greet.split(' ')[0]; // "Hello"
//                 
greet.smile = true;
//          
console.log(typeof greet.smile); // "boolean"

총결산
본 고 는 주로 구조 함수 모델 의 사용 방법, 호출 방법 과 new 키워드 의 차 이 를 설명 하 였 으 니 여러분 들 이 사용 할 때 주의 하 시기 바 랍 니 다.
주소: cll