JavaScript의 깨진 스레드, 프로토타입 및 프로토타입 체인

프로토타입과 프로토타입 체인의 관계는 JavaScript의 객체를 통해 이루어지며, JavaScript의 모든 것은 객체이므로 프로토타입과 프로토타입 체인은 상대적으로 중요한 개념입니다. 오늘 가져와 보겠습니다. JavaScript에서 프로토타입과 프로토타입 체인을 살펴보겠습니다. JavaScript中的对象，而JavaScript中万物皆对象，所以原型和原型链是比较重要的概念，今天就带大家一起来看一看JavaScript中的原型与原型链。

一、了解概念(知道有这两个名词即可)

1. 原型（<em>prototype</em>）

2. 原型链（__<em>proto__</em>）

二、了解从属关系

prototype  => 函数的一个属性         ： 同时也是一个 对象{} (称之为原型对象亦可)

__proto__ => 对象Object的一个属性   ： 同时也是一个 对象{}   (__proto__也就是[[Prototype]])

注：对象的__proto__保存着该对象的构造函数的prototype

a.声明一个构造函数

    function Test() { }
  
    //prototype 是函数的一个属性
    console.dir(Test);
    console.log(Test.prototype);
    // Test.prototype也是一个对象
    console.log(typeof Test.prototype);

b.声明一个对象

    const test = new Test();
    
    console.log(test);
    //验证test为一个对象
    console.log(typeof test);
    //__proto__是对象的一个属性
    console.log(test.__proto__);
    console.log(Test.prototype);
    //对象的__proto__属性存储着Test.prototype
    console.log(test.__proto__ === Test.prototype);
    // test.__proto__也是一个对象
    console.log(typeof test.__proto__);

function Test() {}
console.log(Test.prototype); //验证函数是否有prototype属性

let test = new Test();
console.dir(test.__proto__); //验证对象是否有__proto__属性
console.log(test.__proto__ === Test.prototype);//验证对象的__ptoto__是否保存着该对象的构造函数的prototype

console.log(Test.prototype.__proto__ === Object.prototype);//Test.prototype（是一个对象）的__proto__属性是否是对象的原型属性
console.log(Object.prototype.__proto__);//原型链的顶层没有__proto__属性 null

三、深入认识原型链、原型和原型继承

    function Test(){}
    let test =new Test();
    test.a= 10;
    //test.__proto__ === test.constructor.prototype
    test.__proto__.b1=11;//对象的__proto__属性存储着对象构造函数的prototype属性
    Test.prototype.b2=11;
   
    test.__proto__.__proto__.c1=12;
    Object.prototype.c2=12;
    console.log(test);
    console.log(Test.prototype);
    console.log(Object.prototype.__proto__);
   
    /*逐层解析
    * test{
    *        a = 10
    *        __proto__:Test.prototype{
    *                 b = 11
    *                 __proto__:Object.prototype{
    *                           c = 12
    *                           X__prototype__:null
    *                 }         
    *        }
    *     }
    *
    * */

四、总结

• 不建议直接用 __proto__ 访问。

• 可以简单概括为以<span style="color: rgb(0, 0, 0);">prototype</span>为原型节点, <span style="color: rgb(0, 0, 0);">__proto__</span>为原型链条。

• 每个实例对象（<span style="color: rgb(0, 0, 0);">object</span>）都有一个私有属性（称之为 <span style="color: rgb(0, 0, 0);">__proto__</span> ）指向它的构造函数的原型对象（<span style="color: rgb(0, 0, 0);">prototype</span>）。该原型对象也有一个自己的原型对象（<span style="color: rgb(0, 0, 0);">__proto__</span>），层层向上直到一个对象的原型对象为 <span style="color: rgb(0, 0, 0);">null</span>。根据定义，<span style="color: rgb(0, 0, 0);">null</span> 没有原型，并作为这个原型链中的最后一个环节。

•  <span style="color: rgb(0, 0, 0);">someObject.[[Prototype]]</span> 符号是用于指向 <span style="color: rgb(0, 0, 0);">someObject</span> 的原型,<span style="color: rgb(0, 0, 0);">someObject.[[Prototype]]</span> === <span style="color: rgb(0, 0, 0);">__proto__</span>(JavaScript的非标准但许多浏览器实现的属性)。

• <span style="color: rgb(0, 0, 0);">Object.prototype</span> 属性表示 <span style="color: rgb(0, 0, 0);">Object</span> 的原型对象。

•  被构造函数创建的实例对象的 <span style="color: rgb(0, 0, 0);">[[Prototype]]</span> 指向 <span style="color: rgb(0, 0, 0);">func</span>的 <span style="color: rgb(0, 0, 0);">prototype</span>

  1. 개념을 이해하세요(이 두 용어만 알아두세요)

1. 프로토타입(<em>프로토타입</em>)

2. 프로토타입 체인(__<em>proto__</em>)

2. 소속 이해🎜rrreee🎜참고: 객체의 __proto__는 객체 생성자의 프로토타입을 저장합니다🎜🎜 a . 생성자 선언
🎜rrreee🎜 b. 객체 선언🎜rrreeerrreee🎜🎜rrreee🎜요약
🎜

• 🎜__proto__ 액세스. 🎜🎜
• 🎜는 <span style="color: rgb(0, 0, 0);">prototype</span>을 프로토타입 노드로 취하는 것으로 간단히 요약할 수 있습니다. <span style="color: rgb(0, 0, 0);">__proto__</span>는 프로토타입 체인입니다. 🎜🎜
• 🎜각 인스턴스 객체(<span style="color: rgb(0, 0, 0);">객체</span>)에는 개인 속성(<span style="color: rgb(0, 0, 0);">__proto__</span> )는 생성자의 프로토타입 객체(<span style="color : rgb( 0, 0, 0);">프로토타입</span>). 프로토타입 객체에는 프로토타입까지 자체 프로토타입 객체(<span style="color: rgb(0, 0, 0);">__proto__</span>)도 있습니다. 객체 객체가 <span style="color: rgb(0, 0, 0);">null</span>입니다. 정의에 따르면 <span style="color: rgb(0, 0, 0);">null</span>에는 프로토타입이 없으며 이 프로토타입 체인의 마지막 링크 역할을 합니다. 🎜🎜
• 🎜 <span style="color: rgb(0, 0, 0);">someObject.[[프로토타입 ]]</span> 기호는 <span style="color: rgb(0, 0, 0);">someObject</span>를 가리키는 데 사용됩니다. 프로토타입,<span style="color: rgb(0, 0, 0);">someObject.[[Prototype]]</span> === <span style="color: rgb(0, 0, 0);">__proto__</span>(JavaScript는 비표준이지만 많은 브라우저 구현 속성). 🎜🎜
• 🎜<span style="color: rgb(0, 0, 0);">Object.prototype</span> 속성은 <span style="color: rgb(0, 0, 0);">Object</span>의 프로토타입 객체를 나타냅니다. 🎜🎜
• 🎜 생성자 포인트에 의해 생성된 인스턴스 객체의 <span style="color: rgb(0, 0, 0);">[[Prototype]]</span> <span style="color: rgb(0, 0, 0);">func</span>의<span style="color: rgb(0, 0, 0) );">프로토타입</span> 속성. 🎜🎜🎜🎜추천 동영상: 🎜"JavaScript 빠른 소개_옥소녀심경 시리즈"🎜, 🎜"Dugu Jiujian (6)_jQuery 동영상 튜토리얼"🎜🎜

위 내용은 JavaScript의 깨진 스레드, 프로토타입 및 프로토타입 체인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!