프로토타입이란 무엇입니까? 프로토타입(Prototype)은 JS의 기본 학습에서 언급하지 않은 개념을 주로 포함하는 일반적인 용어이다. 프로토타입 객체(prototype) , 객체 프로토타입(__proto__) , 프로토타입 체인 잠깐, 이러한 개념은 통계에 따르면 인터뷰에서도 흔히 묻는 질문입니다. 이 기사는 프로토타입 관련 지식을 이해하고 숙달하여 더 이상 혼동하지 않도록 도와줄 것입니다.
우리는 Java, C++ 등 많은 객체지향 언어를 연구했지만 JavaScript는 예외입니다. ES6 이전에는 클래스라는 개념이 없었습니다. 그러면 이전에는 객체를 어떻게 생성했습니까? ES6 이전에는 생성자를 사용하여 인스턴스화된 객체를 생성한 것으로 나타났습니다. 생성자는 객체의 공개 특성을 포함하는 특수 함수이므로 new 와 함께 사용하는 것이 좋습니다.
<script>
function Animal(name,age){ //생성자 이름의 첫 글자는 대문자로 표시됩니다. this.name=name;
this.나이=나이;
this.eat=함수(){
console.log('식사 중입니다');
}
}
var dog=new Animal('Wangcai',3) //객체 생성을 위해 new와 함께 사용됨 console.log(dog.name);
console.log(dog.age);
개.먹다()
</script>
.
function 동물(이름,나이){
this.name=이름;
this.나이=나이;
}
var dog=new Animal('왕차이',3)
console.log(개.이름);
console.log(동물이름);
</script>
<script>를 통해서가 아니라 생성자 이름을 통해서만 액세스할 수 있습니다.
function 동물(이름,나이){
this.name=이름;
this.나이=나이;
}
var dog=new Animal('왕차이',3)
Animal.color='검은색'
console.log(Animal.color);
console.log(dog.color);
</script>
객체가 무엇인지 설명하기 전에 먼저 인스턴스화된 객체를 여러 개 생성하고 두 가지 메소드를 출력하는 경우를 먼저 설명하겠습니다. 비교 결과 false가 출력된 것으로 나타났습니다. 즉, 두 가지의 복합 데이터 유형의 주소가 다른 이유는 무엇입니까?
<스크립트>
function 동물(이름,나이){
this.name=이름;
this.나이=나이;
this.eat=함수(){
console.log('식사 중입니다');
}
}
var dog=new Animal('왕차이',3)
var cat=new Animal('미미',3)
var pig=new Animal('humhem',3)
var fish=new Animal('Gulu',3)
var sheep=new Animal('咩咩',3)
console.log(dog.eat==cat.eat);
</script>
인스턴스화된 객체를 생성할 때 새 프로세스는 먼저 새 객체를 생성하지만 복잡한 데이터 유형은 저장할 공간(객체, 메소드)을 열어 생성자 블록 메모리에서 동일한 메소드에 대한 셀 수 없이 많은 공간을 열어줍니다. 극심한 메모리 낭비를 초래함
생성자 프로토타입은 생성자 내의 속성입니다. 해당 속성은 객체를 가리키는 포인터입니다. 이 객체에 저장된 메소드는 생성자를 통해 인스턴스를 생성하는 데 사용됩니다. 객체를 변환할 때 공개적으로 사용되며 여러 개의 동일한 복합 데이터 유형에 대해 여러 개의 중복 메모리 공간을 열 필요가 없습니다. 위에서 언급한 메모리 낭비 문제를 해결하기 위해 직접 프로토타입 객체라고 부를 수도 있습니다.
해결책: 프로토타입 객체를 사용하여 공용 메소드를 저장하고, 인스턴스화된 객체가 메소드를 호출하도록 하고, 두 주소가 동일한
<script>인지 비교합니다.
function 동물(이름,나이){
this.name=이름;
this.나이=나이;
}
Animal.prototype.eat=function(){
console.log('식사 중입니다');
}
var dog=new Animal('왕차이',3)
var cat=new Animal('미미',3)
개.먹다()
고양이.먹다()
console.log(dog.eat==cat.eat);
</script> 우리는 이 메소드가 성공적으로 호출되었을 뿐만 아니라 두 호출 메소드의 주소가 동일하다는 것을 발견했습니다. 이는 해당 공개 복합 데이터 유형이 메모리 공간만 열어서 작성된 공개 메소드의 수를 줄인다는 것을 증명했습니다. 이전 생성자 함수 내부의 리소스 낭비 문제.
객체 프로토타입 __proto__의 기능은 다음 질문을 알아내도록 하는 것입니다. 왜 객체를 인스턴스화할 때 생성자의 프로토타입 속성에 추가된 메서드를 사용할 수 있습니까? 이는 모든 객체에 __proto__ 속성이 있기 때문입니다(앞과 뒤에 두 개의 밑줄이 있음). 이 속성은 해당 생성자의 프로토타입 객체 프로토타입을 가리키는 포인터이기도 하며, 인스턴스화된 객체에서 메서드를 호출할 수 있는 이유를 설명합니다. 프로토타입 객체.
객체 프로토타입 __protp__의 기능은 프로토타입 객체의 내용을 검색하기 위한 방향만 제공한다는 점에 유의해야 합니다. 이를 사용할 필요는 없으며 단지 기억하면 됩니다. 프로토타입 객체 프로토타입은
와 생성자 함수의 프로토타입 객체 프로토타입은 다음과 같습니다. 생성자 속성이므로 생성자라고 합니다. 이 속성은 해당 생성자 자체를 가리키기 때문에 생성자라고 합니다. 주로 인스턴스화된 객체가 참조하는 생성자를 기록하고 두 생성자 속성을 인쇄하는 데 사용
됩니다
function 동물(이름,나이){
this.name=이름;
this.나이=나이;
}
Animal.prototype.eat=function(){
console.log('식사 중입니다');
}
var dog=new Animal('왕차이',4)
console.log(dog.__proto__.constructor);
console.log(Animal.prototype.constructor);
</script>
우리는 인쇄된 결과가 실제로 생성자 자체임을 발견했습니다.