Javascript Object creation Summary (javascript advanced programming)
1. Factory Model
This mode abstracts the process of creating a specific object and uses functions to encapsulate specific interfaces to create classes.
function createStudent(name) { var o = new Object(); o.name = name; o.sayName = function() { alert(this.name); }; return o; } var student1 = createStudent("Tom");
Solved problems: solved the problem of creating multiple similar objects. Disadvantages: did not solve the problem of object recognition.
2. constructor Mode
function Student(name) { this.name = name; this.sayName = function() { alert(this.name); }; } var student1 = new Student("Tom"); var student2 = new Student("Suen");
To create a new instance of Student in this mode, you must use the new operator. The following steps are taken to call the constructor: (1) create a new object; (2) Assign the constructor scope to the new object (so this points to the new object ); (3) execute the code in the constructor (add attributes for the new object) (4) return the new object
Solution: for Object Recognition, you can use the constructor attribute and the instanceof operator to detect the object type:
alert(student1.constructor == Student) //true alert(student2 instanceof Object) //true alert(student2 instanceof Student) //true
Disadvantage: each method must be re-created on each instance. For example, in the preceding example, the sayName () of student1 and student2 are not instances of the same Function, which is unnecessary.
3. prototype mode
Each function we create has a prototype attribute, which is a pointer to an object. The purpose of this object is to include the attributes and Methods shared by all instances.
function Student() { } Student.prototype.name = "Tom"; Student.prototype.sayName = function(){ alert(this.name); }; var student1 = new Student("Tom"); var student2 = new Student("Suen"); alert(student1.sayName == student2.sayName); //true
Simpler prototype syntax: function Student () {} Student. prototype = {constructor: Student, name: "Tom", sayName: function () {alert (this. name );}};
Solution: All object instances share the prototype method and do not need to be re-created.
Disadvantage: It skips the parameter initialization for the constructor, so that all instances obtain the same attribute value by default. More seriously, attributes in the prototype are shared by many instances. Although you can add attributes with the same name in the instance, the problem is more serious for attributes that contain reference type values.
4. Combined use of the constructor mode and prototype mode
The constructor mode is used to define instance attributes, while the prototype mode defines methods and shared methods. Each instance has its own copy of the Instance attribute, and it also shares the reference to the method.
function Student(name) { this.name = name; this.roommates = ["John","Ben"]; } Student.prototype = { constructor : Student, sayName : function() { alert(this.name); } }; var student1 = new Student("Tom"); var student2 = new Student("Suen"); student1.roommates.push("Jim"); alert(student1.roommates); // "John, Ben, Jim" alert(student2.roommates); // "John, Ben"
This mode is the most widely used and highly recognized mode.