The body of the

Javascript prototype, prototype chain related topics, is also a platitude of a topic, has not been deep understanding of this piece, this article is mainly to record their understanding of prototype, prototype chain this piece of knowledge, collation, convenient follow-up view.

The name of the cognitive

Prototype -> < span style = “box-sizing: border-box! Important;

__proto__ -> Link point of the prototype.

What is prototype?

The first thing to know is that Prototype is an attribute inside a function, which is essentially an object. How do you verify that a stereotype is a property in a function?

  function Test () {
    // Do Someing
  }
  console.log(Test.prototype) Constructor: ƒ Test () {}, [[Prototype]]: Object}
  console.log(Test.prototype.constructor) ƒ Test () {}
Copy the code

Test the argument that Prototype is an attribute inside a function and is essentially an object. Prototype: a prototype object.

What is the__proto__?

__proto__ is a built-in property of an object. As mentioned above, prototype is an object in a function, and we can use prototype to prove this argument.

  function Test () {
    // Do Someing
  }
  console.log(Test.prototype.__proto__)
Copy the code

So how does __proto__ act as a link point in the prototype chain so that the whole chain can be linked together?

__proto__ holds the prototype of the function that constructed the object.

  function Test () {
    // Do Someing
  }
  const test = new Test()
  console.log(test.__proto__) Constructor: ƒ Test () {}, [[Prototype]]: Object}
  consle.log(test.__proto__ === Test.prototype) // true
Copy the code

Therefore, the above points of view have been demonstrated.

Question: Since the objects have their own__proto__Property, so functionTest.prototype.__proto__And whose is it to keepprototype?

   function Test () {
    // Do Someing
  }
  const test = new Test()
  console.log(test.__proto__) Constructor: ƒ Test () {}, [[Prototype]]: Object}
  consle.log(test.__proto__ === Test.prototype) // true
  console.log(Test.prototype.__proto__) // {constructor: ƒ Object(), __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,... }
Copy the code

__proto__ holds the prototype of the constructor that builds test.prototype. __proto__. So what is the constructor for test.prototype. __proto__?

How do I identify the constructor of this object?

If you take a closer look at each of the above logs, it has a property: constructor.

Constructor, in JS, is where the DNA of every object/function is stored, and DNA identifies (see constructor) its biological father. In the case of non-human interference, or the involvement of a third party, it can be accurately found. Of course, the natural tianyang, out of Yin and Yang, not in the five elements except. Null: Does that exist? Is it Sun Wukong? I:… I’m talking about you.

. If you are interested in the particularity of NULL, you can find relevant information about it.

Now that we know how to find our own constructor, the output of test.prototype. __proto__ should be obvious. Test.prototype.__proto__ output constructor holds object.prototype (). Prototype. __proto__ ();

  function Test () {
    // Do Someing
  }
  const test = new Test()
  console.log(test.__proto__) Constructor: ƒ Test () {}, [[Prototype]]: Object}
  consle.log(test.__proto__ === Test.prototype) // true
  console.log(Test.prototype.__proto__) // {constructor: ƒ Object(), __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,... }
  __proto__ contains the prototype of the constructor that builds test.prototype. __proto__
  console.log(Test.prototype.__proto__.__proto__) // null, 
Copy the code

em…. , which means that the chain has reached its end, and the chain’s vertex is null as the end point.

Conclusion: prototype chain, based on the object as the benchmark, with __proto__ as the link point, (__proto__ preserves the structure of the object function prototype), the final formation of the chain structure. The end point of the prototype chain is object.prototype

About prototype chain search

Prototype, __proto__ and prototype chain are demonstrated and summarized above. Now let’s look at something a little bit more specific.

  function Test () {
    this.fruits = 'apple'
  }
  let test = new Test()
  Test.prototype.fruits = 'banana' 
  Test.prototype.__proto__.fruits = 'orange'
  console.log(test)
  console.log(test.fruits)
Copy the code

Prototype declares fruits (fruit) and Object. Prototype declares orange (Object). Prototype declares fruits (apple) and Test (fruit). You can see that the current output of the instance object test.fruits is the constructor of the values of fruits declared inside the test function.

WHY?

You can see that the object test is the return value of new test (), where what happens after new? Why use new?

  let test = new Test()
  // let this = object.create (test.prototype) // Create a new Object and assign it to this
  // this.fruits = 'apple' // Add the properties in the constructor Test to the new object
  // return this // Returns this object by default
Copy the code

Of course, the return value after new depends a lot on the constructor Test, which is similar to the previous Test function.

Fruits = ‘apple’; thus, test. Fruits output in log is: apple.

  function Test () {
    // this.fruits = 'apple'
  }
  let test = new Test()
  Test.prototype.fruits = 'banana' 
  Test.prototype.__proto__.fruits = 'orange'
  console.log(test)
  console.log(test.fruits)
Copy the code

We can see what the new operator does when we comment out the Test attribute value and see that test.fruits prints banana. The new operator creates a new object from test. prototype, which contains all the properties and methods in test. prototype. When you access a property in an object, the object itself, if it doesn’t exist, continues through the prototype chain.

To find the rule

Hand on the blackboard

There’s an important point to keep in mind. The rule for finding attributes is the proximity rule. What does that mean? If the object itself has access to the property value, directly return the property value, the search stops. When the attribute value does not exist, continue to search in the prototype chain, once found, return the attribute value, do not continue to search.

This is also why the first output is Apple instead of banana and orange. After annotating the Test’s this.fruits = ‘apple’, the output is banana instead of orange, not because banana is cheaper or more delicious than orange. Of course, when test.prototype. fruits = ‘banana’ is annotated out, orange is returned, of course.

The above is my personal opinion, summary, don’t spray if you don’t like it, if there is any mistake, please leave a message in the comment section, I will see the first time to correct.