prototype을 대상으로 속성과 방법을 추가합니다

3666 단어 PROTOTYPE
prototype을 통해 정의된 '클래스' 에 속성과 방법을 추가할 수 있습니다.프로토타입의 기초 지식을 알아보겠습니다.prototype은'구조 함수'의 속성이지 실례의 속성이 아니다.
예:
function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
var obj = new HiClass();   
alert(HiClass.prototype);//outputs [object, object]  alert(obj.prototype);//outputs undefined

 
프로토타입 방식으로 하나의 클래스를 계승할 때, 다른 프로토타입 방식으로 추가된 속성과 방법을 덮어쓸 수 있음을 주의해야 한다.만약 HiClass가prototype.prop ='value'는 HiClass에 있습니다.prototype = new HelloClass() 이전에는 HiClass를 실행하는 경우 prop 속성이 없습니다.prototype = new HelloClass() 이후 HiClass의 실례에 prop 속성이 있다는 것은 잘 이해할 수 있을 것이다.그러나 코드에 이런 버그가 조심하지 않도록 주의해야 한다.
예:
function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
  
function HelloClass() {  
    this.sayHello = function(){  
        alert("hello");  
    }     
}  
//HiClass.prototype.prop = 'value';  //this.prop = function(){} , HiClass.prototype = new HelloClass();  
HiClass.prototype.prop = 'value';  
  
var obj = new HiClass();  
obj.sayHello();  
alert(obj.prop);

 
JavaScript에prototype 체인이 있습니다. 대상의 실례를 호출하거나 속성을 가져올 때, 실례에 대응하는 클래스가 대응하는 정의가 있는지 확인하고, 없으면 prototype 체인을 따라 계속 찾습니다. 찾지 못하면undefined입니다.하면, 만약, 만약...
 , 。Object.prototype.foo = function(){} ,javascript Object 

예:
.sayHi = "hi Object2".sayHi = "hi Object3".sayHello = "hello Object3"=  obj = 
    obj.sayHello();  = (){  
        alert("f00 Object"
    Object2.foo(); 
    Object3.foo(); 
    a.foo();

 
만약에 실례에 추가된 속성과 방법이prototype의 속성과 방법의 이름을 바꾸면 실례와prototype에 비해 모두 이 속성과 방법이 있다. 단지prototype체인의 접근 순서 때문에 실례에 먼저 접근하는 속성과 방법일 뿐이다.아래의 예와 같이 이 점을 설명하였다
function Test(){};  
  
Test.prototype.prop1 = 'prop value';  
  
var obj = new Test();  //obj ;obj.prototype = 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   prototype , , alert(obj.hasOwnProperty("prop1"));//outputs false  alert("prop1" in obj);//outputs true  delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined

 
몇 가지 구조 함수와prototype의 사용을 살펴보자.
var myObj = {  
    prop1:'value1',  
    prop2:'value2'  }  
  
Object.prototype.foo = function(){  
    alert("f00 Object");  
};  
  
//   //var myObj = new Object();  //myObj.prop1 = 'value1';  //myObj.prop2 = 'value2';    alert(myObj.prop2);  //value2myObj.foo();    // f00 Object

 
또한 다음과 같은 방식으로prototype에 값을 부여할 수 있으며 한 번에 여러 개의 속성과 방법을 추가할 수 있다
function TestCls(){  
      
}  
TestCls.prototype = {  // 
    prop1:'value1',  
    prop2:'value2'  };  
myObj = new TestCls();  
alert(myObj.prop2);  //value2

 
위의 방법 중 하나는 프로토타입을 바꾸면 constructor도 바뀐다는 것이다.그래서 프로토타입을constructor 이전의 값, 예를 들어 첫 번째 예에 HiClass를 붙여야 한다.prototype.constructor=HiClass;constructor 속성은 이 대상을 만드는 그룹 함수에 대한 인용을 되돌려줍니다
// prototype ,constructor 。  // prototype.constructor ,  HiClass.prototype.constructor=HiClass  function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
  
function HelloClass() {  
    this.sayHello = function(){  
        alert("hello");  
    }     
}  
  
HiClass.prototype = new HelloClass();  
HiClass.prototype.constructor=HiClass  //constructor  。

좋은 웹페이지 즐겨찾기