Home >Web Front-end >JS Tutorial >How to create objects
1. Use Object to create objects
var person = new Object(); person.name = "Nicholas"; person.age = "29"; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name); }; //对象字面量写法 var person = { name: "Nicholas", age: "29", job: "Software Engineer", sayName: function(){ alert(this.name); } };
Disadvantages: Using the same interface to create many pairs of objects will produce a lot of duplicate code.
2. Factory pattern
function createPerson (name, age , job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("Nicholas", "29", "Software Engineer"); var person2 = createPerson("Greg", "27", "Doctor");
Disadvantages: Unable to identify the type of object.
3. Constructor pattern
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } //构造函数使用new操作符来调用 var person1 = new Person("Nicholas", "29", "Software Engineer"); var person2 = new Person("Greg", "27", "Doctor");
Disadvantages: Each method must be recreated on the instance
//不同实例上的同名函数是不相等的 alert(person1.sayName == person2.sayName); //false //可以把函数定义转移到构造函数外来解决这个问题 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName() { alert(this.name); }
4. Prototype pattern
Every function we create has a prototype (prototype) attribute, this attribute is A pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type.
function Person() { } Person.prototype.name = "Nicholas"; Person.prototype.age = "29"; Person.prototype.job = "Software Engineer"; Person.prptptype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true
//更简单的原型语法 function Person() { } Person.prototype = { constructor : Person, //以对象字面量形式创建新对象,constructor不再指向Person,在此特意设置为Person name : "Nicholas", age : "29", job : "Software Engineer", sayName : function () { alert(this.name); } };
Prototype and instance are related to each other through the prototype and constructor attributes.
When the code reads the attributes of an object, it first retrieves the instance and then retrieves the prototype of the instance, so the attributes of the instance will overwrite the attributes of the prototype.
Reprototyping the object will cut off the connection between the prototype and the instance, but modifying the prototype object will not.
Disadvantages: instances cannot have their own properties
5. Combined use of constructor pattern and prototype model
//构造函数模式用于定义实例属性 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friend = ["Shelby", "Court"]; } //原型模式用于定义方法和共享属性 Person.prototype = { constructor : Person; sayName : function() { alert(this.name); } }
6. Dynamic prototype pattern, parasitic constructor pattern, secure constructor pattern