JS 프로토타입 및 프로토타입 chain_javascript 기술에 대한 심층적인 이해

Prototype은 JavaScript에서 이해하기 어려운 개념입니다. 프로토타입과 관련된 속성은 여러 가지가 있습니다. 객체에는 "prototype" 속성이 있고, 함수 객체에는 "prototype" 속성이 있으며, 프로토타입 객체에는 "constructor" 속성이 있습니다. " 속성. .

1. 프로토타입 첫 소개
JavaScript에서는 프로토타입도 객체입니다. 프로토타입을 통해 객체의 속성 상속이 실현될 수 있습니다. JavaScript 객체는 모두 객체의 프로토타입에 해당하는 "[[Prototype]]" 내부 속성을 포함합니다. .
"[[프로토타입]]"은 객체의 내부 속성이므로 직접 액세스할 수 없습니다. 따라서 객체의 프로토타입을 편리하게 보기 위해 Firefox와 Chrome에서는 비표준(모든 브라우저에서 지원되지는 않음) __proto__ 접근자를 제공합니다(ECMA에서는 표준 객체 프로토타입 접근자 "Object.getPrototype(object)"를 도입했습니다). JavaScript 프로토타입 객체에는 프로토타입을 가리키는 모든 인스턴스를 생성하는 생성자에 해당하는 "constructor" 속성도 포함되어 있습니다.

2. 규칙
JavaScript에서 각 함수에는 프로토타입 속성이 있습니다. 함수를 생성자로 사용하여 인스턴스를 생성하면 이 함수의 프로토타입 속성 값이 모든 객체 인스턴스에 프로토타입으로 할당됩니다(즉, 인스턴스의 `__proto__` 설정). 속성), 즉 모든 인스턴스의 프로토타입은 함수의 프로토타입 속성을 참조합니다. (****`오직 함수 객체만이 이 속성을 갖습니다!`****)

새로운 과정은 3단계로 나누어집니다

var p = new Person('张三',20);

1. var p={}; 객체 p를 초기화합니다.
2. p._proto_=Person.prototype;, 객체 p의 __proto__ 속성을 Person.prototype
으로 설정합니다. 3. Person.call(p,"Zhang San",20) 생성자 Person을 호출하여 p를 초기화합니다. 통화/신청 이용안내

3.오브젝트와의 첫 만남
Object 객체 자체는 함수 객체입니다. (CODE TEST) Object 함수이므로 프로토타입 속성이 있어야만 "Object.prototype"의 값이 프로토타입 객체 "Object {}"임을 알 수 있습니다. 차례로 "Object.prototype" 개체의 "constructor" 속성에 액세스하면 개체 함수가 얻어집니다.
또한 "Object.prototype._proto_"를 통해 Object 프로토타입의 프로토타입을 얻으면 "null"을 얻게 되는데, 이는 "Object {}" 프로토타입 객체가 프로토타입 체인의 끝이라는 의미입니다.
4. 첫 번째 기능 소개
위 예시의 생성자와 마찬가지로 자바스크립트의 함수도 객체이므로 _proto_를 통해 생성자 객체의 프로토타입을 찾을 수 있습니다.
함수로서 Function 객체는 "function () {}" 객체에 해당하는 프로토타입 속성을 갖습니다.
객체로서 Function 객체에는 "Function.prototype", 즉 "Function._proto_ === Function.prototype"에 해당하는 __proto__ 속성이 있습니다.

'프로토타입'과 '프로토'에 대한 간략한 소개는 다음과 같습니다.
모든 객체에는 객체의 프로토타입에 해당하는 __proto__ 속성이 있습니다.
함수 객체의 경우 __proto__ 속성 ​​외에 프로토타입 속성도 있습니다. 함수가 인스턴스를 생성하기 위해 생성자로 사용되면 함수의 프로토타입 속성 값이 모든 객체 인스턴스에 프로토타입으로 할당됩니다. 즉, 인스턴스 __proto__ 속성을 설정하는 것입니다)

프로토타입 체인 구조도

프로토타입 체인
모든 객체와 프로토타입에는 프로토타입이 있으므로 객체의 프로토타입은 프로토타입 객체를 가리킵니다.
부모의 프로토타입은 부모의 부모를 가리킵니다. 이러한 프로토타입은 레이어별로 연결되어 프로토타입 체인을 형성합니다.

1. 속성 검색
객체의 속성을 찾을 때 JavaScript는 지정된 이름을 가진 속성을 찾을 때까지 프로토타입 체인을 위쪽으로 탐색합니다. 검색이 프로토타입 체인(즉, Object.prototype)의 맨 위에 도달하면 지정된 속성이 다음과 같습니다. 아직 찾을 수 없으면 정의되지 않은 상태로 반환됩니다.

function Person(name, age){ 
    this.name = name; 
    this.age = age; 
  } 
Person.prototype.MaxNumber = 9999;
Person.__proto__.MinNumber = -9999;
var will = new Person("Will", 28); 
console.log(will.MaxNumber); // 9999 
console.log(will.MinNumber); // undefined 

이 예에서는 "MaxNumber" 및 "MinNumber" 속성이 두 프로토타입 개체 "Person.prototype" 및 "Person.proto"에 각각 추가됩니다. 여기서는 "prototype"과 "proto"의 차이점을 명확히 해야 합니다. " .

"Person.prototype"은 Person이 구성한 모든 인스턴스의 프로토타입에 해당합니다. 즉, "Person.prototype"은 이러한 인스턴스의 프로토타입 체인의 일부이므로 이러한 인스턴스가 속성 검색을 수행할 때 참조합니다. .prototype의 "Person" 속성 ".

객체가 생성되는 방식이 프로토타입 체인에 영향을 미칩니다

  var July = { 
    name: "张三", 
    age: 28, 
    getInfo: function(){ 
      console.log(this.name + " is " + this.age + " years old"); 
    }
  } 
 console.log(July.getInfo()); 

이렇게 객체가 생성되면 프로토타입 체인은 다음 그림과 같습니다. July 객체의 프로토타입은 "Object.prototype"이며, 이는 객체 구성 방식이 프로토타입 체인의 형태에 영향을 미친다는 의미입니다. .

{}객체 프로토타입 체인 구조 다이어그램

사진 개요
1. 모든 객체에는 객체의 프로토타입에 해당하는 __proto__ 속성이 있습니다.
2. 모든 함수 객체에는 프로토타입 속성이 있으며, 이 속성의 값은 함수에 의해 생성된 객체에 할당됩니다. 3. 객체의 _proto_ 속성.
4. 모든 프로토타입 객체에는 프로토타입을 가리키는 모든 인스턴스를 생성하는 생성자에 해당하는 생성자 속성이 있습니다.
5. 함수 객체와 프로토타입 객체는 프로토타입과 생성자 속성을 통해 서로 연관되어 있습니다.

위에서는 JS 프로토타입과 프로토타입 체인의 자세한 내용을 소개하겠습니다. 모든 분들의 학습에 도움이 되기를 바랍니다.