Detailed explanation of JavaScript prototype and examples

The relationship between the constructor instance and prototype

1. Any function has a prototype property, which is an object

function F () {}
console.log(F.prototype) // => object
//Prototype object F.prototype.sayHi = function () {
  console.log('hi!')
}

2. The prototype object of the constructor has a constructor property by default, which points to the function where the prototype object is located.

console.log(F.constructor === F) // => true
//Indicates this

3. The instance object obtained through the constructor will contain a pointer to the prototype object of the constructor _proto_

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

This means that the instance object created by the current constructor contains a pointer inside, which is _proto_ , and then this pointer points to the prototype object of the constructor

Therefore, we can directly access the members on the prototype object using the instance

example:

instance.sayHi() // => print hi!

Notice

_proto_ is a non-standard attribute

Prototype Property

Javascript stipulates that every constructor has a prototype property that points to another object.
All properties and methods of this object will be inherited by instances of the constructor.

This means that we can define the properties and methods that all object instances need to share directly on the prototype object.

example:

function Person (name, age) {
  this.name = name
  this.age = age
}
console.log(Person.prototype) //Print prototype Person.prototype.type = 'human' //Mount human to the properties of the prototype object Person.prototype.sayName = function () { //You can also define functions console.log(this.name)
}
let p1 = new Person(...)
let p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true

We can see that the result printed by console.log(p1.sayName === p2.sayName) is true

This is because type attribute and sayName() method of all instances are at the same memory address, pointing to prototype object, thus improving the running efficiency.

Search principles for attributes or members

We know that multiple instance objects can share properties or members in the prototype object, so how is this sharing mechanism implemented in JS?

This has to mention the search principle of attributes

Whenever the code reads a property of an instance object, a search is performed for a property or member with the given name.

The search process is as follows:

1. Start the search from the object instance itself

2. If an attribute with a given name is found in the instance object, the value of the attribute is returned

3. If not found, continue searching for the prototype object pointed to by the pointer contained in the instance object (mentioned above), and look for the attribute with the given name in the prototype object

4. If this property is found in the prototype object, the value of the property is returned

When executing instance.sayName() , two searches are performed, the first search for the instance object and the second search for the prototype object.

Summarize

The above is the basic principle of multiple instance objects sharing the properties and methods mounted by the prototype!

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!