Examples of instance objects and prototype objects in JavaScript_Basic knowledge

First of all, declare: Every object in JavaScript has a constructor attribute and a prototype attribute. constructor points to the object's constructor, 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(); 

An error will be reported in this code, sayName() is not defined. According to JavaScript Advanced Programming Second Edition, it is because the overridden 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() {} 取决与蓝色的语句是否有效 

Pay attention to the statements between the equal signs in the two pieces of code above. If you write the code in the order of the second paragraph, "zxs" will be output. This result shows that the error reported in the first case does not mean that it is caused by cutting off the connection between the constructor and the original idea.

Person.prototype = ｛｝ 

It is originally a way to define objects, and the constructor property of each object in JavaScript points to the Object constructor by default. This is not difficult to show that rewriting the prototype object does cut off the connection between the constructor and the original prototype. connection, but it does not mean that person cannot access the sayName() function after this connection is severed.

Now there is this assumption: the prototype object pointed to by the prototype attribute of the function is not exactly the same as the prototype object we display to create a new one. When we call a function, a prototype object will be created. At this time, we will first check whether its prototype object exists in the current environment. If it does not exist in the program, create one. If it exists in the environment, we will search for their properties and methods. Finally, A prototype object is returned based on the search result. The properties and methods in this object always use the properties and methods in the default prototype first, that is, the properties and methods defined in the constructor. When the called method or property does not exist in the default prototype, the properties and methods defined in Person.prototype = {} are used.

Javascript is an interpreted language, and statements are executed sequentially. In the first piece of code, when we use the new keyword to create a new object, Person.prototype = {} is not executed, which means that The methods and properties defined in it cannot be found in the current execution environment, and the method does not exist in the constructor, so an error occurs. Just like a variable, it cannot be used when the program is not executed when assigning a value to it. In the second paragraph, the called method already exists in the environment, and the prototype object of the constructor has been created, so the result can be obtained.

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 

It can be seen from here that using Person.prototype.name = '', the object can be accessed no matter where it is created. If there is both an object literal and a prototype object defined by this method, the later defined object will be used. as final value. And after using an object literal definition for a prototype object, the definition must appear before the statement that creates the object before it can be accessed.

Instances cannot access properties and methods in the prototype object, not least because overriding the prototype object cuts off the connection 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 prototype of the constructor in the above code is empty when instantiating the object, and it does not have any properties other than the default properties. Overriding the constructor's prototype does sever the connection between the constructor and the original prototype.

After using the new operator, the properties and methods in the prototype object of the constructor have been added to the person object. Because the above method is not dynamic in adding new properties and methods to the function prototype, person cannot access the newly added properties and methods.

After rewriting the prototype object, it is like the following code:

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

The output value at this time is undefined, because the object is a reference type, "=" is the assignment operator, and the order of operations is from right to left. o={} means that the pointing 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 modifies itself, while the latter modifies itself. Completely transform yourself.