preface

This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

JavaScript has a special existence: objects. Each object also has a prototype object from which methods and properties can be inherited. When it comes to objects and prototypes, you may encounter some strange questions, such as how js functions are objects, what proto and prototype are, how JS objects implement inheritance, and how JS accesses object methods and properties. Let’s take a closer look at JavaScript prototypes with these questions in mind.

What is the relationship between prototype objects and objects

In JS, each object can be viewed as a collection of properties (methods)

  {
    key1: [1.23].key2: func,
    key3: {'key':true}}Copy the code

In JS, object values can be primitive data types (number, String, Boolean, NULL, undefined, BigINT, and Symbol) as well as objects and functions. Null is considered an object because typeof NULL is ‘object’, but this is a long-standing JS Bug. Any Object, function, or array is an instance of Object, so in JS everything is an Object except the original data type. In JS, function is also a special object, it also has attributes and values, all functions will have a special attribute prototype, the value of the attribute is an object, this object is often referred to as “prototype object”. We can print this property in the control bar:

  function Studen(name){
    this.name = name
  }
  console.log(Studen.prototype)
Copy the code

Print result:

[[prototype]] [[prototype]] [[prototype]] [[prototype]] [[prototype]] [[prototype]] [[prototype]] [[prototype]] [[prototype]] Some browsers display [[prototype]], some display proto). In javascript __protp__ refers to the object’s prototype object. His prototype object is Prototype. The prototype object of the function has the following characteristics: – All function prototype objects have the constructor property, which in our case is the Studen function. – The Studen function prototype object also has its own proto. So the prototype Object for Person.prototype is Object.prototype. We can draw a graph to show their relationship

As you can see from the figure, the proto property points to the prototype object of the object. Each function has a prototype property, which is the prototype object of the function

Second, the use ofprotoAnd Prototype implement inheritance

In JS, if you point A object’s proto to B’s prototype property, a.proto = B.prototype, then A’s __proto__ can access B’s prototype properties and methods. Let’s continue with Studen’s method:

  let zs = new Studen('zs')
Copy the code

This is a syntactic sugar, a shorthand for prototype inheritance, which actually executes the following code on the JS engine:

  let zs = {}
  zs.__proto__ = Studen.prototype
  Studen.call(zs,'zs')
Copy the code

Then look at an example of ZS

Zs’ Proto points to Student.prototype

Let’s add this logic to our flow chart:

We can get the following from the figure:

• Each function’s prototype object has a constructor
• Create the instance object using the constructor (new Studen(‘zs’),
• The proto property of the instance object points to the prototype object of the function

Access methods and properties of objects through the prototype chain

When the object in JS access the attribute, will first look for this attribute in the object, if not found to the object’s prototype object to find, if not found to change the object’s prototype object prototype object to find… Proto is null. Null is the last link in the prototype chain. Null is the last link in the prototype chain.

Since js accesses the properties of objects by iterating through the prototype chain, we can inherit through the prototype chain. However, the need to traverse the various prototype chain objects each time an attribute is found causes performance problems:

• The entire prototype chain is traversed when looking for nonexistent attributes
• Finding attributes in the prototype chain is time-consuming and produces performance costs

Therefore, when designing objects, we should pay most attention to the length of the prototype chain. If it is too long, we can choose other ways to solve it to avoid possible performance problems.

conclusion

This article has taken you through a brief look at JavaScript archetypes. While the syntax since ES6 has adopted the syntactic sugar of class/extends to represent classes and inheritance, it is still essentially a chain of archetypes. Understanding prototypes provides an initial peek into the inner workings of JavaScript.