JavaScript 프로토타입 속성에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 프로토타입 속성에 대한 자세한 설명

高洛峰

풀어 주다： 2016-12-09 09:24:56

원래의

1487명이 탐색했습니다.

각 함수에는 객체에 대한 참조인 프로토타입 속성이 있습니다. 이 객체를 프로토타입 객체라고 합니다. 프로토타입 객체에는 함수 인스턴스가 공유하는 메서드와 속성이 포함되어 있습니다. 즉, 함수가 생성자 호출( new 연산자를 사용하여 호출하면 새로 생성된 객체는 프로토타입 객체의 속성과 메서드를 상속받습니다.

개인변수와 함수
프로토타입에 대해 자세히 이야기하기 전에 프로토타입의 디자인 의도를 더 잘 이해할 수 있도록 몇 가지 관련 사항에 대해 이야기해 보겠습니다. 이전에 작성한 JavaScript 네임스페이스 블로그에서는 JavaScript의 함수 범위에 대해 언급했습니다. 함수 내에 정의된 변수와 함수가 외부 세계에 대한 인터페이스를 제공하지 않으면 외부 세계에서 접근할 수 없습니다. 즉, 비공개 변수가 됩니다. 그리고 개인 기능.

function Obj(){
    var a=0; //私有变量
    var fn=function(){ //私有函数
      
    }
   }

로그인 후 복사

이런 식으로 변수 a와 함수 fn은 함수 개체 Obj 외부에서 액세스할 수 없으며 비공개가 되어 Obj 내부에서만 사용할 수 있습니다. , 함수 Obj의 인스턴스가 여전히 이러한 변수 및 함수

var o=new Obj();
   console.log(o.a); //undefined
   console.log(o.fn); //undefined

로그인 후 복사

정적 변수, 함수

<🎜에 액세스할 수 없더라도 > 함수를 정의할 때 "."를 통해 추가된 속성과 함수는 개체 자체를 통해 액세스할 수 있지만 해당 변수와 함수는 각각 Java와 정적 함수라고 합니다. C# 학생들은 정적의 의미를 매우 잘 이해합니다.

function Obj(){
     
   }
    
   Obj.a=0; //静态变量
    
   Obj.fn=function(){ //静态函数
      
   }
    
   console.log(Obj.a); //0
   console.log(typeof Obj.fn); //function
    
   var o=new Obj();
   console.log(o.a); //undefined
   console.log(typeof o.fn); //undefined

로그인 후 복사

인스턴스 변수, 함수

객체 지향 프로그래밍에서는 일부 라이브러리 함수 외에도 객체에서 정의하려면 인스턴스화 후에 액세스할 수 있는 일부 속성과 메서드를 동시에 정의하세요. JavaScript도 이 작업을 수행할 수 있습니다.

function Obj(){
    this.a=[]; //实例变量
    this.fn=function(){ //实例方法
      
    }
   }
    
   console.log(typeof Obj.a); //undefined
   console.log(typeof Obj.fn); //undefined
    
   var o=new Obj();
   console.log(typeof o.a); //object
   console.log(typeof o.fn); //function

로그인 후 복사

위의 목적을 달성할 수 있지만

function Obj(){
    this.a=[]; //实例变量
    this.fn=function(){ //实例方法
      
    }
   }
    
   var o1=new Obj();
   o1.a.push(1);
   o1.fn={};
   console.log(o1.a); //[1]
   console.log(typeof o1.fn); //object
   var o2=new Obj();
   console.log(o2.a); //[]
   console.log(typeof o2.fn); //function

로그인 후 복사

위의 코드 실행 결과는 예상과 완전히 일치하지만 a 및 fn도 문제를 보여줍니다. o1에서 수정되지만 o2에는 변경 사항이 없습니다. 배열과 함수는 모두 객체이자 참조 유형이므로 이는 o1의 속성과 메서드와 o2의 속성과 메서드가 동일한 이름을 가지더라도 객체가 아니라는 의미입니다. 참조이지만 Obj 개체에 의해 정의된 속성 및 메서드의 복사본입니다.

속성에는 문제가 되지 않지만 메소드에는 큰 문제가 됩니다. 왜냐하면 메소드가 완전히 동일한 기능을 수행하지만 함수 객체에 인스턴스가 수천 개 있는 경우 복사본이 두 개 있기 때문입니다. 그러면 각 인스턴스는 수천 개의 메소드 사본을 유지해야 합니다. 이는 분명히 비과학적인 일입니다.

prototype

새 함수가 생성될 때마다 특정 규칙 집합에 따라 함수에 대한 프로토타입 속성이 생성됩니다. 기본적으로 프로토타입 속성은 생성자 얻기( constructor) 속성입니다. 이 속성은 프로토타입 속성이 위치한 함수에 대한 포인터입니다. 코드를 작성하고 위의 그림을 참조하세요.

function Person(){
     
   }

로그인 후 복사

JavaScript 프로토타입 속성에 대한 자세한 설명

위 그림에서 볼 수 있듯이 Person 객체는 자동으로 프로토타입 속성을 획득하고, 프로토타입도 객체입니다. Person 객체를 가리키는 생성자 속성이 자동으로 획득됩니다.

인스턴스를 생성하기 위해 생성자가 호출되면 인스턴스에는 생성자의 프로토타입을 가리키는 내부 포인터(많은 브라우저에서 이 포인터의 이름이 __proto__임)가 포함됩니다. 이 연결은 인스턴스의 프로토타입 사이에 존재합니다. 그리고 인스턴스와 생성자 사이에 있는 생성자입니다.

function Person(name){
    this.name=name;
   }
    
   Person.prototype.printName=function(){
    alert(this.name);
   }
    
   var person1=new Person(&#39;Byron&#39;);
   var person2=new Person(&#39;Frank&#39;);

로그인 후 복사

JavaScript 프로토타입 속성에 대한 자세한 설명

Person 인스턴스 person1은 name 속성을 포함하고 자동으로 __proto__ 속성을 생성합니다. 이 속성은 Person의 속성을 가리킵니다. 프로토타입에 정의된 printName 메서드에 액세스할 수 있습니다. 내부 속성과 메서드는 공유할 수 있습니다.

JavaScript 프로토타입 속성에 대한 자세한 설명

예상대로입니다! 실제로 코드는 객체의 속성을 읽을 때 검색을 수행합니다. 대상은 지정된 이름을 가진 속성입니다. 속성이 인스턴스에서 발견되면 검색이 시작됩니다. 찾을 수 없으면 프로토타입을 검색하고, 여전히 찾을 수 없으면 찾을 때까지 프로토타입의 프로토타입 개체를 계속 반복합니다. . 마찬가지로 프로토타입과 같은 이름의 속성이나 함수가 인스턴스에 정의되면 프로토타입의 속성이나 함수를 덮어쓰게 됩니다.

function Person(name){
    this.name=name;
   }
    
   Person.prototype.share=[];
    
   Person.prototype.printName=function(){
    alert(this.name);
   }
    
   var person1=new Person(&#39;Byron&#39;);
   var person2=new Person(&#39;Frank&#39;);
    
   person1.share.push(1);
   person2.share.push(2);
   console.log(person2.share); //[1,2]

로그인 후 복사

간단한 객체 구성

function Person(name){
    this.name=name;
   }
    
   Person.prototype.share=[];
 
   var person=new Person(&#39;Byron&#39;);
   person.share=0;
    
   console.log(person.share); //0而不是prototype中的[]

로그인 후 복사

물론 프로토타입은 위의 문제를 해결하기 위해 특별히 정의되어 있지는 않지만, 위의 문제 질문입니다. 이 지식을 이해한 후에는 재사용성이 높은 과학적인 객체를 구축할 수 있습니다. 인스턴스 객체의 속성이나 기능을 원한다면 프로토타입에서 이를 정의하세요. 매개변수는 생성자를 통해 전달될 수 있습니다.