JavaScript 사용자 정의 속성 및 메서드에 대한 개체 모델 코드에 대한 자세한 설명

JavaScript에는 사용자 정의 속성과 메서드를 사용하여 객체를 생성하는 다양한 모드가 있습니다

1. 직접 생성 모드. 이는 가장 간단하고 간단한 패턴입니다. 먼저 참조 유형의 개체를 만든 다음 여기에 사용자 지정 속성과 메서드를 추가합니다. 샘플 코드는 다음과 같습니다.

var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak();

보시다시피 위에서 Object 유형의 객체가 생성되고 여기에 name 및 age 속성과 speaking 메소드가 추가됩니다. 패턴을 직접 생성하는 것은 간단하지만 단점은 분명합니다. 동일한 객체를 많이 생성해야 할 경우 매번 반복적으로 코드를 작성해야 합니다. 이 문제를 해결하기 위해 객체 생성 과정을 캡슐화할 수 있으므로 다음과 같은 팩토리 패턴을 갖게 됩니다.
2. 공장 모드. 팩토리 패턴은 프로그래밍에서 흔히 사용되는 디자인 패턴으로, 주로 객체를 생성하는 과정을 캡슐화합니다. 샘플 코드는 다음과 같습니다.

function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18);

팩토리 패턴을 사용하면 동일한 유형의 객체를 생성하는 것이 간단해집니다. 그러나 팩토리 패턴은 객체 식별 문제를 해결하지 못합니다. 즉, 생성된 객체의 특정 유형을 결정할 수 없습니다. 객체 지향 프로그래밍 경험이 있는 개발자는 객체 생성이 클래스를 기반으로 해야 한다는 것을 알고 있습니다. 특정 사용자 정의 클래스가 있으면 해당 클래스의 객체를 생성할 수 있습니다. 다행스럽게도 JavaScript에서는 생성자 패턴을 통해 클래스를 시뮬레이션할 수 있습니다.
3. 생성자 패턴. 생성자와 일반 함수 사이에는 차이가 없습니다. new 연산자를 사용하는 한 모든 일반 함수를 생성자로 사용할 수 있습니다. 모든 생성자를 일반 함수로 호출할 수도 있습니다. 하지만 JavaScript에서는 생성자로 사용되는 함수 이름의 첫 글자를 대문자로 써야 한다는 관례가 있습니다. 샘플 코드는 다음과 같습니다.

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18);

생성자 내부에서 이를 사용하여 속성과 메서드를 추가하는 것을 볼 수 있습니다. Person 객체를 생성할 때, 이는 생성된 객체를 참조합니다. 이제 person1과 person2의 특정 유형의 개체를 식별할 수 있습니다. Alert(person1 instanceOf Person)를 사용한 후 출력 값이 true임을 확인할 수 있습니다. 그러나 생성자 패턴에는 자체적인 단점도 있습니다. 즉, 생성자 내에 선언된 메서드는 새 객체가 생성될 때마다 다시 생성됩니다(JavaScript에서는 함수도 객체입니다). 즉, 생성자 내의 메서드는 클래스가 아닌 객체에 바인딩됩니다. 아래 코드의 출력은 우리의 추론을 검증할 수 있습니다.
alert(person1.speak == person2.speak); // false 이 단점을 해결하는 비교적 간단한 방법은 함수 선언을 생성자 외부에 두는 것입니다. 즉,

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true

문제는 해결되었지만 이 메서드는 새로운 문제를 가져왔습니다. 첫째, 함수 talk는 전역 범위에서 선언되지만 Person 생성자에서만 사용할 수 있습니다. 둘째, 사용자 정의 유형에 메서드가 많으면 오용될 위험이 있습니다. 많은 전역 함수를 선언하면 전역 범위가 오염될 뿐만 아니라 코드 캡슐화에도 도움이 되지 않습니다. 그렇다면 전역 범위를 오염시키지 않고 클래스에 바인딩된 사용자 정의 유형 메서드를 만들 수 있는 방법이 있습니까? 대답은 프로토타입 패턴을 사용하는 것입니다.
4. 프로토타입 모드. 새 함수를 선언한 후 해당 함수(JavaScript에서는 함수도 객체임)는 프로토타입 속성을 갖게 됩니다. 프로토타입은 이 함수에 의해 생성된 모든 개체가 소유한 공용 속성과 메서드를 나타내는 개체입니다. 샘플 코드는 다음과 같습니다.

function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

Speak 메소드가 생성자에 선언되지 않았음에도 불구하고 우리가 만든 객체 person1은 여전히 ​​Speak 메소드를 호출할 수 있다는 것을 알 수 있습니다. 이는 JavaScript에 우선 검색 규칙이 있기 때문입니다. 인스턴스 속성 및 메소드를 찾아 찾은 후 반환하고, 찾지 못한 경우 프로토타입에서 다시 검색합니다. 프로토타입 패턴은 클래스와 관련된 메소드를 만들고 전역 범위를 오염시키지 않지만 자체적인 단점도 있습니다. 첫째, 모든 속성도 클래스와 관련되어 있습니다. 이는 모든 객체가 하나의 속성을 공유한다는 것을 의미하며 이는 명백히 비합리적입니다. ; 둘째, 초기화 데이터를 생성자에 전달할 방법이 없습니다. 해결책은 간단합니다. 생성자 패턴과 프로토타입 패턴을 혼합하여 사용하면 됩니다.
5. 조합 모드. 샘플 코드는 다음과 같습니다.

function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

조합 모드가 우리의 요구를 모두 충족한다는 것을 찾는 것은 어렵지 않으며, 현재 널리 사용되는 모드이기도 합니다. 객체지향 프로그래밍 경험이 있는 개발자라면 프로토타입 선언을 생성자 외부에 넣는 것이 좀 어색하다고 느낄 수 있는데 생성자 안에 넣어도 될까요? 대답은 '예'입니다. 동적 조합 모드를 사용하세요.
6. 동적 조합 모드. 원칙은 먼저 프로토타입의 특정 속성이나 메소드가 선언되었는지 확인하는 것입니다. 그렇지 않은 경우 전체 프로토타입을 선언하고 다른 작업을 수행하지 않습니다. 샘플 코드는 다음과 같습니다:

function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
}

위 내용은 JavaScript 사용자 정의 속성 및 메서드에 대한 개체 모델 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!