Broken threads, prototypes and prototype chains in JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Broken threads, prototypes and prototype chains in JavaScript

Nov 04, 2021 am 11:43 AM

javascript prototype prototype chain

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)

Prototype (prototype)
Prototype chain (__proto__)

2. Understand the affiliation relationship

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

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

Copy after login

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);

Copy after login

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__);

Copy after login

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

Copy after login

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

Copy after login

4. Summary

It is not recommended to use __proto__ to access directly.
can be simply summarized as taking prototype as the prototype node, __proto__ as the prototype chain .
Every instance object (object) has a private property (called __proto__ ) points to the prototype object (prototype) of its constructor. The prototype object also has a prototype object of its own (__proto__), layering up until an object's prototype object is null. By definition, null has no prototype and serves as the last link in this prototype chain.
someObject.[[Prototype]] symbol is used to point to someObject# The prototype of ##,someObject.[[Prototype]] === __proto__( A non-standard property of JavaScript but implemented by many browsers).
Object.prototype The attribute represents the prototype of Object object.
The
[[Prototype]] of the instance object created by the constructor points to funcprototype attributes.