JavaScript 사용자 정의 유형_javascript 기술

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

코드 복사 코드는 다음과 같습니다.

var person = new Object();
person.name = "Sam";
person.age = 16;
person.speak = function(){
alert(this.name은 "입니다. age "years old") ;
}
person.speak();

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

코드 복사 코드는 다음과 같습니다.

function createPerson(name, age){
var person = new Object()
person.name = name; 🎜 >person.age = age;
person.speak = function(){
alert(this.name "is " this.age "세")
}
반환 사람
}
var person1 = createPerson("Sam", 16);
var person2 = createPerson("Jack", 18);

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

코드 복사 코드는 다음과 같습니다.

function 사람(이름, 나이){
this.name = 이름;
this.age = 나이
this.speak = function(){
alert(this.name "은"입니다. .age "세" );
}
}
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(이름, 나이){

this.name = 이름;
this.age = age;
this.speak = speaking;
}
function talk(){
alert(this.name "is " this.age "세");
}
var person1 = new Person("샘", 16);
var person2 = new Person("Jack", 18)
alert(person1.speak == person2.speak) ; // 참


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

코드 복사 코드는 다음과 같습니다.

function Person(){ }
Person.prototype.name="Sam";
Person.prototype.age=16;
Person.prototype.speak = function(){
alert( this.name "이 .age는 "세");
}
var person1 = new Person()
person1.speak()
var person2 = new Person();
alert(person1.speak == person2.speak); // true

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

코드 복사 코드는 다음과 같습니다.

function 사람(이름, 나이){
this.name = 이름;
this.age = 나이
}
Person.prototype.speak = function(){
alert(this .name "이 .age "세");
}
var person1 = new Person()
person1.speak()
var person2
alert(person1.speak == person2.speak); // true

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

코드 복사 코드는 다음과 같습니다.

function 사람(이름, 나이){
this.name = 이름;
this.age = 나이
if (Person.prototype.speak == "undefine"){
Person.prototype .speak = function() {
alert(this.name "is " this.age "세");
}
}
}