JavaScript Object Creation Mode

JavaScript Object Creation Mode

ECMA-262Define the object:A set of unordered attributes, which can contain basic values, objects, or functions..

Each attribute or method of an object has a name, and each name is mapped to a value. Therefore, you can think of an ECMAScript object as a hash, that is, a group of name-value pairs, the value can be data or function.

Each object is created based on a reference type.

First, let's take a look at the early object Creation Mode:

1. Creating an Object based on an Object is the easiest way to create a custom Object.

var person=new Object();person.name="singsong";person.age=23;person.info=function(){   alert("name: "+this.name +"  "+"age: "+this.age);};

2. Create an object literally

var person={name:"singsong",age:23,info:function(){   alert("name: "+this.name +"  "+"age: "+this.age);}};

Although the Object constructor or Object literal can be used to create a single Object, there is an obvious disadvantage in these methods: using the same interface to create many objects will produce a lot of repeated code. To solve this problem, you can use a variant of the factory model.

3. The factory mode abstracts the process of creating a specific object. Considering that classes cannot be created in ECMAScript, developers will invent a function to encapsulate the details of object creation using a specific interface.

Function createPerson (name, age) {var o = new Object (); o. name = name; o. age = age; o.info = function () {alert ("name:" + this. name + "" + "age:" + this. age);} return o;} // generates an object. Var person = createPerson ("singsong", 23 );

Although the factory mode solves the problem of creating multiple similar objects, it does not solve the problem of object recognition, that is, how to know the type of an object ). With the development of javaScript, there is a new mode-constructor Mode

4. constructor Mode

function Person(name, age) {  this.name = name;  this.age = age;  this.info = function() {    alert("name: " + this.name + "  " + "age: " + this.age);  };}var person = new Person("singsong", 23);

Differences between the constructor mode and the factory mode:

• The Person () function replaces the createPerson () function;

• No explicit Object creation, I .e. var o = new Object (););

• Attributes and methods are directly assigned to this object;

• No return statement;

• Constructor mode. To create a Person instance, you must use the new operator;

Note: The first letter of the function name Person is an upper-case P. According to the Convention, the constructor should always start with an upper-case letter, rather than a lower-case letter. This practice is based on other OO languages, mainly to distinguish it from other functions in ECMAScript, because the constructor itself is also a function and is only used to create objects.

Perform the following four steps to create a new instance in the constructor mode:

• Create a new object;

• Assign the constructor scope to the new object. this points to the new object );

• Execute the code in the constructor to add attributes for the new object );

• Returns the new function;

Back to the question: how can we identify the object type in the constructor mode?

All new instances created using constructors have a constructor attribute pointing to Person.

Alert(person.constructor==Person); //true;

The constructor attribute of an object is initially used to identify the object type. However, the instanceof operator must be more reliable when it comes to object types. Person is both an Object instance and an instance of Person.

Alert(person  instanceof  Person); //true;Alert(person  instanceof  Object); //true;

Creating a custom constructor means that its instance can be identified as a specific type in the future, and this is where the constructor mode is better than the factory mode. The constructor defined in this way is defined in the Global Object window object.

Although the constructor mode is easy to use, it does not have no disadvantages. The main problem with using constructor is that each method must be created on each potential instance,

5. Prototype

Each created function has a prototype attribute. This attribute is a pointer pointing to an object, the purpose of this object is to include attributes and methods that can be shared by all instance types of a specific type.

Function Person () {} Person. prototype. name = "singsong"; Person. prototype. age = 23; Person.prototype.info = function () {alert ("name:" + this. name + "" + "age:" + this. age) ;}; var personOne = new Person (); var personTwo = new Person (); personOne. name = "Tom"; alert (personOne. name); // Tom comes from the instance alert (personTwo. name); // singsong comes from the prototype

The hasOwnPrototype method can be used to check whether an attribute exists in the instance or in the prototype. Because this method is inherited from the Object, true is returned only when the specified attribute exists in the Object instance.

Alert (personOne. hasOwnProperty ("name"); // from instance true alert (personTwo. hasOwnProperty ("name"); // from the prototype falsedelete personOne. name; // delete the name attribute alert (personTwo. hasOwnProperty ("name"); // false

Disadvantages of the prototype mode: It skips the process of passing initialization parameters for the constructor. As a result, all instances obtain the same attribute value by default. All attributes in the prototype are shared by many instances. This type of attribute is very suitable for functions and can be used to describe attributes that contain basic values. You can add an attribute with the same name on the instance to hide the corresponding attribute in the prototype. However, for an attribute that contains a reference type value, it points to the same pointer.

6. Combined use of the constructor mode and prototype mode

This combination mode is the most common way to create custom types. The constructor mode is used to define instance attributes, while the prototype mode is used to define methods and shared attributes.

  function Person(name, age) {    this.name = name;    this.age = age;  }  Person.prototype = {    constructor: Person,    info: function() {      alert("name: " + this.name + "  " + "age: " + this.age);    }  }  var person = new Person("singsong", 23);  person.info();}

This constructor is the most widely used in ECMAScript and the most consistent method to create a custom type. It can be said that this is the default mode used to define the reference type.

7. Dynamic Prototype

The dynamic prototype mode encapsulates all information in the constructor. By initializing the prototype in the constructor, the constructor and prototype are maintained at the same time.

function Person(name, age) {  this.name = name;  this.age = age;  if (typeof this.info != "function") {    Person.prototype.info = function() {      alert("name: " + this.name + "  " + "age: " + this.age);    }  };}var person = new Person("singsong", 23);person.info();

When using the dynamic prototype mode, you cannot use the object literal to overwrite the prototype. If you have already created an instance, the relationship between the existing instance and the new prototype is cut off.

8. Parasitic constructor Mode

The basic idea of this mode is to create a function, which only encapsulates the code for creating an object and then returns the newly created object.

function Person(name, age) {    var o = new Object();    o.name = name;    o.age = age;    o.info = function() {      alert("name: " + this.name + "  " + "age: " + this.age);    };    return o;  }  var person = new Person("singsong", 23);  person.info();

In addition to using the new operator and calling the wrapped function constructor, this mode is exactly the same as the factory mode. If the constructor does not return a value, the new object instance is returned by default. By adding a return statement at the end of the constructor, You can override the value returned when calling the constructor.

This mode can be used to create constructors for objects in special cases. If you cannot directly modify the constructor of the native object, you can use this mode to recreate the constructor to add additional methods.

Note: The objects returned by the parasitic constructor mode have no relationship with the constructor or the prototype attribute of the constructor. That is, the objects returned by the constructor are no different from those created outside the constructor. Therefore, the instanceof operator cannot be used to determine the object type. Because of this problem, we recommend that you do not use this mode when other modes are available.

9. Safe Construction of the Function Model

Douglas Crockford invented the concept of durable objects in javaScript.

A secure object is an object that does not have a public attribute and does not reference this in its method. Secure objects are most suitable for use in some secure environments where this and new are not allowed), or when data is prevented from being changed by other applications.

function Person(name, age) {    var o = new Object();    o.info = function() {      alert("name: " + name + "  " + "age: " + age);    };    return o;  }  var person = Person("singsong", 23);  person.info();

Similar to the parasitic constructor mode, the object-fish constructor created in the secure constructor mode has no relationship with each other. Therefore, the instanceof operator has no significance for this object.

This article is from the singsong blog, please be sure to keep this source http://singsong.blog.51cto.com/2982804/1287812