JS에서 __proto__와 프로토타입의 차이점

JS에서 __proto__와 프로토타입은 프로토타입과 관련된 두 가지 속성으로, 약간 다른 기능을 가지고 있습니다. 이 기사에서는 둘 사이의 차이점을 자세히 소개하고 비교하고 해당 코드 예제를 제공합니다.

먼저 그 의미와 사용법을 이해해 봅시다.

proto

__proto__는 객체의 프로토타입을 가리키는 데 사용되는 객체의 내장 속성입니다. 사용자 정의 객체, 내장 객체, 함수 객체를 포함한 모든 객체에는 __proto__ 속성이 있습니다. __proto__ 속성을 통해 객체의 프로토타입 체인에 접근하고 조작할 수 있습니다.

예를 살펴보겠습니다.

let obj = {};
console.log(obj.__proto__); // 输出：Object {}

let arr = [];
console.log(arr.__proto__); // 输出：Array []

function func() {}
console.log(func.__proto__); // 输出：[Function]

위 코드에서는 빈 개체 obj를 만들고 해당 개체의 __proto__ 속성에 액세스했습니다. 보시다시피, obj.__proto__는 Object{} 객체를 가리킵니다. 마찬가지로 빈 배열 arr을 만들고 해당 __proto__ 속성에 액세스한 결과 arr.__proto__가 Array[] 개체를 가리킵니다. 함수 객체 func의 경우 해당 __proto__는 [Function] 객체를 가리킵니다.

요약하자면, __proto__ 속성은 객체의 프로토타입을 가리키는 데 사용되며, 이를 통해 프로토타입 체인에 액세스하고 작동할 수 있습니다.

prototype

prototype은 프로토타입 객체를 가리키는 함수 객체의 고유한 속성입니다. 모든 함수 객체에는 프로토타입 속성이 있지만 함수가 생성자로 사용되는 경우에만 의미가 있습니다.

예를 살펴보겠습니다.

function Person() {}

console.log(Person.prototype); // 输出：Person {}

위 코드에서는 Person 함수 객체를 정의하고 해당 프로토타입 속성에 액세스합니다. 보시다시피 Person.prototype은 Person{} 객체를 가리킵니다.

prototype 속성의 주요 역할은 생성자 모드에서 인스턴스 객체의 프로토타입 체인을 구축하는 것입니다. 객체를 생성하기 위해 생성자를 사용할 때 해당 객체의 __proto__ 속성은 생성자의 프로토타입 속성을 가리킵니다.

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出：true

위 코드에서는 Person 생성자를 사용하여 person 객체를 생성했습니다. person.__proto__는 Person.prototype을 가리키는 것으로 밝혀졌습니다.

차이점과 연결

__proto__과 프로토타입은 모두 객체의 프로토타입과 관련되어 있습니다. 둘 사이의 연결과 차이점은 다음과 같습니다.

1. __proto__는 인스턴스 객체의 속성으로, 프로토타입의 프로토타입을 가리키는 데 사용됩니다. 객체, 프로토타입은 생성자의 프로토타입 객체를 가리키는 데 사용되는 함수의 속성입니다.
2. __proto__는 객체의 프로토타입 체인을 읽고 액세스하는 속성이며 인스턴스 객체에서 직접 액세스할 수 있습니다. 프로토타입은 생성자의 속성이며 생성자 내부에서만 액세스할 수 있습니다.
3. __proto__는 Object.setPrototypeOf() 또는 직접 할당을 통해 수정할 수 있지만 프로토타입은 생성자 내의 함수 name.prototype을 통해서만 수정할 수 있습니다.
4. __proto__는 비표준 속성이며 일부 브라우저에서만 지원됩니다. 프로토타입은 표준 속성이며 모든 개체와 함수에 이 속성이 있습니다.

다음 코드 예제는 둘 사이의 차이점과 연결을 더 자세히 설명하는 데 사용됩니다.

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出：Animal is eating
dog1.bark(); // 输出：Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出：true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出：true

위 코드에서는 Animal 생성자와 Dog 생성자를 정의하여 상속 관계를 만듭니다. __proto__ 및 프로토타입 속성을 통해 객체의 프로토타입 체인에 접근하고 이들 사이의 연결을 증명할 수 있습니다.

결론적으로 __proto__와 프로토타입은 모두 JS의 프로토타입과 관련이 있지만 기능과 용도가 다릅니다. 차이점을 이해하면 JS의 프로토타입 메커니즘을 더 잘 이해하고 코드를 작성할 때 더 유연하게 활용할 수 있습니다.

위 내용은 JS에서 __proto__와 프로토타입의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!