Fils brisés, prototypes et chaînes de prototypes en JavaScript

La relation entre le prototype et la chaîne de prototypes traverse les objets en JavaScript, et tout dans JavaScript est un objet, donc le prototype et la chaîne de prototypes sont des concepts relativement importants. Apportons-le aujourd'hui. Jetons un coup d'œil au prototype et à la chaîne de prototypes en 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. Comprendre les concepts (il suffit de connaître ces deux termes)

1. Prototype (<em>prototype</em>)

2. Chaîne de prototypes (__<em>proto__</em>)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!