Detailed code explanation of using constructor method to create JavaScript object class instance

Constructor method

<script type="text/javascript"> 
//定义一个构造函数，用来生成对应的对象，可以类比Java中的构造函数 
function Person(name, age){ 

//当调用new Person的时候，在执行第一行代码前，先生成一个Person对象，并将对象在内存中的 
//索引赋值给this关键字，此时可以通过this关键字操作新生成的对象，如下面的添加属性或方法 

this.name = name; //this关键字不能少。为当前对象，即this关键字引用的对象的name属性赋值 
//，实际相当于为当前对象添加name属性后,再为其name属性赋值。 
this.age = age; 

this.showName = function(){ //为当前对象添加方法 
alert(this.name); 
} 
this.showAge = function(){ 
alert(this.age); 
} 

//将当前对象返回给赋值符号左边的变量（不必明确使用return） 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>

The constructor method is the same as the factory method, and will create an exclusive function object for each object. Of course, these function objects can also be defined outside the constructor, so that the object and method are independent of each other. Prototype method: This method uses the prototype attribute of the object

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数，且不能传递参数 

//将所有的属性的方法都赋予prototype属性 

Person.prototype.name = "Koji"; //添加属性 
Person.prototype.age = 22; 

Person.prototype.showName = function(){ //添加方法 
alert(this.name); 
} 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Koji 
obj2.showAge(); //22 

</script>

When the Person object is generated, the prototype attributes are assigned to the new object. Then the properties and methods are shared. The first problem with this method is that the constructor cannot pass parameters, and each newly generated object has a default value. Secondly, there is no
any problem with method sharing, but there is a problem with attribute sharing when the attribute is an object that can change its state.

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数，且不能传递参数 

Person.prototype.age = 22; 
Person.prototype.array = new Array("Koji", "Luo"); 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

Person.prototype.showArray = function(){ 
alert(this.array); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj2.showArray(); //Koji,Luo,Kyo 

</script>

When the above code adds elements to obj1's attribute array through obj1, the elements of obj2's array attribute are also affected. The reason is that the array attributes of obj1 and obj2 objects refer to the same Array object. , then changing this Array object will naturally affect the properties of another reference to the Array object

Mixed constructor/prototype method

Use the constructor to define the properties of the object, and use the prototype ( prototype) defines the methods of the object, so that the properties can be private and the methods shared.

<script type="text/javascript"> 
function Person(name, age) { 
this.name = name; 
this.age = age; 
this.array = new Array("Koji", "Luo"); 
} 

Person.prototype.showName = function() { 
alert(this.name); 
} 

Person.prototype.showArray = function() { 
alert(this.array); 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj1.showName(); //Koji 
obj2.showArray(); //Koji,Luo 
obj2.showName(); //Luo 

</script>

After the attributes are private, changing their respective attributes will not affect other objects. At the same time, methods are also shared by various objects. Semantically, this conforms to the requirements of object-oriented programming.

The above is the detailed content of Detailed code explanation of using constructor method to create JavaScript object class instance. For more information, please follow other related articles on the PHP Chinese website!