JavaScript에서 개체 생성에 대한 스키마 요약
** 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 프로토 타입 객체, 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); // true5. 생성자 모드와 프로토 타입 모드 결합
생성자 모드와 프로토 타입 모드의 조합에서 생성자는 인스턴스 특성을 정의하는 데 사용되며 프로토 타입 모델은 방법과 공유 속성을 정의하는 데 사용됩니다. 이러한 방식으로 각 인스턴스에는 자체 인스턴스 속성 사본이 있으며 메소드에 대한 참조를 공유하여 메모리를 최대까지 저장할 수도 있습니다.
기능인 (이름, 나이, 직업) {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); // true6. 동적 프로토 타입 모드
프로토 타입 동적 모드는 필요한 모든 정보를 생성자에 캡슐화하고 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에서 객체를 만드는 패턴입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!