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

프로토타입 모드

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

예제에서는 속성과 메서드를 추가할 때마다 Person.prototype을 입력해야 합니다. 불필요한 입력을 줄이고 프로토타입의 기능을 시각적으로 더 잘 캡슐화하기 위해 다음 예제와 같이 모든 속성과 메서드를 포함하는 개체 리터럴로 전체 프로토타입 개체를 재정의하는 것이 더 일반적입니다.

function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

위 코드에서는 Person.prototype을 객체 리터럴로 생성된 새 객체와 동일하게 설정했습니다. 최종 결과는 동일하지만 한 가지 예외는 생성자 속성이 더 이상 Person을 가리키지 않는다는 것입니다. 앞서 소개했듯이 함수가 생성될 때마다 해당 프로토타입 객체가 동시에 생성되며 이 객체도 자동으로 생성자 속성을 얻습니다. 여기서 사용하는 구문은 기본적으로 기본 프로토타입 객체를 완전히 다시 작성하므로 생성자 속성은 새 객체의 생성자 속성(Object 생성자를 가리킴)이 되고 더 이상 Person 함수를 가리키지 않습니다. 이때, instanceof 연산자는 여전히 올바른 결과를 반환할 수 있지만, 아래와 같이 생성자를 통해 객체의 유형을 결정할 수는 없습니다.

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

여기서 object 및 Person을 테스트하기 위해 objectofree 연산자를 사용하면 여전히 true를 반환하지만 생성자 속성은 Object와 같고 Person과는 같지 않습니다. 생성자의 값이 정말 중요한 경우 아래와 같이 의도적으로 적절한 값으로 다시 설정할 수 있습니다.

function Person(){
}
 Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

한 가지 주의할 점은 인스턴스의 포인터가 생성자가 아닌 프로토타입만 가리킨다는 것입니다.

프로토타입 객체의 문제: 프로토타입 패턴에 단점이 없는 것은 아닙니다. 첫째, 초기화 매개변수를 생성자에 전달할 필요성을 생략하므로 모든 인스턴스는 기본적으로 동일한 속성 값을 얻습니다. 이는 어느 정도 불편을 끼칠 수 있지만 프로토타입의 가장 큰 문제는 아니다. 프로토타입 패턴의 가장 큰 문제는 공유 특성에서 발생합니다.

rreee

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