Catalog
Several common ways to create objects for js are:
2. Creating objects through new Object()
3. Creating Objects with Literal Quantity
4. Creating Objects Using Factory Mode
5. Creating objects through constructors
6. Creating Objects by Prototype Mode
7. Creating Objects by Prototype+Constructor
Several common ways to create objects for js are:
- {}
- new Object()
- Use Literal Quantity
- Factory Mode
- constructor mode
- prototype
- Constructor + Prototype Mode
There are also less commonly used methods, such as dynamic prototypes, parasitic constructors, and secure constructors.
1. Create objects through {}
demo1:
<script> 'use strict'; //Use strict mode /** Creating an object with {} is equivalent to a new Object(); **/ var o = {}; o.name = 'jack'; o.age = 20; o.sayName = function(){ alert(this.name); } alert(o.name+'-'+o.age); o.sayName(); </script>
This is convenient if the object does not need to be created repeatedly.
2. Creating objects through new Object()
demo2:
<script> 'use strict'; // Creating objects with new Object() var o = new Object(); o.name = "zhangsna"; o.sayName = function(){ alert(this.name); } o.sayName(); alert('o instanceof Object>>>>>>>>>>>'+(o instanceof Object));//true alert("typeof o >>>>> "+typeof o);//object </script>
3. Creating Objects with Literal Quantity
Object literal variables are a short form of object definition, for example:
<script> var person = { name: 'zhang', age:20} </script>
This is the literal equivalent of var person = {}; person.name='zhang'; person.age=20;
Summary: There are two problems with the first three ways to create objects: 1. Code redundancy; 2. Methods in objects cannot be shared, and methods in each object are independent.
4. Creating Objects Using Factory Mode
This method solves the problem of code redundancy in the first three ways by using a function to create objects and reduce duplicate code, but the problem that methods cannot be shared still exists.
demo4:
<script> 'use strict'; // Creating objects using factory mode // Define a factory method function createObject(name){ var o = new Object(); o.name = name; o.sayName = function(){ alert(this.name); }; return o; } var o1 = createObject('zhang'); var o2 = createObject('li'); //Disadvantages: call different methods or not //Benefits: Solves the previous code duplication problem alert(o1.sayName===o2.sayName);//false </script>
5. Creating objects through constructors
The so-called constructor is also a common function, but it is conventionally accepted that the name of a constructor is capitalized and the first letter of a common function is lowercase. Create objects from the new constructor.
demo5:
<script> 'use strict'; /** * Constructor Mode Create Object **/ function Person(name){ this.name = name; this.sayName = function(){ alert(this.name); }; } var p1 = new Person('zhang'); var p2 = new Person('li'); p1.sayName(); p2.sayName(); alert(p1.constructor === p2.constructor);//true alert(p1.constructor === Person);//true alert(typeof(p1));//object alert(p1 instanceof Object); //true alert(p2 instanceof Object); //trueb alert(p1.sayName===p2.sayName);//false </script>
Memory model:
From the memory model, you can see that the sayName function exists independently of each object, so the p1.sayName===p2.sayName result is false or there is no solution to the problem that cannot be shared.
6. Creating Objects by Prototype Mode
Each method has a prototype, and each prototype has a constructor that points to the method.
For instance:
function Animal(){} alert(Animal.prototype.constructor==Animal);//true
Prototype creation object:
demo6:
<script> 'use strict'; /* * Prototype pattern creation object */ function Animal() { } Animal.prototype.name = 'animal'; Animal.prototype.sayName = function () { alert(this.name); }; var a1 = new Animal(); var a2 = new Animal(); a1.sayName(); alert(a1.sayName === a2.sayName);//true alert(Animal.prototype.constructor);//function Animal(){} alert(Animal.prototype.constructor==Animal);//true </script>
Create objects through prototypes, bind properties and methods to prototypes, and create objects in this way, which is shared, and each object calls the same method.
Memory model:
If you add an attribute to a new object, it is placed in the object, and if there is an attribute with the same name as the prototype, the value of the prototype will not be changed. But when you access this property, you get the value of the object.
Order of access: object itself > prototype of constructor
If the property is not present in the object, access the prototype, and if not in the prototype, continue to access the parent until the Object, and if not, return undefined
demo7:
<script> 'use strict'; /* * Prototype pattern creation object */ function Animal() { } Animal.prototype.name = 'animal'; Animal.prototype.sayName = function () { alert(this.name); }; var a1 = new Animal(); var a2 = new Animal(); a1.sayName(); alert(a1.sayName === a2.sayName);//true alert(Animal.prototype.constructor);//function Animal(){} //Modify a2.name, a1 name will not change a2.name = 'dog'; a2.sayName();//dog a1.sayName();//animal </script>
Memory model:
Objects created this way have problems. If a prototype contains a property of a reference type, if an object modifies the value of that property, the value accessed by all the objects created by the prototype changes.
demo8:
<script> 'use strict'; //Prototype Mode 2 //Problem: If the prototype contains a reference type function Animal (){} Animal.prototype = { name: 'animal', friends: ['dog','cat'], sayName: function(){ alert(this.name); } }; var a1 = new Animal(); var a2 = new Animal(); a2.friends.push('snake'); alert(a2.friends);//[dog,cat,snake] alert(a1.friends);//[dog,cat,snake] </script>
Memory model:
7. Creating Objects by Prototype+Constructor
This method combines the above two methods to solve the problem of code redundancy, methods cannot be shared, and reference types changing values.
demo9:
<script> 'use strict'; function Animal(name){ this.name = name; this.friends = ['dog','cat']; } Animal.prototype.sayName = function(){ alert(this.name); }; var a1 = new Animal('d'); var a2 = new Animal('c'); a1.friends.push('snake'); alert(a1.friends);//[dog,cat,snake] alert(a2.friends);//[dog,cat] </script>
Memory model: