JavaScript advanced Programming-object-oriented object creation

Source: Internet
Author: User

Object Creation Method:

  1. Factory method
  2. Constructor mode
  3. Prototype mode
  4. Combining constructors and prototype patterns
  5. Parasitic constructor mode
  6. Problem constructor Mode

Factory mode:

function Person (name, age) {    varnew Object ();        // Creating Objects          = name;               // Add method, attribute    obj.age = age ;     function () {        alert (this. Name);    }         return obj;                    // return Object }
var people = person ("Yangxunwu", 24);

Cons: Objects returned are all instances of object and cannot be recognized

Constructor mode:

function Person (name, age) {    this. Name = name;            // adding methods, properties    this. Age = Age ;      This function () {        alert (this. name);}    ;} var New Person ("Yangxunwu", 24);
Notice that the new operation is more

When a constructor creates an instance, it must go through four steps using the new operator:

    1. Creating objects
    2. Assigns the scope of the constructor to the object. (This points to the new object)
    3. Executes the constructor code.
    4. Returns the new object.

Disadvantage: Although the created instance can be identified by the instanceof operator , the function cannot be reused .

Prototype mode:

function Person () {                      // Create empty constructor  = age;                // add properties and methods on the constructor prototype to achieve function reuse function () {    alert (Person.prototype.name);}; var New Person ();

When a new function is created, the prototype property is automatically created for the function according to a specific rule, which is a prototype object pointing to the function.

The prototype object automatically obtains a constructor property , which is also a pointer to the function that owns the prototype property .

Pesson. prototype. constructor = person

After a custom constructor is created, its prototype object automatically obtains the constructor property , and the other methods inherit from Object . When creating through constructors

After a new instance, the instance automatically obtains a pointer to the constructor's prototype object, and the general name is the __proto__ property .

When code reads a property, it typically passes through two procedures, one that searches for properties on an instance , and searches through the __proto__ property on the prototype object .

By using the hasOwnProperty () method, you can detect whether a property is present in an instance or in a prototype, and returns true in an instance.

The properties on the prototype object can be shared by all instances, but are prone to problems when the property is a reference type .

functionPerson () {}person.prototype.names= ["Yang", "Zhang"];varPeople1 =NewPerson ();varPeople2 =NewPerson ();p eople1.names//["Yang", "Zhang"]People2.names//["Yang", "Zhang"]People1.names.push ("Test");//because the property is shared and is a reference type, names changes thePeople1.names//["Yang", "Zhang", "Test"]People1.names//["Yang", "Zhang", "Test"]

Instances should generally have their own full properties, there is no

Combining the constructor pattern with the prototype pattern

functionPerson (name, age) {//The properties inherited by the constructor are unique     This. Name =name;  This. Age =Age ;  This. Friends = ["Yang", "Zhang"];} Person.prototype.sayName=function(){//to share a method through prototype modeAlert This. name);}//Create instances, instances do not share properties, shared methodsvarPeople1 =NewPerson ("Yangxunwu", 24);varPeople2 =NewPerson ("hexiaoming", 6);//Accessing reference typesPeople1.friends;//["Yang", "Zhang"]People1.friends;//["Yang", "Zhang"]//to add an elementPeople1.friends.push ("Wang");p eople1.friends; //["Yang", "Zhang", "Wang"] elements are added to the properties of the People1 because the constructors do not share propertiesPeople1.friends;//["Yang", "Zhang"]People1.sayname= = = People2.sayname//true. Sharing methods

Dynamic prototype mode:

function Person (name, age) {                // Dynamic prototype mode this    . name = name;     this. Age = Age ;     this. Friends = ["Yang", "Zhang"];         if (Person.prototype.sayName! = "function") {    // dynamic load, only the first time to add the prototype method        function() {            alert (this  . Name);}}    ;}

Executes only the first time the constructor is called, after which the prototype has completed initialization.

Parasitic constructor mode:

functionPerson (name, age) {varobj =NewObject ();//generate a Objdetde objectObj.name=name; Obj.age=Age ; Obj.sayname=Functon () {alert ( This. Name); }        returnObj//returns an object that has always been a. }varPeople =NewPerson ("Yangxunwu", 24);      The difference from the factory model, Pit people.sayname (); //Yangxunwu

The returned object has nothing to do with the constructor or the prototype of the constructor, and the return is always the object type. Just put the external dry matter inside the dry.

Secure constructor:

functionPerson (name, age) {varobj =NewObject (); //defining private variables and functionsObj.dosomething =function() {alert (name); //defines a method that can access private variables and functions without referencing  this    }        returnObj//returns the object, and now only this object can access these private variables and functions. }varPeople = person ("Yangxunwu", 24);      not using newpeople.sayname (); //Yangxunwu

The safe construct is that there is no public attribute and this is not referenced to prevent data from being corrupted by other applications. A secure constructor differs from a parasitic constructor:

    1. The newly created object method does not reference this
    2. The constructor is called without using the new operator.

JavaScript advanced Programming-object-oriented object creation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.