Prototype and prototype chain prototype and proto details

1. Prototype

The prototype is a property under function object. It defines the common ancestor of the constructor, that is, a parent-child relationship. The child object will inherit the methods and properties of the parent object.

• prototype is a property of a function. If an object wants to view its prototype, it uses the implicit property __Proto__

• constructor points to the constructor
• You have attributes, and the prototype also has attributes. Take the closest one and use your own
  

By adding properties to the prototype, all instantiated objects can share properties and methods

Car.prototype = {
 height : 1400,
 lang : 4900,
 carName : 'BMW'
}
function Car() {
}
var car = new Car();

2. Prototype chain

Each instance object has a __proto__ attribute, which points to the prototype object of the constructor through the attribute __proto__ . When it reaches the end, it returns null, and searches layer by layer to the top to form a prototype chain.

prototype is unique to functions, __proto__ is unique to objects, and everything in js is an object

prototype and ——proto—— difference and function

• prototype predefines common properties for later objects to use
• The existence of prototype realizes inheritance and saves memory space
• __proto__ is for objects, prototype is for functions, because functions are also objects, so functions also have __proto__ ;
• The function of __proto__ is that when accessing the property of an object, if the property does not exist inside the object, it will be searched in the object (parent object) pointed to by its **__proto__** property, which is the prototype chain.
• The role of prototype is to allow objects instantiated by the function to find common properties and methods

The significance of the __proto__ object prototype is to provide a direction, or a route, for the object's search mechanism, but it is a non-standard attribute, so in actual development, this attribute cannot be used. It only points to the prototype object prototype internally.

2.1 Constructor

constructor property exists in __proto__ and prototype , which points to the constructor function itself

Generally, the methods of an object are set in the prototype object of the constructor. If there are multiple object methods, we can assign values ​​to the prototype object in object form, but this will overwrite the original content of the constructor prototype object, so the modified prototype object constructor will no longer point to the current constructor. At this point, we can add a constructor to the modified prototype object to point to the original constructor.

Question: After modifying the prototype object of the function, who does the constructor point to?

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 // In many cases, we need to manually use the constructor property to point back to the original constructor Star.prototype = {
 // If we modify the original prototype object and assign an object to the prototype object, we must manually use constructor to point back to the original constructor constructor: Star, // Manually set to point back to the original constructor sing: function() {
     console.log('I can sing');
   },
   movie: function() {
     console.log('I can act in movies');
   }
}
var zxy = new Star('Jacky Cheung', 19);
console.log(zxy)

When modifying the function prototype, because Star.prototype is an object, constructor points to the prototype that constructs this object, that is, object

2.2 call/apply

By using call``apply you can change the direction of this and use other people's functions to complete your own functions.

Difference: call passes multiple parameters, apply passes a parameter array

function Person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name,age,sex,tel,grade) {
    //var this = {name: "lin", age: "19", sex: "male", tel: 123, grade: 78}
    Person.call(this,name,age,sex);//Change this to point to this function through call//Person.apply(this,[name,age,sex])
    this.tel = tel;
    this.grade = grade;
}
var student = new Student('lin','19','male',123,78);

2.3 new()

• Create an empty object
• this of the constructor function inherits the function prototype
• Let this point to the object instance of the constructor, and execute the constructor to add properties and methods to the new object
• Return this
  

var obj = {} //Create an empty object obj.__proto__ = Person.prototype; //Inherited scope Person.call(obj,) //Change this pointer //These three steps are implicit var person = new Person(); //new operation

This is the end of this article about the details of the difference between prototype and prototype chain prototype and proto. For more relevant content about the difference between prototype and prototype chain prototype and proto, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!