Javascript에서 프로토타입과 __proto__의 관계에 대한 자세한 설명

이 글은 Javascript에서 프로토타입과 __proto__의 관계에 대한 관련 정보를 주로 소개합니다. 이 글은 샘플 코드를 통해 아주 자세하게 소개하고 있습니다. 학습이나 작업이 필요한 모든 사람이 따라할 수 있는 학습 가치가 있습니다. 편집자와 함께 배워보세요.

서문

프로토타입을 배울때 머리가 핑핑 돌더라구요/(ㄒoㄒ)/~~ 특히 프로토타입과 __proto__는 너무 멍청해서 검색해봐도 구분이 안가더군요. 여러 번 정보를 전달하고 제가 이해한 내용을 바탕으로 요약하면 다음과 같습니다.

1. 생성자:

생성자: new 키워드를 통해 특정 유형의 객체를 생성하는 데 사용할 수 있는 함수입니다. 예를 들어 Object 및 Array는 런타임 시 실행 환경에 자동으로 나타나며 직접 사용할 수 있는 기본 제공 생성자입니다. 다음과 같이:

var arr = new Array();//使用Array构造函数创建了一个array实例arr
arr[0]="a";
arr[1]="b";
alert(arr);//a,b

var obj=new Object();//使用Object构造函数创建了一个Object实例obj
obj.name="c";
obj.age=12;
alert(obj.name);//c

사용자 정의 생성자를 생성하고 다음과 같이 해당 속성과 메서드를 사용자 정의할 수 있습니다.

//创建构造函数Person
function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)//
 };
}

//使用new关键字，来生成Person实例
var person1=new Person("Tom",22);
var person2=new Person("Jerry",21);
person1.sayName();//Tom
person2.sayName();//Jerry

다음 사항에 유의하세요.

• 생성자 이름은 항상 대문자여야 합니다. 시작 (주로 생성자가 아닌 함수, 즉 일반 함수와 구별하기 위해)

• 생성자는 함수입니다. 생성자를 정의하는 구문은 일반 함수를 정의하는 것과 같습니다. 생성자와 일반 함수의 차이점은 사용 방식에 있습니다. new 연산자를 사용하여 함수를 호출하는 한 생성자로 사용할 수 있습니다. new 연산자를 사용하지 않고 호출하면 일반 함수입니다

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)//
 };
}

//当做构造函数使用
var person=new Person("Tom",22);
person.sayName();//Tom 
//当做普通函数使用
Person("Jerry",30);//添加到window
sayName();//Jerry 等同于window.sayName();

2. 프로토타입 객체:

모든 함수에는 프로토타입 객체에 대한 포인터인 프로토타입 속성이 있습니다. 프로토타입 객체는 함수가 정의되는 동시에 생성됩니다. 프로토타입 객체의 목적은 모든 인스턴스가 공유하는 속성과 메서드를 포함하는 것입니다.

function Person(){
}
//自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){
 alert(this.name);
};
//原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom

새 함수가 생성되는 한 각 함수가 생성됩니다. 그 후 함수의 프로토타입 객체를 가리키는 프로토타입 속성을 얻게 됩니다. (프로토타입 객체는 함수 정의와 동시에 생성됩니다.) . 이 프로토타입 객체에는 "constructor"라는 속성이 있으며, 이는 함수 자체를 가리키며 위의 예에서와 같이 일종의 루프가 가리키는

__proto__를 달성합니다. proto의 왼쪽과 오른쪽에 두 개의 "_"가 있음)

alert(Person.prototype.constructor===Person);//会返回true

새 인스턴스를 생성하기 위해 생성자가 호출되면 인스턴스의 내부에는 인스턴스를 가리키는 포인터 [[Prototype]]이 포함됩니다. 스크립트에서 [[Prototype]]에 액세스하는 표준 방법은 없지만 대부분의 브라우저는 __proto__를 통해 이를 지원합니다.

function Person(){}
alert(Person.prototype.constructor===Person);//true

위의 샘플 코드를 예로 들면 각 객체 간의 관계는 아래와 같습니다.

요약:

① 함수가 생성되는 한 해당 함수의 프로토타입 객체는 동시에 생성되면 프로토타입 객체의 속성과 메서드는 해당 생성자를 통해 생성된 인스턴스에 의해 공유됩니다 ②각 함수는 생성 후 함수의 프로토타입 객체를 가리키는 프로토타입 속성을 얻습니다 3각 객체의 __proto__ 속성은 생성자의 프로토타입을 가리킵니다.

위 내용은 제가 모든 사람을 위해 작성한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue 다중 항목 파일 구성 vue 다중 페이지 구성에 대한 설명 예

Angular 메서드 수준 캐시 주석(데코레이터)

Vue 질문 라우팅 변경 페이지 데이터가 새로 고쳐지지 않는 솔루션

위 내용은 Javascript에서 프로토타입과 __proto__의 관계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!