JavaScript 프로토타입 및 프로토타입 체인 지식 포인트에 대한 자세한 설명

1. 프로토타입

1. 개념

JavaScript에서 함수는 속성과 메서드를 포함하는 Function 유형의 개체입니다. 프로토타입 (Prototype) 은 Function 유형 객체의 속성입니다.

prototype 속성은 함수 정의 시 포함되며, 초기값은 빈 객체입니다. JavaScript에는 함수에 대해 정의된 프로토타입 유형이 없으므로 프로토타입은 모든 유형이 될 수 있습니다.

프로토타입은 객체의 공유 속성과 메서드를 저장하는 데 사용됩니다 . 프로토타입의 속성과 메서드는 함수 자체의 속성과 메서드에 영향을 주지 않습니다.

// 함수형 속성 -> 모든 함수가 가지고 있는 속성 console.log(Function.prototype) //[Function]

//함수 정의 function fn() {
    console.log('이것은 함수입니다');
}

//프로토타입의 기본값은 빈 객체입니다. console.log(fn.prototype) //fn {}

// 함수에는 생성자가 포함되어 있습니다. --> 모든 참조 유형은 실제로 생성자입니다. console.log(Number.prototype) //[Number: 0]

console.log(Object.prototype);//{}

2. 프로토타입을 가져옵니다.

• 생성자의 prototype 특성을 통해)
• 과 getPrototype 통해

객체의 프로토타입을 가져올 수 있습니다.

• Object 객체(obj) 메소드의

함수 fn() {
    console.log('이것은 함수입니다');
}

//액세스 객체의 속성 구문 구조를 사용합니다. console.log(fn.prototype) //fn {}
console.log(fn['prototype']);//fn {}

//객체 유형은 getPrototypeOf() 메소드를 제공합니다. console.log(Object.getPrototypeOf(fn)) //[Function]

3. 함수 프로토타입의 생성자 속성을 이해합니다.

Object.getOwnPropertyDescriptors() 메서드는 객체의 모든 자체 속성에 대한 설명자를 얻는 데 사용됩니다.

var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //출력 결과는 다음과 같습니다.
//{
// 값: [함수: 객체],
// 쓰기 가능: true,
// 열거 가능: false,
// 구성 가능: true
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. 프로토타입에 속성 및 메서드 설정

다음 두 가지 방법으로 프로토타입의 속성 및 메서드를 설정할 수 있습니다

• . 프로토타입은 별도로 정의됩니다.

Constructor.prototype.Attribute name = attribute value; Constructor.prototype.Method name = function(){};

• 프로토타입에 대한 새 객체를 직접 정의합니다.

프로토타입에 많은 속성을 추가해야 할 때构造函数.prototype.属性名계속해서 작성하는 것은 너무 번거롭기 때문에 prototype 전체를 직접 수정할 수 있습니다

.
    속성 이름: 속성 값,
    메서드 이름: function(){}}

function foo () {}foo.prototype = {
    생성자: foo,
    이름: '잼',
    나이: 18,
    address: 'Beijing'}var fn = new foo()console.log(fn.address) //Beijing

5.isPrototypeOf() 메소드

각 객체에는 객체가 다음과 같은지 여부를 결정하는 데 사용되는 isPrototypeOf() 메소드가 있습니다. 다른 객체의 프로토타입.

샘플 코드는 다음과 같습니다.
// 초기화를 통해 객체 정의 var obj = {
    이름:'잼'
}
//생성자 함수 정의 Hero() {}
// 객체 obj를 생성자 Hero의 프로토타입에 할당 Hero.prototype = obj;
// 생성자를 통해 객체 생성 var Hero = new Hero();

// isPrototypeOf() 메서드는 지정된 객체가 다른 객체의 프로토타입인지 확인합니다. var result = obj.isPrototypeOf(hero);
console.log(result);//true는

obj 객체가 hero 객체의 프로토타입인지 확인합니다.

2. 프로토타입 체인

1. 프로토타입 체인의 이해

다음으로 프로토타입 체인에 대한 이해를 확장하기 위해 코드 조각을 사용합니다.

시나리오 : obj 객체에서 객체를 찾습니다. 주소 속성 js에 의해 수행되는 단계:
    1. get 작업이 트리거됩니다. 2. 현재 개체에서 속성을 검색합니다. 3. 찾을 수 없으면 이때 프로토타입 체인(__proto__) 개체를 검색합니다. 1. 검색이 종료됩니다. 발견되지 않으면 최상위 프로토타입을 찾을 때까지 프로토타입 체인을 따라 계속 검색합니다. (최상위 프로토타입이 무엇인지는 일시적으로 불분명합니다.)

1.1 샘플 코드는 다음과 같습니다.

var obj = {
    이름: '잼',
    나이: 19
}
/* 
    요구사항: obj 객체에서 주소 속성을 찾으세요*/

// 프로토타입 체인은 레이어별로 검색됩니다. 발견되지 않으면 최상위 프로토타입을 찾을 때까지 검색됩니다. obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    주소 : '베이징'
}

console.log(obj.address) // 베이징 console.log(obj.__proto__.__proto__.__proto__) // { 주소: 'Beijing' }

1.2 메모리 맵

마지막으로 주소 속성을 찾으십시오.
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

최상위 프로토타입은 무엇인가요?

위에서 언급했듯이 프로토타입 체인을 따라 끝없이 검색하지 않을 것입니다. 최상위 프로토타입을 찾았을 때 아직 찾지 못했다면 undefined 반환됩니다.

그렇다면 최상위 프로토타입은 무엇인가?
샘플 코드는 다음과 같습니다.

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

null 리터럴 객체 obj의 프로토타입은 다음과 같습니다. {} . {} 는 최상위 프로토타입입니다. __proto__ 위쪽으로 계속 인쇄하면 null 값이 반환됩니다. 이는 이전 레이어가 이미 최상위 프로토타입임을 증명합니다.

다음 그림은 최상위 프로토타입을 보완한 것입니다. 코드의 첫 번째 부분에서 누락되었습니다.

顶层原型就是Object.prototype

3. 개체의 프로토타입(Object.prototype)

3.1 그렇다면 프로토타입 체인의 끝은 어디입니까? 예를 들어, 세 번째 객체에도 프로토타입 __proto__ 속성이 있습니까?

var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

위의 인쇄된 결과는空对象{}

• 사실 이 프로토타입은 우리의 최상위 프로토타입입니다.

  var obj = {
    이름: '잼',
    나이: 19
    }
    console.log(obj.__proto__) // {}
    console.log(Object.prototype) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object는 모든 클래스의 상위 클래스이므로 obj.__proto__는 실제로 Object.prototype입니다.
  console.log(obj.__proto__ === Object.prototype) // true 결과 Object.prototype이 최상위 프로토타입임을 알 수 있습니다.

• Object에서 직접 생성된 객체의 프로토타입은 {} 같습니다.

3.2 그러면 질문할 수 있습니다. : {} 프로토타입에는 특별한 것이 있나요?

• 특수 사항 1: 객체에 프로토타입 속성이 있지만 해당 프로토타입 속성은 이미 null을 가리킵니다. 즉, 최상위 프로토타입입니다.

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• 특별한 점 2: 이 객체에는 많은 기본 속성과 메서드가 있습니다.
  • Object.prototype 인쇄 결과는 비어 있지 않지만 내부 속성은 열거할 수 없습니다. 예를 들어 constructor 인쇄해 보겠습니다.

    <!-- 생성자 속성이 있고 비어 있지 않음을 알 수 있습니다 -->console.log(Object.prototype.constructor) // [Function: Object] <!-- 생성자는 다시 참조합니다. Object -->

  • us Object.getOwnPropertyDescriptors() 메소드를 통해 Object.prototype 의 모든 자체 속성에 대한 설명자를 가져올 수도 있습니다.

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //아래 긴 스크린샷과 같이

    

4. 프로토타입 체인 관계 메모리 그래프