Broken threads, prototypes and prototype chains in JavaScript

The relationship between prototype and prototype chain runs through the objects in JavaScript, and everything in JavaScript is an object, so prototype and prototype chain are more important The concept of JavaScript, today I will take you to take a look at the prototype and prototype chain in JavaScript.

1. Understand the concept (just know these two nouns)

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

2. Prototype chain (__<em>proto__</em>)

2. Understand the affiliation relationship

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

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

Note: The __proto__ of the object saves the prototype of the object’s constructor

a. Declare a constructor

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

b. Declare an object

    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

3. In-depth understanding of prototype chain, prototype and prototype inheritance

    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
    *                 }         
    *        }
    *     }
    *
    * */

4. Summary

• It is not recommended to use __proto__ to access directly.

• can be simply summarized as taking <span style="color: rgb(0, 0, 0);">prototype</span> as the prototype node, <span style="color: rgb(0, 0, 0);">__proto__</span> as the prototype chain .

• Every instance object (<span style="color: rgb(0, 0, 0);">object</span>) has a private property (called <span style="color: rgb(0, 0, 0);">__proto__</span> ) points to the prototype object (<span style="color: rgb(0, 0, 0);">prototype</span>) of its constructor. The prototype object also has a prototype object of its own (<span style="color: rgb(0, 0, 0);">__proto__</span>), layering up until an object's prototype object is <span style="color: rgb(0, 0, 0);">null</span>. By definition, <span style="color: rgb(0, 0, 0);">null</span> has no prototype and serves as the last link in this prototype chain.

• <span style="color: rgb(0, 0, 0);">someObject.[[Prototype]]</span> symbol is used to point to <span style="color: rgb(0, 0, 0);">someObject# The prototype of </span>##,someObject.[[Prototype]]<span style="color: rgb(0, 0, 0);"></span> === __proto__<span style="color: rgb(0, 0, 0);"></span>( A non-standard property of JavaScript but implemented by many browsers).

• Object.prototype<span style="color: rgb(0, 0, 0);"></span> The attribute represents the prototype of Object<span style="color: rgb(0, 0, 0);"></span> object.

• The

  [[Prototype]]<span style="color: rgb(0, 0, 0);"></span> of the instance object created by the constructor points to func<span style="color: rgb(0, 0, 0);"></span>prototype<span style="color: rgb(0, 0, 0);"></span> attributes.

Recommended videos:

"Quick Introduction to JavaScript_Jade Girl Heart Sutra Series", "Dugu Jiujian (6)_jQuery Video Tutorial"

The above is the detailed content of Broken threads, prototypes and prototype chains in JavaScript. For more information, please follow other related articles on the PHP Chinese website!