Example and prototype objects in JavaScript are illustrated

First, declare that every object in javascript has 1 constructor attribute and 1 prototype attribute. constructor points to the constructor of the object, and prototype points to the prototype object of the object instance created using the constructor.

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

In this code, it will report an error, sayName() is not defined. According to javascript Advanced Programming Version 2, this is because the rewritten prototype severes the link 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 statement in blue is valid  

Notice the statement in the middle of the equals sign in the two pieces of code above. Writing the code in the same order as in paragraph 2 will output "zxs", which means that reporting an error in case 1 does not mean that the constructor has been severed from the original intention.

Person.prototype =  {}  

It is a way to define objects, and in javascript the constructor property of every object points to the Object constructor by default. This means that rewriting the prototype object does break the link between the constructor and the original prototype, but it does not mean that ES24en cannot access the sayName() function once the link is broken.

It is now assumed that the prototype object pointed to by the prototype property of the function is not exactly the same as the prototype object we display. When we call a function to create a prototype object, at first looks up the current environment, the existence of its prototype object, if the program does not exist, create one, if the environment, exist in the side to find their attributes and methods, according to the search results returned a prototype object, the object properties and methods are always use the default priority of prototype of properties and methods, namely the constructor defined in the properties and methods. The properties and methods defined in Person.prototype = {} are used when the method or property being called does not exist in the default stereotype.

javascript is an interpreted language. Statements are executed in sequence. In the first section of code, when we create a new object using the new keyword, Person.prototype = {} is not executed, which means that we cannot find the method and properties defined in the current execution environment. Like a variable, it cannot be used if the program does not execute the value assigned to it. In paragraph 2, the method for the call already exists in the environment, and the constructor prototype object has been created, so you can get the result.

Let's look at the following program:

////////////////////////////////////////////////////////////////////////// 
 
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.sayName(); // error 
 
////////////////////////////////////////////////////////////////////////// 
 
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)} 
} 
 
/*===========================================================*/ 
var person = new Person(); 
 
/*===========================================================*/ 
person.sayName(); // zxs 

Person.prototype.name = ", is accessible wherever the object is created. If both the object literal and the prototype object are defined in this method, the value defined later will be used as the final value. And after using the object literal definition for the prototype object, the definition must appear before the statement that created the object before it can be accessed.

Instances do not have access to properties and methods in the prototype object, not least because overriding the prototype object disconnects the constructor from 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 above code instantiates the object with an empty constructor prototype that does not have any properties other than the default properties. Overwriting the constructor prototype does break the link between the constructor and the original prototype.

The properties and methods in the constructor's prototype object have been added to the person object after using the new operator. Because the above method is not dynamic in adding new properties and methods to the function prototype, person does not have access to the newly added properties and methods.

After overriding the prototype object, it looks like this:

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

The output value is undefined, because the object is a reference type, the "=" is the assignment operator, and the order of operations is from right to left. o={} means that the reference to o has been changed and is an empty object.
Person.prototype.mothed = function() {} and Person.prototype={mothed:function(){}} are similar to arr = [] and arr.push()1.