Illustration of instance object and prototype object _ basics in JavaScript

Declare first: Each object in JavaScript has a constructor property and a prototype attribute. Constructor points to an object's constructor, prototype a prototype object that uses the object instance created with the constructor.

function person () { 
  
 } 
var person = new person (); 
 
Person.prototype = { 
 Constructor:person, 
 name: ' Zxs ', 
 age:24, 
 sayname:function () {alert (this.name) } 
  
person.sayname (); 

There is an error in this code, Sayname () is not defined. According to the second edition of the JavaScript Advanced programming, the rewrite prototype cuts off the connection between the constructor and the original prototype. But let's adjust the order of the above statements. As follows:

function person () { 
 } 
//var person = new Person (); 
Person.prototype = { 
 Constructor:person, 
 name: ' Zxs ', 
 age:24, 
 sayname:function () {alert (this.name) } 
/*===========================================================*/ 
var person = new person (); 
/*===========================================================*/ 
 person.sayname ();//Zxs 
alert ( Person.constructor)//function Object () {[native code]} or function person () {} depends on whether the blue statement is valid 

Notice the statement in the middle of the two-paragraph code above. Writing the code in the order of the second paragraph will output "Zxs", which shows that in the first case the error is not explained by the link between the constructor and the original.

Person.prototype = {} 

It's a way of defining objects, and the constructor property of each object in JavaScript defaults to the object constructor, and it's not hard to say that rewriting a prototype object does cut off the connection between the constructor and the original prototype. This does not mean that the person will not be able to access the Sayname () function after the connection has been severed.

Now there is the assumption that the prototype object that the prototype attribute of the function points to is not exactly equivalent to the new prototype object that we are displaying. When we call a function, we create a prototype object that first looks for the existence of its prototype object in the current environment, and if it does not exist in the program, create one, if the environment exists, the side looks for their properties and methods, and finally returns a prototype object based on the result of the lookup. The properties and methods in this object always take precedence over the properties and methods in the default prototype, which are the properties and methods defined in the constructor. The properties and methods defined in Person.prototype = {} are used when the invoked method or property does not exist in the default prototype.

JavaScript is an explanatory language, and statements are executed sequentially, and in the first code, when we create a new object using the newer keyword, person.prototype = {} is not executed, which means that the method and properties defined in the current execution environment are not found. There is no such method in the constructor, so there is an error. Just like a variable, assigning him a value when the program does not execute will not be used. In the second paragraph, the method of the call already exists in the environment, and the constructor's prototype object has been created so that the result can be obtained.

Look at the following procedure:

function person () {}/*================ 
===========================================*/var person = new person (); 
 
Person.prototype.name = ' song '; /*===========================================================*///person.prototype.sayname = function () {alert ( 
THIS.name)}; Person.prototype = {Constructor:person, name: ' Zxs ', age:24, Sayname:function () {alert (this.name)}} person.s Ayname (); Error//////////////////////////////////////////////////////////////////////////function person () {}/*var per  
son = new person (); */Person.prototype.name = ' song '; /*person.prototype.sayname = function () {alert (this.name)};*/Person.prototype = {constructor:person, name: ' Zxs ', age:24, Sayname:function () {alert (this.name)}}/*======================================================== 
 
===*/var person = new person (); /*===========================================================*/Person.sayname (); 
 Zxs

It can be seen from here that the use of Person.prototype.name = ', regardless of where the object is created can be accessed, if both the object literal and this method defines the prototype object, will be used as the final value of the definition. And after using the object literal definition for a prototype object, the definition must appear before the statement in which the object was created before it can be accessed.

Instances cannot access properties and methods in a prototype object, not least because rewriting a prototype object cuts off the relationship between the constructor and the original prototype.

function person () {  
    
  }  
var person = new person ();  
  
Person.prototype = {  
  //constructor:person,  
  name: ' Zxs ',  
  age:24,  
  sayname:function () {alert ( this.name)}  
    
person.sayname ();  

The preceding code, when instantiating an object, has a null prototype and does not have any properties other than the default property. The prototype of the rewrite constructor does sever the connection between the constructor and the original prototype.

The properties and methods in the prototype object of the constructor after using the new operator have been added to the person object. Because the methods above add new properties and methods to the function prototype are not dynamic, the person cannot access the newly added properties and methods.

After you rewrite the prototype object, it's like the following code:

var o = { 
  name: ' Zxs ' 
  } 
   
var obj = o; 
o = {} 
console.log (o.name);  

The value that is output at this time is undefined, because the object is a reference type, "=" is an assignment operator, and the order of operations is from right to left. o={} means that the point of O has changed and is an empty object. The difference between
Person.prototype.mothed = function () {} and Person.prototype={mothed:function () {}} is the same as Arr = [] and Arr.push (). The former is to modify itself, the latter is to completely change itself.