JavaScript Creation Object

The object-oriented (Object-oriented,oo) language has a characteristic that they all have the concept of a class. There is no concept of class in JavaScript, so its objects are also different from objects in class-based languages.

ECMA-262 defines an object as: "A collection of unordered attributes, whose properties can contain basic values, objects, or functions," we can think of an object as a hash set: Nothing more than a set of name-value pairs, where values can be data or functions. Here are some ways to create objects by method.

An object constructor or object literal

var person={            name:"Bob", age            :"$",            sayname:function () {                alert (this. Name);                }        }

This approach has obvious drawbacks: it generates a lot of duplicate code.

Second, the factory model

Considering the inability to create classes in ECMAScript, developers thought of encapsulating the details of creating objects with a function in a specific interface.

function Createperson (name,age) {            return  {                name:name,                age:age,                sayname:  function() {                    alert (this.        name); }}} var person1=createperson ("Bob", "24");

Factory mode Although defining an interface creates an object, it does not solve the problem of object recognition (that is, how to know the type of an object).

Third, the structural function mode

It is known that in JavaScript, constructors can be used to create objects of a particular type, such as: Object, Array. In addition, you can create custom constructors that define properties and methods for custom object types.

function Person (name,age) {            this. name=name;              this. age= age;             this. sayname=function() {                alert (this. Name);                }        }         var person1=New person ("Bob", "" ");             var person2=New person ("Rose", "27");

To create a new instance of the person constructor, you must use the new operator. Calling the constructor goes through several steps:

1. Create a new object;
2. Assigns the scope of the constructor to the new object--this points to the new object;
3. Executes the code in the constructor;
4. Returns the new object;

The constructor mode is useful, but it is not without drawbacks. The methods in each instance are re-created, and in the constructor mode, the wear instances cause different scope chains and identifier resolution. Therefore, functions with the same name on different instances are not equal.

Alert (person1.sayname==person2.sayname)    //false

Four, prototype mode

Each created function has a prototype property that points to an object whose purpose is to include properties and methods shared by all its instances. Therefore, we can define the invariant properties and methods directly on the prototype object.

 function   person (name,age) {Person.prototy            Pe.name  =name;            Person.prototype.age  =age;                Person.prototype.sayName  =function   () {                Alert ( this  .name); }        } 

var person1=New person ("Bob", "" ");             var person2=New person ("Rose", "the");        Person1.sayname ();     // Rose        Person2.sayname ();    // Rose        Alert (person1.sayname==person2.sayname)    //true

The properties and methods of an instance created with the prototype pattern point to the prototype object. And the properties and methods of the prototype are dynamic, and any modifications we make to the prototype object can be reflected from the instance, so Person1.sayname () outputs rose. However, instances typically have all of their own properties, which is why few people use the prototype mode alone.

Combination of constructor mode and prototype mode

From the above, the constructor pattern defines the properties and methods that are unique to each instance, and the prototype schema defines the dynamic properties and methods shared by all instances. Blending mode is the best of two!

 function   person (name,age) { this . Name=name;             this . Age=age;  this . Sayname=function   () {alert ( this  .na                ME); }} person.prototype  ={job:  "teacher" "  function   () {alert ( this  
     
      .age); }        }
     

var person1=New person ("Bob", "" ");             var person2=New person ("Rose", "the");        Person1.sayage ();     //  -        Person2.sayage ();    // Panax Notoginseng        alert (person1.sayname==person2.sayname);    // false        alert (person1.sayage==person2.sayage);    // true

In this example, we can define the shared properties and methods on the object, and the prototype unique properties and methods are defined on the instance object. However, in the example above, we have defined the age property in both the instance and the prototype, and the instance result shows the instance properties. If we remove the age attribute from the instance:

 function   person (name,age) { this . Name=name;  this . Sayname=function   () {alert ( this  .na                ME); }} person.prototype  ={job:  "teacher" "  function   () {alert ( this  
     
      .age); }        }
     

var person1=New person ("Bob", "" ");             var person2=New person ("Rose", "the");        Person1.sayage ();     //  -        Person2.sayage ();    //  -

The instance results return the property values in the prototype. This is because when the code reads a property of an object, the search begins with the object instance, returns the value if it exists in the instance, and masks the property with the same name in the prototype, and then continues searching in the prototype object if it is not found.

The compositing pattern of constructors and prototypes is a default mode that is currently used to create custom types!

JavaScript Creation Object