집 > 기사 > 웹 프론트엔드 > JavaScript의 깨진 스레드, 프로토타입 및 프로토타입 체인

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

灭绝师太원래의: 2021-11-04 11:43:291401검색

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

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

原型（prototype）
原型链（__proto__）

二、了解从属关系

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__ 访问。
可以简单概括为以prototype为原型节点, __proto__为原型链条。
每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
someObject.[[Prototype]] 符号是用于指向 someObject 的原型,someObject.[[Prototype]] === __proto__(JavaScript的非标准但许多浏览器实现的属性)。
Object.prototype 属性表示 Object 的原型对象。
被构造函数创建的实例对象的 [[Prototype]] 指向 func的 prototype
1. 개념을 이해하세요(이 두 용어만 알아두세요)

프로토타입(프로토타입)
프로토타입 체인(__proto__)

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

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

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

성명：

이전 기사：Route Guards의 Angular 학습 경로에 대한 간략한 분석다음 기사：Route Guards의 Angular 학습 경로에 대한 간략한 분석