This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

In the last year or two I have been immersed in developing projects using frames, various wheels. From time type conversion to UI and rich text components, you can find a suitable and easy to use wheel to implement. The use of ready-made wheels can greatly improve the efficiency of development and reduce the occurrence of bugs. After all, the number of users of mature wheels is still large, and it is very reassuring to have a large number of users tested and used. People will always become lazy at ease (of course, mainly refers to myself), use too much wheel development, will cause some basic knowledge forgotten, so today review JS compare the basic prototype and prototype chain. And, of course, in advance of the bucket day.

The constructor

Constructors are functions that create objects. Constructors must start with a capital letter and must be called with new. Functions that are not called with new are normal functions

function Person(name, age) {
     this.name = name
     this.age = age
     this.setName = function() {
         console.log(this.name)
     }
}
let person1 = new Person('susu'.14)
let person2 = new Person('yu')
Copy the code

So what does new actually do

  1. An empty object is created
  2. This is going to point to this empty object
  3. The built-in properties of an object_proto_Points to the function object’s Prototype property
  4. Return the object to which this refers

In the above code, Person1 and Person2 are both instances of Person. Both instances have the constructor property, and both point to Person. In other words, the instance’s constructor property points to its constructor, which is a property of the object

Thus, constructor can also be used to determine the type of an object (similar to instanceof)

person1(person2).constructor == Person
person1(person2).constructor == Object Person1 and Person2 are also instances of Object because objects inherit from Object
Copy the code

prototype

Prototype is the basic property that is included when a function object is created. It is unique to the function. The prototype property can be used to add properties and methods to existing objects.

thenprototypeWhat are they mainly used for?

Prototype makes it possible for an instance of an object to share all of the prototype properties and methods.

function Person() {}

Person.prototype.name = 'lucy'
Person.prototype.age = 22
Person.prototype.sayName = function() {
    console.log(this.name);
}

let person1 = new Person()
person1.sayName() / / output 'Lucy'
let person2 = new Person()
person2.sayName() / / output 'Lucy'

person1.sayName == person2.sayName
Copy the code

A prototype object

The prototype property of a function object refers to the function’s prototype object

Typically, prototype objects have a constructor property (constructor) that points to the function in which the prototype resides

Person.prototype.constructor == Person
Copy the code

The constructor property of the instance points to the constructor

person1.constructor == Person
Copy the code

_proto_

_proto_ is a built-in property of an object created by js. It is a property of the object that points to the prototype object that created its constructor

person1._proto_ == Person.prototype
Copy the code

then_proto_What are they mainly used for?

We can actually think of _proto_ as the link that connects the prototype chain. When we visit the attribute of an object, if there is no this property, then _proto_ will go to the points of objects (that is, the superior object) to find, if this property does not exist in the upper object, will continue to object to the superior _proto_ attribute points to the object to look for, if haven’t found, would have been up for, Until null at the end of the prototype chain

Prototype chain chestnut

function Person() {}
let person1 = new Person()
Copy the code

person1._proto_ == Person.prototype

Person1's _proto_ equals person1's prototype person1.constructor == PersonCopy the code

Person.prototype._proto_ == Object.prototype

Person.prototype is a prototype Object, which is also a normal Object, namely object.prototypeCopy the code

Object.prototype._proto_ == null

The _proto_ property of an object. prototype Object is null, and NULL is the top of the prototype chainCopy the code

Person._proto_ == Function.prototype

The '_proto_' of the Function object points to function.prototypeCopy the code

Function.prototype._proto_ == Object.prototype

Js everything is an objectCopy the code

Object.prototype._proto_ == null

The _proto_ property of an object. prototype Object is null, and NULL is the top of the prototype chainCopy the code

The place that the article has inadequacy still asks everyone to give advice a lot!