JSprototype object usage tutorial

This time I will bring you a tutorial on how to use the JSprototype object. What are the precautions when using the JSprototype object? The following is a practical case, let’s take a look.

We solved the problem of method sharing among multiple instances through prototype. Next, we will figure out the ins and outs of prototype and prototype chain.

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

1. Each function has a prototype attribute (prototype). This attribute is a pointer pointing to the prototype object (CreateObj.prototype) of the constructor, as shown in the figure above. 1 green thread

2. By default, all prototype objects will automatically obtain a constructor attribute. The function of this attribute has been explained above. This attribute contains a function pointing to the prototype attribute, such as the second green line in the figure above

3. All instances (through the constructor new, prototype objects [such as CreateObj.prototype, I haven’t drawn the above picture], etc.) contain an implicit prototype (proto), which points to Prototype object of the instance's constructor,

As shown in the third and fourth lines in the picture above. The constructor of obj1 is CreateObj, and the prototype object of CreateObj is CreateObj.prototype. The same is true for obj2, so:

obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4. Write in the constructor, the attributes and methods that assign a value to this. During the drawing process, draw them on the object. For example, userName is an attribute assigned to the object, so in obj1 and obj2 There will be an attribute userName

on both objects. 5. Methods or attributes written on the prototype object should be drawn on the prototype object, such as

CreateObj.prototype.showUserName = function(){
return this.userName;
}

The showUserName method should be drawn above CreateObj.prototype in the picture

6. When an object accesses properties and methods, its access rules are called (proximity principle). The rules are as follows:

When there are attributes or methods on the instance, use the ones on the instance directly,

If there are no properties or methods on the instance, the search will continue along the prototype object pointed to by the instance's proto pointer. If not found, the value will be undefined.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

The showUserName method does not exist on obj1 and obj2, so you will follow the proto to find the showUserName method

on the CreateObj.prototype prototype object. If you comment out showUserName on the CreateObj.prototype prototype object, then obj1.showUserName and obj2.showUserName will report errors

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

If you add a showUserName method to this in the constructor, then obj1 and obj2 will directly call this, because these two methods will be drawn on the instance in the picture, so:

console.log( obj1.showUserName === obj2.showUserName ); //false

Now, you should be able to understand the principle of sharing the properties and methods of multiple instances by writing them on the prototype object of the constructor.

What is a prototype chain?

Earlier, I said that all instances (including prototype objects) have an implicit prototype proto, so who does the prototype object of CreateObj.prototype point to?

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }
  console.log( CreateObj.prototype.proto ); //指向Object.prototype
  console.log( CreateObj.prototype.proto === Object.prototype ); //true

CreateObj.prototype.proto points to Object.prototype, which is true after passing the congruenceoperator (===) test

Object.prototype.proto points to NULL

This is the prototype chain. Some constructors are strung together layer by layer through implicit prototypes. From the above picture, you can see why custom objects can call toString, valueOf, and other methods, right?

Because all objects are inherited from Object.

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:

react-router4.0 implements redirection and 404 functions

js steps to set element style Detailed explanation

#Summary of JS implementation sorting method

The above is the detailed content of JSprototype object usage tutorial. For more information, please follow other related articles on the PHP Chinese website!