Examples of several ways to create objects in js
- 2020-03-30 01:27:55
- OfStack
Everything in JavaScript is an object: strings, arrays, values, functions, etc. There's no class concept in JS,
But we can use the syntax of JS to create objects in the idea of a class.
The original method
The above method generates an object through the new keyword, and then adds properties and methods, constructs, according to the nature of JS being a dynamic language
Make an object. Where this represents the object that called the method.
The problem with this approach is that if you need to create the object multiple times, you need to repeat the code multiple times, which is not conducive to code reuse.
The factory method
This approach increases the rate of code reuse and allows you to change factory methods to pass in parameter assignments.
Although the above approach can improve the reuse rate of the code, it has a big disadvantage compared with the concept of classes in object orientation. surface
Phase objects emphasize that the properties of the object are private, while the methods of the object are Shared. The factory method above creates the object for each
Objects create their own private methods. It also wastes memory by creating logically identical methods for each object. Improve the following
The above solves the problem of private ownership of function objects by defining contiguous function objects. Now all the methods of the object are
Holds references to the above two functions. But then the function of the object becomes independent of the object. This and
The idea that a particular method belongs to a particular class in object orientation is not consistent.
Constructor mode
Constructors are created in the same way as factories, creating exclusive function objects for each object. And of course you can also combine these functions
Objects are defined outside the constructor, which again raises the issue of object and method independence.
Prototype method: this method exploits the prototype property of the object
Prototype's properties are assigned to new objects when the Person object is generated. Then the properties and methods are Shared.
The first problem with this method is that the constructor cannot pass arguments, and each newly generated object has a default value. Second, method sharing does not
Anything, but property sharing is problematic when properties are mutable state objects.
When the above code adds an element to obj1's attribute array via obj1, the element of obj2's arra attribute receives an element
Because the array properties of obj1 and obj2 objects refer to the same array object, so change the array
Object, another attribute that references the Array object will also be affected
Hybrid constructor/prototype approach
You can do this by using constructors to define the properties of the object and using prototypes to define the methods of the object
Private, and methods Shared.
When properties are private, changing their properties does not affect other objects. Methods are also Shared by individual objects. Semantically,
This meets the requirements of surface object programming.
Dynamic prototyping method
This approach is much the same as the constructor/prototype approach. It just adds the method to the constructor and builds it at the same time
A property has been added to the function Person to ensure that the if statement is executed only once
The most widely used method in practice is the constructor/prototype method. The dynamic prototyping approach is also popular, both functionally and constructively
The function/prototype method is equivalent. Do not use constructors or prototype methods alone.
But we can use the syntax of JS to create objects in the idea of a class.
The original method
<script type="text/javascript">
var obj = new Object();
obj.name = "Koji"; //Add properties to the object
obj.age = 21;
obj.showName = function(){ //Add methods to the object
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, constructs, according to the nature of JS being a dynamic language
Make an object. Where this represents the object that called the method.
The problem with this approach is that if you need to create the object multiple times, you need to repeat the code multiple times, which is not conducive to code reuse.
The factory method
<script type="text/javascript">
function createObj(){
var obj = new Object(); //Create an object
obj.name = "Koji";
obj.age = 21;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //Returns the object
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName(); //Koji
obj2.showAge(); //21
</script>
This approach increases the rate of code reuse and allows you to change factory methods to pass in parameter assignments.
<script type="text/javascript">
function createObj(name, age){ //Initialization parameters can be passed when an object is constructed
var obj = new Object(); //Create an object
obj.name = name;
obj.age = age;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //Returns the object
}
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 approach can improve the reuse rate of the code, it has a big disadvantage compared with the concept of classes in object orientation. surface
Phase objects emphasize that the properties of the object are private, while the methods of the object are Shared. The factory method above creates the object for each
Objects create their own private methods. It also wastes memory by creating logically identical methods for each object. Improve the following
<span style="font-size:14px;"><script type="text/javascript">
function createObj(name, age){
var obj = new Object(); //Create an object
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj; //Returns the object
}
function showName(){ //A function is also an object
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 problem of private ownership of function objects by defining contiguous function objects. Now all the methods of the object are
Holds references to the above two functions. But then the function of the object becomes independent of the object. This and
The idea that a particular method belongs to a particular class in object orientation is not consistent.
Constructor mode
<script type="text/javascript">
//Defines a constructor to generate the corresponding object, analogous to a constructor in Java
function Person(name, age){
//When a new Person is called, a Person object is formed and placed in memory before the first line of code is executed
//The index is assigned to this keyword, through which the newly generated object can be manipulated, adding properties or methods as follows
this.name = name; //This keyword can not be less. Assigns a value to the name attribute of the object referenced by the current object, this keyword
//, which is equivalent to adding a name attribute to the current object and then assigning a value to its name attribute.
this.age = age;
this.showName = function(){ //Add a method to the current object
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
//Returns the current object to the variable to the left of the assignment (not explicitly using return)
}
var obj1 = new Person("Koji", 22); //Generate a Person object
var obj2 = new Person("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
</script>
Constructors are created in the same way as factories, creating exclusive function objects for each object. And of course you can also combine these functions
Objects are defined outside the constructor, which again raises the issue of object and method independence.
Prototype method: this method exploits the prototype property of the object
script type="text/javascript">
function Person(){} //Defines an empty constructor and cannot pass arguments
//Assign all methods to the prototype property
Person.prototype.name = "Koji"; //Add attributes
Person.prototype.age = 22;
Person.prototype.showName = function(){ //Add methods
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
var obj1 = new Person(); //Generate a Person object
var obj2 = new Person();
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji
obj2.showAge(); //22
</script>
Prototype's properties are assigned to new objects when the Person object is generated. Then the properties and methods are Shared.
The first problem with this method is that the constructor cannot pass arguments, and each newly generated object has a default value. Second, method sharing does not
Anything, but property sharing is problematic when properties are mutable state objects.
<script type="text/javascript">
function Person(){} //Defines an empty constructor and cannot pass arguments
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(); //Generate a Person object
var obj2 = new Person();
obj1.array.push("Kyo"); //Add an element to the array attribute of obj1
obj1.showArray(); //Koji,Luo,Kyo
obj2.showArray(); //Koji,Luo,Kyo
</script>
When the above code adds an element to obj1's attribute array via obj1, the element of obj2's arra attribute receives an element
Because the array properties of obj1 and obj2 objects refer to the same array object, so change the array
Object, another attribute that references the Array object will also be affected
Hybrid constructor/prototype approach
You can do this by using constructors to define the properties of the object and using prototypes to define the methods of the object
Private, and 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); //Generate a Person object
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //Add an element to the array attribute of obj1
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
</script>
When properties are private, changing their properties does not affect other objects. Methods are also Shared by individual objects. Semantically,
This meets the requirements of surface object programming.
Dynamic prototyping method
<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
//If the _initialized in the Person object is undefined, no method has been added for the Person stereotype
if (typeof Person._initialized == "undefined")
{
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
Person._initialized = true; //Set to true, and you don't need to add methods to prototype
}
}
var obj1 = new Person("Koji", 22); //Generate a Person object
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //Add an element to the array attribute of obj1
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
</script>
This approach is much the same as the constructor/prototype approach. It just adds the method to the constructor and builds it at the same time
A property has been added to the function Person to ensure that the if statement is executed only once
The most widely used method in practice is the constructor/prototype method. The dynamic prototyping approach is also popular, both functionally and constructively
The function/prototype method is equivalent. Do not use constructors or prototype methods alone.