JS 핵심 시리즈: 프로토타입 객체와 프로토타입 체인에 대한 간략한 논의

Javascript에서는 모든 것이 객체이지만 객체도 다르며 크게 두 가지 범주, 즉 일반 객체(Object)와 함수 객체(Function)로 나눌 수 있습니다.

일반적으로 new Function을 통해 생성된 객체는 함수 객체이고, 그 외의 객체는 일반 객체입니다.

예:

function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function('x','console.log(x)');

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
    typeof o3 //object
);
>> function function function object object object

f1은 함수 선언이며, 함수를 정의하는 가장 일반적인 방법입니다. 실제로 이 익명 함수는 함수 표현식인 f2에 할당됩니다. , f3은 일반적이지 않지만 함수 객체이기도 합니다.

Function은 JS와 함께 제공되는 객체입니다. f1과 f2가 생성되면 JS는 new Function()을 통해 자동으로 이러한 객체를 생성합니다. 따라서 이 세 객체는 모두 new Function()을 통해 생성됩니다.

Javascript에서 객체를 생성하는 방법에는 객체 리터럴과 새로운 표현식을 사용하는 두 가지 방법이 있습니다. o1과 o2의 생성은 이 두 가지 방법에 해당합니다. o3은 f1의 인스턴스 객체이고, o3과 f1은 같은 타입입니다. 적어도 저는 그렇게 생각했지만 그렇지 않습니다...

그럼 어떻게 이해하나요? , o3가 새로운 함수를 통과하는지 확인하세요. 생성된 것은 함수 개체가 아니기 때문에 일반 개체이기 때문에 분명히 그렇지 않습니다.

함수 객체와 일반 객체에 대해 간단히 이해한 후 Javascript의 프로토타입과 프로토타입 체인을 살펴보겠습니다.

JS에서는 함수 객체 f1이 생성될 때마다 프로토타입 및 __proto__를 포함하여 객체에 내장된 일부 속성은 f1의 일부 속성과 메서드를 기록하는 프로토타입 객체입니다.

프로토타입은 f1에 보이지 않는다는 점에 유의해야 합니다. 즉, f1은 프로토타입의 속성과 메서드를 찾지 않습니다.

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

그럼 프로토타입은 무슨 용도인가요? 실제로 프로토타입의 주요 기능은 상속입니다. 일반인의 관점에서 보면 프로토타입에 정의된 속성과 메서드는 자체 "자손"을 위해 예약되어 있습니다. 따라서 하위 클래스는 프로토타입의 속성과 메서드에 완전히 액세스할 수 있습니다.

f1이 프로토타입을 "자손"에게 맡기는 방법을 알려면 JS의 프로토타입 체인을 이해해야 합니다. 이때 JS의 __proto__는 매우 이상하고 숨겨져 있습니다. 깊기 때문에 흔히 볼 수 없지만 일반 객체와 함수 객체 모두에 존재합니다. 그 기능은 JS가 새 표현식을 통해 객체를 생성할 때 일반적으로 의 프로토타입 객체를 저장하는 것입니다. 상위 클래스는 새 객체의 __proto__ 속성에 할당되어 세대 상속을 형성합니다...

function f(){}
f.prototype.foo = "abc";var obj = new f();
console.log(obj.foo); //abc

이제 우리는 __proto__가 obj에 저장된다는 것을 알고 있습니다. 이것이 f의 프로토타입입니다. , 그러면 f의 프로토타입에서 __proto__에는 무엇이 저장되어 있나요? 아래 그림을 보세요:

그림과 같이 f.prototype __proto__에 저장되는 것은 Object입니다. .prototype이며 Object.prototype 객체에도 __proto__가 있습니다. 출력 결과에서 Object.prototype.__proto__는 obj 객체 프로토타입 체인의 끝을 나타내는 null입니다. 아래 그림과 같이

obj 객체에 이러한 프로토타입 체인이 생긴 후 obj.foo가 실행되면 obj는 먼저 이 속성이 있는지 검색하지만, 자신의 프로토타입을 검색하지 않습니다. foo를 찾을 수 없으면 obj는 프로토타입 체인을 따라 검색합니다...

위의 예에서 f의 프로토타입에 foo 속성을 정의한 다음 obj가 이 속성을 검색합니다. 프로토타입 체인에서 발견되어 실행됩니다.

마지막으로 이 기사와 관련된 핵심 사항을 몇 문장으로 요약합니다.

1. 프로토타입 체인의 형성은 실제로 상황에 따라 다릅니다. 프로토타입 대신 on_ _proto__ JS 엔진은 객체의 메소드를 실행할 때 해당 메소드가 객체 자체에 존재하는지 먼저 확인하지만 자체 프로토타입은 검색하지 않습니다.

2. 객체의 __proto__는 자체 프로토타입 체인을 기록하고 자체 데이터 유형을 결정합니다. __proto__를 변경하는 것은 객체의 데이터 유형을 변경하는 것과 같습니다.

3. 함수의 프로토타입은 자체 프로토타입 체인에 속하지 않으며 서브클래스 생성의 핵심이며 서브클래스의 데이터 유형을 결정하며 프로토타입 체인을 연결하는 다리 역할을 합니다. 서브클래스의.

4. 프로토타입 객체에 메서드와 속성을 정의하는 목적은 하위 클래스에서 상속되어 사용되는 것입니다.