>  기사  >  웹 프론트엔드  >  자바스크립트 디자인 패턴의 객체 팩토리 함수와 생성자에 대한 자세한 설명_기본 지식

자바스크립트 디자인 패턴의 객체 팩토리 함수와 생성자에 대한 자세한 설명_기본 지식

WBOY
WBOY원래의
2016-05-16 15:48:181214검색

다음은 자바스크립트 디자인 패턴의 객체 팩토리 기능과 생성자에 대한 지식을 여러분과 공유하기 위한 자세한 텍스트 설명과 코드 분석입니다.

개요 객체 리터럴을 사용하거나 빈 객체에 새 멤버를 동적으로 추가하는 것은 객체를 생성하는 가장 간단하고 쉬운 방법입니다. 그러나 일반적으로 사용되는 객체 생성 방법 두 가지 외에도 JavaScript는 객체를 생성하는 다른 방법도 제공합니다. 1).팩토리 함수를 사용하여 객체를 생성할 수 있습니다. 이 함수의 기능은 객체를 생성하고 변환하는 것입니다.

개요

객체 리터럴을 사용하거나 빈 객체에 새 멤버를 동적으로 추가하는 것은 객체를 생성하는 가장 간단하고 쉬운 방법입니다.
그러나 일반적으로 사용되는 객체 생성 방법 두 가지 외에도 JavaScript는 객체를 생성하는 다른 방법도 제공합니다.
1) 팩토리 함수를 사용하여 객체를 생성합니다

객체를 생성하는 기능을 가진 함수를 작성할 수 있는데, 이를 "객체 팩토리 메서드"라고 합니다.

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

//팩토리 함수
함수 createPerson(이름, 나이, 직업) {                                  var o = new Object();                             o.name = 이름; o.나이 = 나이; o.job = 직업; o.sayName = 함수 () {                                        console.info(this.name);
};        return o } //팩토리 함수를 사용하여 객체 생성  
var person1 = createPerson('Zhang San', 29, '소프트웨어 엔지니어');
var person2 = createPerson('lee思', 40, '의사');





2) 객체 생성자를 정의합니다


a) 객체 생성자의 첫 글자는 대문자로 표시됩니다
b) 내부적으로 이 키워드를 사용하여 개체에 멤버를 추가합니다. c) new 키워드를 사용하여 객체 생성자

를 호출합니다.


코드 복사

코드는 다음과 같습니다.

//객체 "생성자" 함수 정의  function 사람(이름, 나이, 직업) { this.name = 이름;     this.나이 = 나이; this.job = 직업;     this.sayName = 함수 () {                                          
console.info(this.name); }; 
} //객체 생성자를 호출하여 객체를 생성하려면 new를 사용하세요.
var p1 = new Person('장산', 29, '소프트웨어 엔지니어');
var p2 = new Person('lee思', 40, 'Doctor');



일반적인 방식으로 호출되는 "생성자"

생성자는 실제로 함수입니다. 차이점은 호출할 때 "new" 키워드를 추가해야 한다는 것입니다. 이 키워드를 추가하지 않으면 해당 호출은 일반 함수 호출로 간주됩니다.



코드 복사

코드는 다음과 같습니다.

//일반 함수에 의해 호출되는 생성자로서 이를 통해 추가된 속성,

//window 객체의 속성과 메서드가 됩니다.

console.info(window.name);//장산 console.info(window.age) //29 console.info(window.job); //소프트웨어 엔지니어
객체 생성자는 다음과 같습니다.





코드 복사

코드는 다음과 같습니다.

기능 사람 (이름) {

this.name = 이름;

this.say = 함수() { return "나는 " this.name; }; }
실제로는 이렇습니다(시그널링):





코드 복사

코드는 다음과 같습니다.

기능 사람 (이름) {
// var this = {};
this.name = 이름;
this.say = 함수() {
return "나는 " this.name;
};
// 이것을 반환합니다;
}

시공자의 작업

1. 새 개체 만들기
2. 생성자의 이 항목이 새로 생성된 객체를 참조하도록 합니다
3. 생성자에서 코드를 실행하면 일반적으로 새 객체에 속성을 추가하는 작업이 완료됩니다.
4. 새로 생성된 개체 참조를 외부 세계로 반환합니다.
객체 생성자와 객체 팩토리 방식의 차이점

1. 객체 생성자에 명시적인 객체 생성 코드가 없습니다
2. 이 참조를 통해 새로운 객체가 가져야 할 속성과 메소드가 추가됩니다.
3. 객체 생성자에 return 문이 없습니다
일반적으로 객체 생성자의 첫 글자는 일반 함수와 구별하기 위해 대문자로 설정됩니다.
객체의 생성자 속성

a) 객체 팩토리 함수를 사용하여 객체를 생성하며, 각 객체의 constructor 속성은 Object()

를 참조합니다.

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

var person = createPerson('장산', 29, '소프트웨어 엔지니어');
//팩토리 메소드를 사용하여 객체를 생성합니다.

생성자 속성은 Object() 함수를 참조합니다
console.info(person1.constructor === 객체)

//참

b) 객체 생성자를 사용하여 객체를 생성하고, 각 객체의 생성자 속성은 이 생성자를 참조합니다

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

var p = new Person('장산', 29, '소프트웨어 엔지니어');
//객체 생성자
를 사용하여 객체를 생성합니다. //각 객체의 생성자 속성은 이 생성자를 참조합니다
console.info(p.constructor === 사람);
//True new를 "잊는" 것을 방지하는 방법은 인수.callee를 사용하여 이 문제를 해결할 수 있다는 것입니다.
//args.callee의 역할 이해
함수 TestArgumentsCallee()
{                                                   console.info(this);     
console.info(TestArgumentsCallee의 이 인스턴스); console.info(이 인수.callee 인스턴스)
};   TestArgumentsCallee();
//false                                                                       //거짓 
새로운 TestArgumentsCallee()
//TestArgumentsCallee                                                       //진실 //참




arguments.callee를 직접 사용할 수 있습니다


코드 복사

코드는 다음과 같습니다.


//새로운 것을 잊지 마세요
함수 MyObject(값)
{    
if (!(이 인수.callee 인스턴스))

{                                                   //발신자가 새 항목을 추가하는 것을 잊어버린 경우 새 항목을 추가하고 다시 호출하세요    

새 MyObject(값) 반환;  

}       
this.prop = 값
}  
//테스트
var obj1 = 새로운 MyObject(100)
console.info(obj1.prop);//100
var obj2 = MyObject(200);                
console.info(obj2.prop); //200

위 내용은 자바스크립트 디자인 패턴의 객체 팩토리 함수와 생성자에 대한 자세한 설명입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.