JS의 prototype 기초편

function HiClass() {
	this.sayHi = function(){
		alert("hi");
	}
}

var obj = new HiClass(); 
alert(HiClass.prototype);//outputs [object, object]
alert(obj.prototype);//outputs undefined

프로토타입 방식으로 하나의 클래스를 계승할 때 다른 프로토타입 방식에 추가될 수 있는 속성과 방법을 주의해야 합니다.하이클래스라면prototype.prop = 'value';하이클래스에서.prototype = new HelloClass();이전에 HiClass를 실행합니다.prototype = new HelloClass();이후 HiClass의 실례에는 prop 속성이 없습니다. 이것은 이해하기 쉽습니다.그러나 코드에 이런 버그가 조심하지 않도록 주의해야 한다.

function HiClass() {
	this.sayHi = function(){
		alert("hi");
	}
}


function HelloClass() {
	this.sayHello = function(){
		alert("hello");
	}	
}
//HiClass.prototype.prop = 'value';
HiClass.prototype = new HelloClass();
HiClass.prototype.prop = 'value';

var obj = new HiClass();
obj.sayHello();
alert(obj.prop);

자바스크립트에 프로토타입 체인이 있습니다. 대상의 실례에 대한 호출 방법이나 속성을 얻을 때 실례에 대응하는 클래스가 대응하는 정의가 있는지 확인하고, 없으면 프로토타입 체인을 따라 계속 찾습니다. 찾을 수 없으면 undefined입니다.

function Object2() {
this.sayHi = function(){
alert("hi Object2");
}
}

function Object3() {
this.sayHi = function(){
alert("hi Object3");

this.sayHello = function(){
alert("hello Object3");
}
}

Object2.prototype = new Object3();

var obj = new Object2();
obj.sayHi();
obj.sayHello();

Object.prototype.foo = function(){
alert("f00 Object");
};
obj.foo();

obj를 호출합니다.sayHi();때sayHi는 Object2에서 정의되었고 그 자체의 정의를 호출합니다.
obj를 호출합니다.sayHello();때sayHello는 Object2에 정의되지 않았지만prototype이 Object3를 가리키기 때문에 Object3에서 찾아 실행을 찾았습니다.
obj를 호출합니다.foo();때sayHello는 Object2와 Object3에 정의가 없지만 JS의 모든 실례가 Object를 계승하기 때문에 Object의prototype에서foo를 찾아서 실행할 수 있습니다.
만약에 실례에 추가된 속성과 방법이prototype의 속성과 방법과 이름이 바뀌면 실례와prototype에 비해 이 속성과 방법이 있습니다. 단지 프로토타입 체인의 접근 순서 때문에 실례의 속성과 방법에 먼저 접근합니다.hasOwnProperty() 방법을 사용하면 하나의 속성이 실례에 존재하는지 원형에 존재하는지 확인할 수 있습니다. 아래의 예에서 설명한 바와 같습니다.

function Test(){};

Test.prototype.prop1 = 'prop value';

var obj = new Test();

obj.prop1 = 'instance value';

alert(obj.prop1 );//outputs instance value

alert(obj.hasOwnProperty("prop1"));//outputs true

delete obj.prop1;alert(obj.prop1 ); //outputs prop value
alert(obj.hasOwnProperty("prop1"));//outputs false
alert("prop1" in obj);//outputs true

delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined

function TestCls(){
	
}
TestCls.prototype = {
	prop1:'value1',
	prop2:'value2'
};
myObj = new TestCls();
alert(myObj.prop2);

원형과 in 조작부호
두 가지 방식으로 IN 조작부호를 사용합니다. 단독으로 사용하고 for-in 순환에서 사용합니다. 단독으로 사용할 때 in조작부호는 대상을 통해 속성에 접근할 때true를 되돌려줍니다. 이 속성이 원형이든 실례든 상관없습니다.

function  Person()
{
}

Person.prototype.name="jerry";
Person.prototype.age=29;
Person.prototype.sayName=function(){
 alert(this.name)
 }
 
 var person1=new Person();
 var person2=new Person();
 alert(person1.hasOwnProperty("name")) // false
 alert("name" in person1) //true
 
 person1.name="fdsfdsf";
 alert(person1.property("name")) ;// true
 alert("name" in person1); // true

상기 코드를 통해 알 수 있듯이name 속성은 대상에 직접 접근한 것이거나 원형을 통해 접근한 것이 아니라면 IN 접근 대상 속성을 사용하여 항상 TRUE를 되돌려줍니다. 따라서 in 조작부호가 대상을 통해 접근할 수 있는 속성만 되돌려주면true를 되돌려주고 HarOwnProperty를 통해false를 되돌려주면 속성이 원형의 속성임을 확정할 수 있습니다.

function hasPrototypePropetype(object,name) // ， 
{
    return  !object.hasOwnPropetype(name)&&(name in object);
}