Detailed code explanation of using primitive methods and factory methods to create JavaScript object instances

There is no concept of class in JS, but we can use the grammatical features of JS to create objects with the idea of ​​class.

Original method

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>

The above method generates an object through the new keyword, and then adds properties and methods according to the characteristics of JS as a dynamic language to construct an object. This is the object that calls the method. The problem with this approach is that if you need to create objects multiple times, you need to repeat the code multiple times, which is not conducive to code reuse.

Factory method

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

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

</script>

This method improves the code reuse rate, and you can also change the factory method and pass in parameter assignments.

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

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

</script>

Although the above method can improve the reuse rate of code, it has a big flaw compared with the concept of classes in object-oriented. Object-oriented emphasizes that the properties of objects are private, while the methods of objects are shared. When the above factory method creates objects, it must create its own private method for each object. At the same time, creating logically identical methods for each object wastes memory. The improvements are as follows

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

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

</script></span>

The above solves the private problem of different objects holding function objects by defining two function objects. Now all object methods hold references to the above two functions.

The above is the detailed content of Detailed code explanation of using primitive methods and factory methods to create JavaScript object instances. For more information, please follow other related articles on the PHP Chinese website!