Hello, everyone! I’m the head Up. A front end siege lion with code cleanliness (ha ha, life is messy (*￣))

Javascript has two chains, a scope chain and a prototype chain

Today, let’s start the javascript prototype chain (want to talk about the scope chain Baby, can pay attention to wave ha, —————— love you little Up).

OK. The text starts ~~

Concept to explain

Javascript is an object-oriented, interpreted weak language, so let’s clarify these concepts first

  • Function (function)
  • Function Object
  • Native Objects
  • Build-in Objects
  • Host Object

function

The former is a function declaration, the latter is a function literal, and the result of typeof Person/Person1 is both a function

The function object

A function is an object, and an object representing a function is a function objectUp here, the object we created is the function object

Local object

Ecma-262 defines native objects as “objects provided by ECMAScript implementations independent of the host environment.” In simple terms, a local object is a class (reference type) defined by ECMA-262. They include:

Object,Function,Array,String,Boolean,Number Date,RegExp,Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError.

We can’t think of them as objects because the names they give are local objects (even though, in fact, they are, since everything in JS is an object), and the result returned by typeof is always function

That is, these local objects (classes) are actually passedfunctionestablished As you can see, Object is originally a function that is instantiated after new Object() to create the Object.

Built-in objects

Ecma-262 defines a built-in object as “any object provided by an ECMAScript implementation that is independent of the host environment and occurs when an ECMAScript program begins execution.” This means that the developer does not have to explicitly instantiate the built-in object; it has already been instantiated. Ecma-262 defines only two built-in objects, Global and Math (which are also local objects, and each built-in object is a local object by definition).

Having these concepts in place will help you understand the prototype and prototype chain that we will talk about next.

What is a prototype

To get a prototype, let’s first understand three key words — no, keywords!

  1. _proto_
  2. prototype
  3. constructor

_proto_, the prototype

Every object has a prototype object, which is referred to by its built-in property __proto__ by its constructor’s prototype. That is, every object is created by a constructor, but not every object has a prototype. Only methods have prototypes

constructor

withfunctionYou declare functions, and if you call them directly, thenPerson()It is a normal function that is the constructor of the object generated by new only if the new function is used to produce the object. (a little dizzy after reading these keywords? Is it confusing? That first on the graph to see -_-!

  • Little friend: Up Lord, still dizzy
  • Up Main: domestic famous painter, front Up main line (black Wave MAC built-in drawing tool, EM…..)

The process of creating an object

Now that we know what a prototype is, let’s talk about the process of creating an object

Declaring a constructor (class)

The reason we add a class after a constructor is that a class can also create an object

ES5 => constructor ES6 => class

Tip: Usually constructors and classes are named with large humps

So new is an object

No object? Not afraid! Let’s take a look at the relationship between them

What we can see is that the object that comes out of new, its constructor points to Person.

New: an object whose __proto__ property refers to the method’s prototype property, and whose constructor refers to the constructor property of the prototype.

What did New do

  1. Create an empty object
  2. Set the internals, accessibility, and accessibility of this new object[[prototype]]Property is the constructorprototype.construtor);
  3. Execute the constructor whenthisWhen the keyword is mentioned, use the properties of the newly created object; Returns the newly created object (unless the constructor returns’ prototypeless ‘).
  4. After the new object is created, if a property is called that the new object does not have, JavaScript will extend the prototype chain to find the corresponding content layer by layer. This is similar to traditional ‘class inheritance’.

Tip: The [[prototype]] property in point 2 only works when an Object is created, such as using the new keyword, using object.create, and being literal (default: function.prototype, The Number defaults to number.prototype, etc.). It can only be read by object.getPrototypeof (someObject). There is no other way to set or read this value. Send your ticket with authoritative documents

Prototype chain

All that talk is for the next, hee hee

What is a prototype chain?

The core of the prototype chain is to rely on the __proto__ reference of the Object. When the property itself does not exist, the constructor that creates the Object is layered up until the Object has no __proto__ reference.

Simple practice of prototype chains

Multi-level prototype links become prototype chains

The role of the prototype chain

  • Instance objects can use methods or properties of objects on the prototype chain
  • Search order: search from above (first come, first served)

Override methods on the prototype chain

Prototype chain diagram

This is small make up on the Internet to find the picture, feel very good, I recommend to you

conclusion

I believe after reading this article, you have a new understanding and understanding of javascript prototype chain, don’t forget to pay attention to the small editor, like oh