JavaScript의 프로토타입 패턴에 대한 간략한 설명

팩토리 패턴, 생성자 패턴, 프로토타입 패턴 등 JavaScript로 객체를 생성하는 방법은 다양합니다.

//공장 모드<br>function createPerson(name,age,job)<br>{<br> var o = new Object;<br> o.name = name;<br> o.age = age ;<br> o.job = job;<br> o.sayName = function()<br> {<br> Alert(this.name);<br> }<br> return o;<br>}<br>var person = createPerson('dw',20,'IT');<br><p><br></p><p><br></p><p><br></p> <p> 해당 프로토타입 패턴: </p><p></p><p>function Person()<br>{<br><br>}<br>Person.prototype = <br>{<br> 이름 :"dw",<br> 나이:20,<br> 직업:"IT",<br> sayName:function()<br> {<br> Alert(this.name);<br> }<br> };<br>var person2 = new Person;<br><br> Javascript에서 각 함수에는 프로토타입 속성이 있습니다. 이는 프로토타입 객체에 대한 포인터이며 모든 인스턴스가 공유하는 속성의 합계를 만드는 데 사용할 수 있습니다. 방법. 프로토타입 모드에서 person3</p><p><br></p><p></p><p>var person3 = new Person;<br>person2.name> //dw<br> person3;을 생성합니다. name; //dw<br><br>person2와 person3의 name 속성은 모두 dw를 반환합니다. 프로토타입 객체의 속성과 메서드는 특정 유형의 모든 인스턴스에서 공유됩니다. 기본적으로 각 프로토타입 객체는 프로토타입 속성이 있는 함수에 대한 포인터를 가리키는 데 사용되는 생성자 속성을 자동으로 얻습니다. 예를 들어 Person.prototype.constructor는 Person</p><p><br>을 가리킵니다. </p><p> </p><p>alert(Person.prototype.constructor); //Person의 생성자를 반환합니다<br>//Person.prototype.constructor는 Person에 대한 포인터일 뿐이며 Person과 동일하지 않습니다. <br>//둘 다 false를 반환<br>alert(Person.prototype.constructor === Person)<br>alert(Person.prototype.constructor == Person)<br><br>인스턴스 간의 삼각관계 , 프로토타입 객체 및 생성자는 그림과 같이 다음과 같습니다: </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/628/727/400/1480037228955873.png" class="lazy" title="1480037228955873.png" alt="JavaScript의 프로토타입 패턴에 대한 간략한 설명"></p><p> 각 인스턴스 내부에는 [[prototype]이라는 프로토타입 객체를 가리키는 포인터가 있습니다. ] ECMA-262 제5판. 프로토타입 모드에서 생성된 인스턴스는 생성자와 직접적인 관계가 없습니다. </p><p><br></p><p> [[prototype]]에 액세스할 수는 없지만 isPrototypeOf() 메서드를 사용하여 객체가 프로토타입 객체인지 확인할 수 있습니다. </p><p></p><p>alert(Person.prototype.isPrototypeOf(person2)); //true<br>alert(Person.prototype.isPrototypeOf(person3));//true<br><br>인스턴스 내부에 Person.prototype에 대한 포인터가 있기 때문에 모두 true를 반환합니다. ECMAScript 5에서는 Object.getPrototypeOf()를 사용하여 [[prototype]]을 반환할 수 있습니다. 즉, 프로토타입 객체 </p><p><br></p><p></p><p>alert( Object.getPrototypeOf( person2) == Person.prototype); //true<br>alert(Object.getPrototypeOf(person2).name); //dw<br><br> 참고: 인스턴스를 사용하여 즉, 인스턴스에 프로토타입과 동일한 이름의 속성을 추가하면 프로토타입에 있는 동일한 이름의 속성이 차단됩니다. </p><p><br></p><p></p><p>person2.name="qs";<br>alert(person2.name);//qs<br><br> name 속성이 null로 설정된 경우에도 프로토타입의 이름에 액세스할 수 없습니다. 삭제를 사용하여 인스턴스의 이름 속성을 삭제한 다음 프로토타입의 이름을 다시 방문할 수 있습니다.</p><p><br></p><p></p><p></p><pre name="code" class=" html">person2.name = null;<br>alert(person2.name); //null<br>delete person2.name;alert(person2.name) //dw<br> <br> <p><br></p><p><br> 이름이 같은 속성의 경우 hasOwnProperty("propertyName") 메서드를 사용하여 해당 속성이 인스턴스에 속하는지 또는 인스턴스에 속하는지 감지할 수 있습니다. 이 메서드는 해당 속성이 인스턴스에 존재하는 경우에만 반환됩니다. </p><p><br></p>