A thorough understanding of js native syntax prototype, __proto__ and constructor

1 Introduction

I wrote a few source code comments of Vue (not analysis...), and I felt that my understanding of prototypes is not enough. In JS, prototypes are very important. As long as you want to climb up the mountain of JS, it will laugh at you, "Have you figured it out?" If not, it will give you ten times the gravity. If you understand it, you will definitely be able to earn more than 10,000 yuan a month, win a beautiful and rich woman, and reach the peak of your life~~~

This article talks about my own understanding, and it should be original (I am 99% sure, unless I have read the article before and remembered it in my mind, and I can't give a citation, please contact me and I can add it), but if someone refers to my article, I hope to give a link to this article. In fact, I just want my article to have more readers, I want to earn more than 10,000 yuan a month, win a beautiful and rich woman, and reach the peak of life~~~

2 Prerequisites

2.1 Data Types

There are 7 data types in js

Based on whether or not the attributes can be read, they can be divided into two categories

• You can read properties:
  • It can have attributes: object
  • It cannot have attributes: string, number, boolean, symbol
• Cannot read property: null,undefined

null, undefined type, reading and setting properties are illegal, and an error is reported directly.

Only objects can have their own properties, and can read and set properties.

The string, number, boolean, and symbol types can read attributes. In fact, they are first constructed into a wrapper object, and then the attributes are read. The same is true for setting attributes. It can be understood that if the attributes are set on a wrapper object that will be destroyed immediately, they can be set, but there is no substantial effect.

2.2 Determine whether it is its own property (hasOwnProperty)

The hasOwnProperty method is inherited and is used to determine whether the object itself has this property. If it does, it will be fine, no matter what the value is.

const obj = { a: 1 }
const o = Object.create(obj)
ob = 1
oc = void 0
console.log('a', oa, o.hasOwnProperty('a')) // Can read the value, inherited, but not its own property console.log('b', ob, o.hasOwnProperty('b')) // Can read the value, its own property console.log('c', oc, o.hasOwnProperty('c')) // Read undefined, its own property console.log('d', od, o.hasOwnProperty('d')) // Read undefined, not its own property, and not inherited from this property

3 A little thought

Programs are data structures and algorithms. A good program should use the smallest amount of memory to store data and complete the operation in the fastest time to get the result.

Reusing data can reduce memory usage. For example, if a and b need to perform the same function, they can reuse the same method (attribute).

Then we need to solve a problem, where does this reuse method exist, and how can a and b find it.

The solution in js is that both a and b are constructed from functions (let's call them Functions here), and the reused methods are stored in the function (in the prototype property).

(Because only the constructor needs to store the reused method, the prototype only exists on the constructible function. The arrow function is not used for construction, so it does not have it. Other objects, if they are not even functions, will not have this property.)

Then we need to establish a connection between a, b and Function, because a and b need to find the reuse method they can use in Function.

The implementation in js is through the constructor attribute, that is, a.constructor, b.constructor can find Function

So through a.constructor.prototype, we can find the storage address of the method that can be reused. In order to quickly find js, a shortcut method a.__proto__ is provided to find it in one step, that is, a.constructor.prototype and a.__proto__ find the same object, so of course they are equal.

// Neither of them is its own property. I don't know how to find the prototype object from these two properties. It must be magic.....
const obj = {}
console.log(obj.hasOwnProperty('__proto__')) // false
console.log(obj.hasOwnProperty('constructor')) // false

(So, if you manually modify the pointers of constructor, prototype, __proto__, then you have to know what you are doing)

(I don’t know if the designers of js think this way, haha, I think so, it’s much easier to understand this way)

(This process is called inheritance, and it is a chain process, that is, you can search a.constructor.prototype.constructor.prototype.constructor.prototype until you find the top. This process can be accelerated by a.__proto__.__proto__.__proto__. This is called the prototype chain. This is the only way to implement inheritance in js.)

(The above is just to guide the thinking process. In fact, the prototype object is not found through a.constructor.prototype, but directly through __proto__)

3.1 Modify the constructor

const Dog = function () {}
const dog = new Dog()

dog.constructor = 0

console.log(dog.hasOwnProperty('constructor')) // true
console.log(dog.constructor) // 0

console.log(dog.__proto__.constructor) // [Function: Dog]

In summary, modifying this property increases the difficulty of finding the constructor that constructs it. It cannot be obtained directly and needs to be read from the prototype object.

If both its own property and the property on the prototype are modified, then only its constructor cannot be found, and there will be no other impact.

3.1.1 instanceof

Instanceof is concerned with the prototype chain and has nothing to do with the constructor

Confirming the above point, modifying the constructor attribute has no other effect except that the instance cannot find its constructor. If you need to find its constructor through the instance, you need to maintain the relationship between the two.

// The syntax is // a instanceof b
// This operator determines whether there is b.prototype on the prototype chain of a. Because b.prototype needs to be determined, b must be a constructible function, otherwise an error will be reported const fn = function () {}
const o = Object.create(fn.prototype)
// At this time, there is fn.prototype on o's prototype chain, because o.__proto__ === fn.prototype
console.log(o instanceof fn) // true
const emptyObj = {}
fn.prototype = emptyObj
// At this point, there is no fn.prototype in o's prototype chain, because o.__proto__ is no longer equal to fn.prototype console.log(o instanceof fn) // false
o.__proto__ = emptyObj
// Just fix o.__proto__ console.log(o instanceof fn) // true

3.1.2 isPrototypeOf

Now there is a new API that implements the same functionality as instanceof, but is more semantic, directly determining whether an object is on the prototype chain of another object

const fn = function () {}
const o = Object.create(fn.prototype)
console.log(fn.prototype.isPrototypeOf(o)) // true

3.2 Modify __proto__|prototype

Let me summarize first. When constructing an instance, the __proto__ of this instance will point to the prototype of the constructor at this time, and then the instance actually inherits __proto__. (Why emphasize this time, because the prototype of the constructor may be modified to point to, and the modification will only affect the instance constructed after the modification. The instance constructed before the modification will still use the prototype before the modification)

Therefore, you can understand the impact of modifying __proto__ and prototype

1. Modify the direction of __proto__

It only affects its own inheritance

const Dog = function () {}
const dog = new Dog()
const d = new Dog()
Dog.prototype.name = 'Dog'
dog.__proto__ = {
  name: '__proto__',
}
console.log(d.name) // Dog
console.log(dog.name) // __proto__

2. Modify the properties of __proto__

Examples that will affect this band structure

const Dog = function () {}
const dog = new Dog()
const d = new Dog()
Dog.prototype.name = 'Dog'
console.log(d.name) // Dog
console.log(dog.name) // Dog
Dog.prototype = {
  name: 'after',
}
const dog1 = new Dog()
const d1 = new Dog()
console.log(d1.name) // after
console.log(dog1.name) // after
dog1.__proto__.name = '__proto__'
// You can see that only the instance of the current construction is affected. The previous and subsequent instances will not be affected, because this section contains the same Dog.prototype, and their __proto__ all point to it console.log(d1.name) // __proto__
console.log(dog1.name) // __proto__
Dog.prototype = {
  name: 'new',
}
const dog2 = new Dog()
const d2 = new Dog()
console.log(d2.name) // new
console.log(dog2.name) // new

3. Modify the prototype's direction

Examples that will affect this band structure

4. Modify the properties of prototype

It will affect the instance of this band structure, just like modifying the __proto__ property

4 How to modify and obtain prototype objects

4.1 Modifications

We have already discussed modifying prototype and __proto__

4.1.1 Object.create

const obj = {
  name: 'objName',
}

const o = Object.create(obj)
// It is equivalent to o.__proto__ = obj, but it is recommended to use `Object.create`

console.log(o.name) // objName
console.log(o.__proto__ === obj) // true

4.1.2 Object.setPrototypeOf

const obj = {
  name: 'objName',
}

const o = {}

Object.setPrototypeOf(o, obj)
// It is equivalent to o.__proto__ = obj, but it is recommended to use `Object.setPrototypeOf`
const proto = Object.getPrototypeOf(o)
console.log(proto === obj && proto === o.__proto__) // true
const obj1 = {}
o.__proto__ = obj1
const proto1 = Object.getPrototypeOf(o)
console.log(proto1 === obj1 && proto1 === o.__proto__) // true

In summary, when should we use Object.create and when should we use Object.setPrototypeOf? First of all, both are standard APIs and are recommended. When you need to specify a prototype when creating an object, use Object.create. When you need to dynamically modify the prototype object, use Object.setPrototypeOf.

4.2 Acquisition

As mentioned before, we get it through constructor.prototype and __proto__

4.2.1 Object.getPrototypeOf

const obj = {
  name: 'objName',
}

const o = {}

Object.setPrototypeOf(o, obj)

const proto = Object.getPrototypeOf(o)
console.log(proto === obj && proto === o.__proto__) // true

5 js built-in native constructor

The prototype property of these native constructors is not writable, not enumerable, and not configurable.

console.log(Object.getOwnPropertyDescriptor(Object, 'prototype'))
// {
// value: [Object: null prototype] {},
// writable: false,
// enumerable: false,
// configurable: false
// }

5.1 What is the top level of js inheritance?

null, it must be this guy, otherwise we can only do it infinitely

Then all other objects are constructed from Object, so all objects can inherit from Object.prototype.

const obj = {}
const o = new Object()

5.2 js inherited second-class citizens (Function)

In the above small thinking, it is mentioned that js objects are constructed from functions, so Object is also constructed from Function, and even it itself is constructed from itself.

console.log(Object.constructor === Function) // true
// This is ridiculous, where does the first Function come from????
console.log(Function.constructor === Function) // true

Let me give you a little more understanding. Maybe there is some processing done inside js. The first Function is created out of thin air. Then this Function constructs Object, and then this Object constructs the first prototype object Object.prototype, and then some reference relationships are modified.

In fact, the most complicated thing is the relationship between Object and Function

console.log(Object.__proto__ === Function.prototype) // true
console.log(Function.constructor === Function) // true
console.log(Function.__proto__ === Function.prototype) // true
console.log(Function.prototype.__proto__ === Object.prototype) // true

5.3 js inherited third-class citizens (other built-in constructors)

const arr = [
  String,
  Array,
  Boolean,
  Number,
  Date,
  RegExp,
  Error,
  Promise,
  Map,
  Set,
  Symbol,
  Proxy,
]
// All are constructed from Function

6 User-defined special citizen constructors

This is the key point. Based on the above understanding, I will write another article about my understanding of js inheritance. I will leave a pit here for now.

7. Conclusion

This article is different from most articles on the Internet that talk about constructor, prototype, and __proto__. My starting point is to start from a given value that can read a property. In js, except null and undefined, all other values ​​can be a starting point. From this starting point, its __proto__ property records its prototype object, which is the value of the prototype property of its constructor when it is constructed.

const a = 1
console.log(a.__proto__.constructor) // [Function: Number]

When reading the value of a property of a value, if it has this property itself, then the value of this property is returned directly, otherwise it will go to its __proto__ object to find it, and keep recursively going until it finds the top null. If it finds it, its value is returned, otherwise it returns undefined

There are three points of understanding in this article that made me suddenly enlightened. They are all conclusions I suddenly came to after a long period of experimentation.

1. Start your analysis with a value as a starting point
2. When constructing an instance, the instance __proto__ will point to the prototype of the constructor at that time
3. When looking for a prototype object, __proto__ is used as the basis

8. Last

This is the end of this article about js native syntax prototype, __proto__ and constructor. For more relevant js native syntax prototype, __proto__ and constructor content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!