Easy-to-understand analysis of JS prototypes and prototype chains

This time I will bring you an easy-to-understand analysis of JS prototypes and prototype chains. What are the precautions for analyzing JS prototypes and prototype chains? Here are practical cases, let’s take a look.

Objects in Browser

What objects are there in the browser? In ES, the global object is global, while in browsers, the global object is window.

Enter window in the chrome console, and we can see what is in the window.

The following objects can be found in window.
Attributes such as Object, Sring, Numbr, Boolean, Array, Date, Math, parseInt, parseFloat are all required objects specified by ES.
Such as document, alert, prompt, atob, etc. These are the attributes built into the browser.

These objects all have hash structures, such as Object and String, which have their own properties and methods , and corresponding API calls.

Simple types and objects

The examples are as follows: n1 is a simple type and n2 is an object.

var n1 = 'a'var n2 = new String('a')
n1.length
n1.hasOwnProperty('0')
n2.length
n2.hasOwnProperty('0')
n1.xxx = 2n1.xxx // undefined

Difference

The n1 value is stored in the stack. When n2 is assigned, an address is created in the stack, pointing to the heap, and a new String type object is created in the heap memory. You can see that there are some attributes in object n2, as well as the prototype attribute.

Attribute

n2 is an object with a length attribute, so it is called. n1 is just a string, why does it also have a length attribute?

can be understood like this: when n1.length, js will perform the following operations: var temp = new String(n1);n1.length ;That is, when using attributes or methods, a new object will be temporarily created in the heap memory. This object is of the corresponding String type. After execution, temp will be destroyed. Therefore, the n1.xxx = 2 operation will not report an error, but n1.xxx displays undefined again, because the data of n1 in the heap memory has been destroyed at this time.

Therefore, in js, the new method of a new object is rarely used, but the variable is assigned directly. hasOwnProperty()

hasOwnProperty() in

n2 is a method in the Object class type. It is not found under the Sting type. Where can I find it?

Here hasOwnProperty() is in n2.proto.proto. n2.proto points to String.prototype, and String.prototype.proto finally points to Object.prototype. String is a prototype, and Object is also a prototype. Object.prototype stores all public properties of the Object type.

In this way, it can effectively save space and avoid recording many attributes in each object. For attributes that are not found in an object, search for them in the object pointed to by proto. The point pointed to is usually the prototype of a certain prototype.

Where to find proto and prototype

var n = new Number(1)var s= new String('1')var o= new Object()

The above methods can be regarded as the form of var object = function ().
In summary, object.proto = function.prototype.

Access proto

Proto is relative to the object. Find the father to see who generated the object. For n, the father is Number, so go to Number.prototype to find it. There is also proto in Number. When accessing, look for it in its parent Object.

Function
String.proto === Function.prototype //true

Functions can also be regarded as objects. String, Object, and Number are all objects and functions. Because new String() was used before, this is a function, and the data type of the function return result is object. String's father is Function.

Function.proto === Function.prototype //trueFunction.prototype.proto === Object.prototype //trueFunction.proto.proto === Object.prototype //true

When Function is regarded as an object generated by the Function method,
that is, var Function = new Function()
can understand Function.proto == = Function.prototype

The type of Fuction is function, which is constructed from Function. The relationship can be seen from the picture above. When new String(), the type of String is also function, and String.proto points to Function.prototype.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to avoid features and browser inference in JS

Detailed explanation of JS facade pattern use cases

The above is the detailed content of Easy-to-understand analysis of JS prototypes and prototype chains. For more information, please follow other related articles on the PHP Chinese website!