A summary of learning about creating objects in JavaScript

One, the simplest method of object creation

In JavaScript, a single object can easily be created by using either the object constructor or the objects literal , and the disadvantage is that there is a lot of duplicate code when creating multiple objects with the same interface (the standard OO interface concept). To solve this problem, the factory model is introduced.

Second, the factory model

The Factory mode is a simpler pattern in the design pattern of the Gof 23, and a simple summary is to define an interface for creating objects so that subclasses decide which class to instantiate. In JavaScript, because there is no standard OO concept, developers invent a function that encapsulates the details of creating objects with specific interfaces.

 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 ("Haha", "Doctor"  var  Person2 = Createperson ("Hehe", "%", "worker"); 

Creating objects using Factory mode solves the problem of code duplication, but does not solve the problem of object recognition: all objects created by the Createperson function are instances of the object constructor. In order to solve this problem, the constructor mode is introduced.

Third, the structural function mode

You define the properties and methods of a custom object type by creating a custom constructor.

function Person (name, age, Job) {    this. Name = name;      this. Age = Age ;     this. Job = job;      This function () {        alert (this. name);}    ;} var New Person ("Haha", "Doctor"); var New Person ("Hehe", "%", "Worker");

Here, we must use the new operator to call the constructor person (). This will have the following four steps:

1) Create a new object;

2) assigns the new object to the scope of the constructor (hence this points to the new object);

3) Execute the code in the constructor (adding attributes to the new object);

4) return new object (no explicit Return other object, default return to new object);

Now, Person1 and Person2 are not just instances of the object constructor, they are all instances of the person constructor. The disadvantage of the constructor pattern is that the methods defined in each constructor are recreated on each instance of its build, which consumes resources very much if the generated instance is more or each method is larger. One workaround is as follows:

 function   person (name, age, job) { Span style= "color: #0000ff;"    >this . Name = name;       job;   Sayname;}  function   Sayname () {alert ( this  .name);}  var  person1 = new  person ("Haha", 34, " Doctor " var  person2 = new  person ("Hehe", 23, " Worker "); 

By transferring the method to the outside of the constructor, the object Person1 and Person2 implement the shared function Sayname (). The problem is that the sayname () function is in the global scope, thus losing the encapsulation problem and the quantity expansion of a number of similar functions. To do this, we think of prototype patterns.

Four, prototype mode

Each function we create has a prototype (prototype) attribute, which is a pointer to an object that is used to contain properties and methods that can be shared by all instances of a particular type (a function that points to the object). Note: This object is created automatically at the same time that the function is created, and is directed to each other through the prototype property of the function and the constructor property of the object. after the new operator is called on the function, all the generated instances refer to the object that the prototype property of the function points to as its own prototype object.

function= "Haha"="Doctor"function() {     alert (  This . name);}; var New Person (); var New  = = = Person2.sayname;        

Relationships between the individual objects:

Note: Instance objects and constructors do not have a direct association, they simply point their internal properties [[Prototype]] to the person Prototype object at the time of the build, and there is no connection between the person constructor. The effect is that when an instance is generated to change the Prototype property of the person constructor so that it points back to an object, the [[Prototype]] property of the instance does not follow the change.

Note Two: The object property of the prototype object is caused by the wrong reading and writing.

Note Three: The dynamic nature of the prototype is the loosely connected relationship between the instance and the prototype.

The problem of prototype mode is: 1, there is no link of the constructor to pass initialization parameters, 2, the sharing of reference type value brings problems.

Combination of constructor mode and prototype mode

Because of the pros and cons of the constructor pattern and the prototype pattern, the most common way to create a custom type is to combine the constructor pattern with the prototype pattern. Constructor patterns are used to define instance properties, which are used to define methods and shared properties.

functionPerson (name, age, job) { This. Name =name;  This. Age =Age ;  This. Job =job;  This. Friends = ["ShelBy", "court"];} Person.prototype={Constructor:person, sayname:function() {alert ( This. Name); }}varPerson1 =NewPerson ("Haha", "Doctor");varPerson2 =NewPerson ("Hehe", "%", "Worker");

At this point, the methods of creating objects in JavaScript should be nearly as learned, but there are always special needs.

VI. Dynamic prototype mode

If you are confused or uncomfortable with the combination of the fifth method above, then you can try this dynamic prototype mode. It encapsulates all the information in the constructor, and preserves the advantages of the combined pattern by initializing the prototype in the constructor (only if necessary).

function Person (name, age, Job) {    this. Name = name;      this. Age = Age ;     this. Job = job;     if (typeofthis. Sayname!== "function") {        function() {                Alert (this. name);}        ;     }

Seven, parasitic structural function mode

The basic idea of this pattern is to create a function that simply encapsulates the code that creates the object, and then returns the newly created object.

function Person (name, age, Job) {    varnew  Object ();     = name;     = Age ;     = job;     function () {        alert (this. Name);    };     return o;} var New Person ("Haha", "Doctor"); Friend.sayname ();

The difference between this and the factory model is simply: use new to call the constructor. Note that the default generated new object this is not used in the constructor, and the default return object of the constructor is overwritten by an explicit return statement.

This pattern can be used to create constructors for objects in special cases.

Eight, secure structural function mode

A secure object in JavaScript (durable objects) refers to an object that has no public properties and whose methods do not refer to this. Secure objects are suitable for use in some secure environment (this and new), or to prevent data from being altered by other applications.

function Person (name, age, Job) {    varnew  Object ();         // roommate variables and functions    can be defined here // Add Method    function () {        alert (name);    };     return o;}

Note: In addition to using the Sayname () method, there is no other way to access the value of name in an object created by this mode.

A summary of learning about creating objects in JavaScript