JavaScript가 생성자 패턴을 사용하여 객체 인스턴스를 생성하는 방법에 대한 자세한 설명

생성자 패턴

Object 및 Array와 같은 생성자는 런타임 시 실행 환경에 자동으로 나타납니다. 또한 사용자 정의 생성자를 만들어 사용자 정의 개체 유형의 속성과 메서드를 정의할 수 있습니다.

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

이 예에서는 Person() 함수가 createPerson() 함수를 대체합니다. createPerson()과 동일한 부분 외에도 Person()의 코드에는 다음과 같은 차이점이 있습니다.

1. 개체가 명시적으로 생성되지 않습니다.

2. 이 개체는

3.

Person의 새 인스턴스를 만들려면 new 연산자를 사용해야 합니다. 이런 방식으로 생성자를 호출하는 것은 실제로 다음 4단계를 거칩니다.

(1) 새 개체 만들기
(2) 생성자의 범위를 새 개체에 할당합니다(이는 이 새 개체를 가리킵니다) ;
( 3) 생성자에서 코드를 실행합니다(이 새 개체에 속성을 추가합니다).
(4) 새 개체를 반환합니다.

이전 예의 끝에서 person1과 person2는 각각 다른 Person 인스턴스를 보유합니다. 두 객체 모두 아래와 같이 Person을 가리키는 생성자 속성을 가지고 있습니다.

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

객체의 생성자 속성은 원래 객체 유형을 식별하는 데 사용됩니다. 그러나 객체 유형을 감지하는 경우에는 instanceof 연산자가 더 안정적입니다. 이 예제에서 생성한 모든 객체는 Object 인스턴스이자 Person 인스턴스이며, 이는 instanceof 연산자를 통해 확인할 수 있습니다.

alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true

사용자 정의 생성자를 생성한다는 것은 나중에 해당 인스턴스를 특정 유형으로 식별할 수 있다는 것을 의미하며, 여기서 생성자 패턴이 팩토리 패턴보다 성능이 뛰어납니다. 이 예에서 person1과 person2는 모두 Object의 인스턴스입니다. 모든 개체가 Object에서 상속되기 때문입니다.

생성자 문제

생성자 패턴은 사용하기 쉽지만 단점이 없는 것은 아닙니다. 생성자를 사용할 때의 주요 문제점은 각 인스턴스에서 각 메소드를 다시 작성해야 한다는 것입니다.

ECMAScript의 함수는 객체이므로 함수가 정의될 ​​때마다 객체가 인스턴스화됩니다. 논리적인 관점에서 볼 때 이때의 생성자는 이렇게 정의할 수도 있습니다.

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
}

이러한 관점에서 생성자를 살펴보면 각 Person 인스턴스에 다른 Function 인스턴스(name 속성을 표시하기 위해)가 포함되어 있다는 본질을 더 쉽게 이해할 수 있습니다. 확실히 말하면, 이런 방식으로 함수를 생성하면 범위 체인과 식별자 확인이 달라지지만, Function의 새 인스턴스를 생성하는 메커니즘은 여전히 ​​동일합니다. 따라서 다음 코드에서 증명할 수 있듯이 서로 다른 인스턴스에서 동일한 이름을 가진 함수는 동일하지 않습니다.

alert(person1.sayName == person2.sayName); //false

그러나 동일한 작업을 완료하기 위해 실제로 두 개의 Function 인스턴스를 만들 필요는 없습니다. 게다가 이 개체를 사용하면 코드를 실행하기 전에 함수를 특정 개체에 바인딩할 필요가 없습니다. 따라서 다음과 같이 함수 정의를 생성자 외부로 이동하면 이 문제를 해결할 수 있습니다.

rreee

위 내용은 JavaScript가 생성자 패턴을 사용하여 객체 인스턴스를 생성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!