Details of the difference between prototype and prototype chain prototype and proto

Directory 1, Prototype 2, Prototype Chain 2.1 constructor Constructor 2.2 call/apply2.3 new ()

1. Prototype

The prototype is function Object, which defines the common ancestor of the constructor, that is, a parent-child relationship, and the child object inherits the methods and attributes of the parent object

prototype Is a property under the function, and the object wants to view the prototype using implicit properties __Proto__
constructor Point to constructor You have attributes on yourself, and you also have attributes on the prototype. Take the near ones 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

Under each instance object, there is a __proto__ Property, through the property __proto__ Point to the prototype object of the constructor, and when it reaches the end, return null, so that searching to the top layer by layer forms a prototype chain

prototype Is function-specific, __proto__ Is the object has, js Everything is an object in

prototype And prototype0 Difference and function

prototype Predefine common attributes for later objects to use prototype The existence of realizes inheritance and saves memory space __proto__ Is an object, prototype Is a function, because a function is also an object, so a function also has __proto__ ; __proto__ The function of is that when accessing the property of an object, if this property does not exist inside the object, it will follow its **__proto__** Property points to the object (parent object), that is, the prototype chain prototype The function is to let all the objects instantiated by the function find common properties and methods

The significance of __proto__ object prototype is to provide a direction, or a route, for the object lookup mechanism, but it is a non-standard attribute, so it can not be used in actual development, it only points to the prototype object prototype internally

2.1 constructor Constructor

constructor Property exists in the __proto__ And prototype That points to the constructor itself

1 In general, the methods of an object are set in the prototype object of the constructor. If there are methods of multiple objects, we can assign values to the prototype object as an object, but this will overwrite the original contents of the constructor prototype object, so that the modified prototype object constructor no longer points to the current constructor. At this point, we can add an constructor to the modified prototype object to point to the original constructor.

Problem: Modified the prototype object of the function. Who does constructor point to

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 //  In many cases , We need to use it manually constructor  This property refers to the   Original constructor 
 Star.prototype = {
 //  If we modify the original prototype object, , Assigning a value to the prototype object is 1 Objects , You must use it manually constructor Refers back to the original constructor 
   constructor: Star, //  Manually setting refers back to the original constructor 
   sing: function() {
     console.log(' I can sing ');
   },
   movie: function() {
     console.log(' I will act in movies ');
   }
}
var zxy = new Star(' Jacky Cheung ', 19);
console.log(zxy)

When modifying the function prototype, because Star.prototype Is one object, so constructor Point to the prototype that constructs this object, which is object

2.2 call/apply

Pass call``apply Can be changed this Point to, borrow other people's functions to complete their own functions

Difference: call Pass multiple parameters apply Pass an array of parameters

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);// Pass call Change this Point to this function 
    //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 1 empty object Constructor's this Inheritance function prototype Jean this Point to the object instance of the constructor, and execute the constructor content to add properties and methods to the new object Return this

var obj = {}// Create an empty object 
obj.__proto__ = Person.prototype;// Inheritance scope 
Person.call(obj,)// Change this Point 
// This 3 Step is implicit 
var person = new Person();//new Operation