JavaScript에서 개체 생성에 대한 스키마 요약

저자：Eve Cole 업데이트 시간：2025-08-03 05:00:03

** javaScript가 객체 패턴을 만듭니다.

물체 문자 그대로

공장 모델

생성자 모드

프로토 타입 모드

생성자와 프로토 타입 패턴 결합

프로토 타입 동적 모드

대부분의 객체 지향 언어에는 클래스 개념이 있으며 동일한 방법과 속성을 가진 여러 객체를 만들 수 있습니다. 기술적으로 JavaScript는 객체 지향 언어이지만 JavaScript에는 클래스 개념이 없지만 모든 것이 객체입니다. 모든 객체는 특정 참조 유형의 인스턴스이며 기존 참조 유형을 통해 생성됩니다. 참조 유형은 기본이거나 사용자 정의 될 수 있습니다.

1. 물체 문자 그대로

 var person = {이름 : '니콜라스'; 나이 : '22'; 작업 : "소프트웨어 엔지니어"SAYSNAME : function () {Alter (this.name); }}

예에서는 사람이 지명 된 사람이 생성되고 세 가지 속성 (이름, 연령, 직업)과 메소드 (sayname ())이 추가됩니다. SayName () 메소드는 this.Name의 값을 표시하는 데 사용됩니다 (Person.Name으로 해결).

객체 리터럴은 단일 객체를 만드는 데 사용될 수 있지만이 방법은 명백한 단점이 있습니다. 동일한 인터페이스를 사용하여 많은 객체를 만들면 많은 중복 코드가 생성됩니다.

2. 공장 모델

공장 패턴은 소프트웨어 엔지니어링 분야에서 잘 알려진 설계 패턴입니다. 공장 패턴은 특정 객체를 생성하고 기능을 사용하여 특정 인터페이스를 사용하여 개체 생성의 세부 사항을 캡슐화하는 프로세스를 추상화합니다.

 함수 CreatePerson (이름, 나이, 직업) {var o = new Object {}; o.name = 이름; O.age = 연령; o.job = 직업; o.sayname = function () {alert (this.name); }; return o;} var person1 = Creatperson ( "Nicholas", 22, "Software Engineer"); var person2 = Creatperson ( "Greg", 24, "Student");

Creatperson {} 함수는 허용 된 매개 변수를 기반으로 필요한 모든 정보를 포함하는 사람 객체를 빌드 할 수 있습니다. 이 함수는 셀 수없이 많은 시간이라고 할 수 있으며 매번 3 개의 속성과 하나의 방법이 포함 된 객체를 반환합니다.

공장 모델은 여러 유사한 객체를 만드는 문제를 해결하지만 객체 인식 문제 (즉, 객체 유형을 아는 방법)를 해결하지는 않습니다.

3. 생성자 모드

 기능인 (이름, 나이, 직업) {this.name = 이름; this.age = age; this.job = job; this.sayname = function () {alert (this.name); }} // 새로운 운영자 var person1 = new Person ( "Nicholas", 22, "Software Engineer"); var person2 = new Person ( "Greg", 24, "Student"); person1.sayname (); //nicholasperson2.sayname (); // 그렉

공장 모델과의 차이점은 다음과 같습니다

객체가 표시되지 않습니다

이 객체에 직접 속성과 메소드를 할당하십시오

반환 명세서가 없습니다

새 인스턴스를 만들려면 새 연산자를 사용해야합니다. 생성자를 호출하는 4 단계 :

새 개체를 만듭니다

생성자의 범위를 새 개체에 할당합니다 (이 새 개체를 가리 킵니다).

생성자에서 코드를 실행하십시오

새 개체를 반환하십시오

이 예제에서 생성 된 모든 객체는 객체 및 사람 인스턴스의 인스턴스입니다. 운영자 인스턴스에 의해 확인할 수 있습니다.

 Alert (person1 instanceof object); // true

생성자 패턴에는 고유 한 문제가 있습니다. 실제로, SayName 메소드는 각 인스턴스에서 한 번 다시 재현됩니다. 인스턴스화에 의해 생성 된 방법은 동일하지 않다는 점에 유의해야합니다. 다음 코드는이를 증명할 수 있습니다

 Alert (person1.sayname == person2.sayname); // false

이 문제는 생성자 외부의 방법을 글로벌 함수로 이동시킴으로써 해결할 수 있습니다.

 기능인 (이름, 나이, 직업) {this.name = 이름; this.age = age; this.job = job; } function sayname () {alert (this.name); }

세계 세계에서 만든 글로벌 기능은 실제로 사람이 만든 사례에 의해 실제로 불릴 수 있으며, 이는 약간 비현실적입니다. 객체가 매우 올바른 방법을 정의 해야하는 경우 많은 글로벌 기능을 정의해야하며 캡슐화가 부족합니다.

4. 프로토 타입 모드

JavaScript에서 생성 된 각 함수는 프로토 타입 속성을 가지고 있는데,이 속성은 특정 유형의 모든 인스턴스에서 공유 할 수있는 속성 및 메소드를 포함하는 객체에 대한 포인터입니다 (모든 개체 인스턴스는 속성 및 메소드를 공유하도록합니다).

 기능인 () {} person.prototype.name = "Nicholas"; person.prototype.age = 22; person.prototype.job = "소프트웨어 엔지니어"; person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); person1.sayname (); //nicholasalert(person1.sayname == person2.sayname); // true

위의 코드는 다음과 같습니다.

생성자 사람을 정의하십시오. 개인 기능은 자동으로 프로토 타입 속성을 얻습니다. 이 속성에는 기본적으로 사람을 가리키는 생성자 속성 만 포함합니다.

person.prototype를 통해 세 가지 속성과 하나의 방법을 추가하십시오

인스턴스를 생성 한 다음 인스턴스에서 SayName () 메소드를 호출하십시오.

개인 생성자 및 person.prototype 사용을 사용하여 인스턴스를 예로 들어 객체 간의 관계를 표시합니다.

그림은 사람 생성자, 사람의 프로토 타입 특성 및 두 사람의 인스턴스 간의 관계를 보여줍니다. person.prototype 프로토 타입 객체, person.prototype.constructor는 사람에게 포인트를 가리 킵니다. 생성자 속성을 포함하는 것 외에도 프로토 타입 객체에는 나중에 추가 된 다른 특성 및 방법이 포함되어 있습니다. 두 사람의 두 사례 인 Person1과 Person2에는 내부 속성이 포함되어 있으며,이 속성은 person.prototype 만 가리 킵니다.

SayName () 메소드의 호출 프로세스 :

Person1 인스턴스에서 logname () 메소드를 찾고 있는데, 그러한 방법이 없다는 것을 알았으므로 Person1의 프로토 타입으로 거슬러 올라갑니다.

Person1의 프로토 타입에서 Sayame () 메소드를 찾으십시오. 이 메소드가 있으므로 메소드가 호출됩니다

이러한 검색 프로세스를 기반으로, 인스턴스의 프로토 타입에서 동일한 이름 속성을 정의하여 인스턴스가 프로토 타입에서 동일한 이름 속성에 액세스하지 못하게 할 수 있습니다. 그렇게하면 프로토 타입에서 동일한 이름 속성을 삭제하지는 않지만 인스턴스가 액세스하는 것을 방지합니다.

 기능인 () {} person.prototype.name = "Nicholas"; person.prototype.age = 22; person.prototype.job = "소프트웨어 엔지니어"; person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); var person2 = 새로운 사람 (); person1.name = "Greg"Alert (person1.name) // Greg는 인스턴스 Alert (person2.name)에서 나옵니다. // Nicholas는 프로토 타입에서 나옵니다.

삭제 연산자를 사용하여 인스턴스 속성을 완전히 삭제하십시오

 Person1.name; Alert (person1.name) // 프로토 타입에서 니콜라스를 삭제하십시오

HasownProperty () 메소드를 사용하여 인스턴스 또는 프로토 타입에 속성이 있는지 여부를 감지하십시오.

 기능인 () {} person.prototype.name = "Nicholas"; person.prototype.age = 22; person.prototype.job = "소프트웨어 엔지니어"; person.prototype.sayname () {alert (this.name); }; var person1 = new Person (); var person2 = 새로운 사람 (); ALERT (person1, hasOwnProperty ( "name")); // false person1.name = "greg"alert (person1.name) // instance alert (person1, hasownproperty ( "name")); // truealert (person2.name) // hasownproperty ( "name, hasownet (")); Person1.name; Alert (person1.name) // 프로토 타입 알림 (person1, hasownproperty ( "name")); // false의 니콜라스

다음 그림은 다양한 상황에서 인스턴스와 프로토 타입의 관계를 보여줍니다.

간단한 프로토 타입 구문

 function person () {} person.prototype = {name : "nicholas", 나이 : 22, 직업 : "소프트웨어 엔지니어", sayname : function () {alert (this.name); }};

위의 코드에서 생성자 속성은 더 이상 사람을 가리키지 않으며 생성자를 통해 객체 유형을 결정할 수 없습니다. 아래와 같이 적절한 값으로 다시 설정할 수 있습니다.

 function person () {} person.prototype = {생성자 : 사람, 이름 : "nicholas", 나이 : 22, 직업 : "소프트웨어 엔지니어", sayname : function () {alert (this.name); }};

생성자 특성을 재설정하면 [[열거 가능한]] 속성이 True로 설정됩니다. 기본적으로 기본 생성자 속성을 열거 할 수 없습니다. Object.DefineProperty () 메소드를 사용하여 변경할 수 있습니다.

 Object.DefineProperty (person.prototype, "생성자", {열거 가능한 : false, value : person});

프로토 타입에서 값을 찾는 프로세스는 검색이며, 프로토 타입 객체에 의한 수정은 인스턴스에서 즉시 반영 될 수 있습니다.

 var friend = new person (); person.prototype.sayhi = function () {alert ( "hi);} friend, sayhi (); //"hi "(문제 없음)

개인 인스턴스는 새 메소드를 추가하기 전에 생성되지만 인스턴스와 프로토 타입의 느슨한 연결로 인해 새로 추가 된 메소드에 액세스 할 수 있습니다.

프로토 타입 객체를 다시 작성한 후 상황

 기능인 () {} var friend = new Person (); person.prototype = {name : "nicholas", 나이 : 22, 직업 : "소프트웨어 엔지니어", sayname : function () {alert (this.name); }}; friend.sayName (); // 오류

Friend.SayName ()을 호출 할 때 오류의 이유는 Friend가 가리키는 프로토 타입에 아래 그림과 같이이 필드의 이름을 따서 명명 된 속성을 포함하지 않기 때문입니다.

프로토 타입 객체 문제

프로토 타입 객체는 생성자의 초기화 매개 변수를 전달하는 프로세스를 생략하고 모든 힘은 기본적으로 동일한 속성 값을 얻습니다. 프로토 타입 모델의 가장 큰 문제는 공유 특성을 가지고 있다는 것입니다. 프로토 타입 모델에 기준 유형의 속성이 포함되어 있으면 문제가 더 심각합니다. 다음 예를 살펴 보겠습니다.

 function person () {} person.prototype = {생성자 : 사람, 이름 : "nicholas", 나이 : 22, 직업 : "소프트웨어 엔지니어", 친구 : [ "shelby", "court"], sayname : function () {alert (this.name); }}; var person1 = new Person (); var person2 = 새로운 사람 (); person1.friend.push ( "van"); ALERT (person1.friends); // "Shelby, Court, Van"Alert (person2.Friends); // "Shelby, Court, van"Alert (person1.friends == person2.friends); // true

5. 생성자 모드와 프로토 타입 모드 결합

생성자 모드와 프로토 타입 모드의 조합에서 생성자는 인스턴스 특성을 정의하는 데 사용되며 프로토 타입 모델은 방법과 공유 속성을 정의하는 데 사용됩니다. 이러한 방식으로 각 인스턴스에는 자체 인스턴스 속성 사본이 있으며 메소드에 대한 참조를 공유하여 메모리를 최대까지 저장할 수도 있습니다.

 기능인 (이름, 나이, 직업) {this.name = 이름; this.age = age; this.job = job; this.friends = [ "shelby", "court"];} person.prototype = {생성자 : person, sayname : function () {alert (this.name); }} var person1 = new Person ( "Nicholas", 22, "Software Engineer"); var person2 = new Person ( "Greg", 24, "Student"); person1.friend.push ( "van"); ALERT (person1.friends); // "Shelby, Court, van"Alert (person2.Friends); // "Shelby, Court"Alert (person1.friends == person2.friends); // false alert (person1.sayname == person2.sayname); // true

6. 동적 프로토 타입 모드

프로토 타입 동적 모드는 필요한 모든 정보를 생성자에 캡슐화하고 IF 문을 사용하여 프로토 타입의 특정 속성이 존재하는지 여부를 결정합니다. 존재하지 않는 경우 (생성자가 처음으로 요구 될 때) IF 문 내에서 프로토 타입 초기화 코드를 실행하십시오.

 기능인 (이름, 나이) {this.name = 이름; this.age = age; this.job = job; // method if (type this.sayname! = 'function') {person.prototype.sayname = function () {alert (this.name); }; }} var friend = new Person ( 'Nicholas', '22', 'Software Engineer'); // 생성자가 처음으로 요청 되었고이 시점에서 프로토 타입이 수정되었습니다.

권장 독서 :

JS 객체 지향 (공장 모드, 생성자 모드, 프로토 타입 모드)에서 개체를 생성하는 몇 가지 일반적인 방법

위는 편집자가 소개 한 JavaScript에서 객체를 만드는 패턴입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!