JS create several modes of object

Source: Internet
Author: User

Several pattern features of JavaScript-created objects

/*
1 Factory mode
function Createperson (name,age,job)
{
var o=new Object ();
O.name=name;
O.age=age;
O.job=function ()
{
alert (name);
}
}

Createperson ("Tom", "Teachaer");
Createperson ("Jack", "Student");
Features: Pros: Create a shared method and three individual properties
Cons: We don't know what type they belong to, they're all object.
Without this shortcoming, I'd like to use this pattern to be the best.


2 constructor mode
function person (name,age,job)
{
This.name=name;
This.age=age;
This.job=job;
This.sayname=function ()
{
alert (this.name);
};
}

var person1=new person ("Tom", "Teachaer");
var person2=new person ("Jack", "Student");

Pros: You can now know the type of person
Cons: Created three properties and three methods because the method is also an object here is not shared
Add: A function can be either a constructor or a normal function
If this is the normal function here, this is the property that defines windows because this points to Windows

However, the idea that this function can be modified is to put the function outside so that it can be shared
Personally, the problem is that it's just a method of windows rather than a method of this object.
As follows:
function person (name,age,job)
{
This.name=name;
This.age=age;
This.job=job;
this.sayname=sayname;//equivalent to Window.sayname
}

function Sayname ()
{
alert (this.name);
}
var person1=new person ("Tom", "Teachaer");
var person2=new person ("Jack", "Student");
But here's the problem again. Sayname as if objects under Windows can be called
Originally wanted this kind of object to share, now became everybody to share, has no encapsulation sex to say.


3 prototype mode
Each function we create has a prototype (prototype property) This property is a pointer to an object
The purpose of this object is to include properties and methods that can be shared by all instances of a particular type
If the literal meaning is understood, then prototype is the prototype object of the object instance created by the constructor.
The advantage of using a prototype object is that you can have all instances share the properties and methods it contains
It's actually an object with functions and properties. We have objects that are created by a construction method point to this object
The equivalent of a person serving a class of people
As follows
function person ()
{

}
Person.prototype.name= "Nicolas";
person.prototype.age=29;
person.prototype.job= "Software Engineer";
Person.prototype.sayname=function ()
{
alert (this.name);
};


var person1=new person ();
alert (Person.prototype.age);


It looks like we're just defining the properties and methods of the prototype (and it looks like it's shared)
Does not define the methods and properties of the object, how is it called?
Then you have to know what a prototype object is.

1) Understanding prototype objects
/* Whenever a new function is created, a prototype property is created for the function based on a specific set of rules
This property points to the prototype object of the function, and all the prototype objects automatically get a constructor
property, this property contains a pointer to the function where the prototype property is located, and in the previous example, prototype is the function that points to person
And since this prototype object also inherits the method defined in object

When the constructor is called to create a new instance, the instance inside will contain a pointer to the constructor's prototype object

What this means is that the constructor has a prototype property pointing to the prototype object and the instance has a property pointing to the prototype object called prototype
Although there is no standard form of access to prototype (prototype of instances) many browsers support a property _proto_
This connection exists between the instance and the constructor's prototype object, not between the instance and the constructor

In this way, we establish the connection between the instance and the prototype object, and we will find the prototype object without the example.
Clearly explained in the illustrations in the JS Advanced programming book

Although not accessible to prototype in all implementations (meaning direct access here)
Like Person1. Prototype
However, you can determine between objects by using the isPrototypeOf () method
Whether this relationship exists

Alert (Person.propotype.isPrototypeOf (Person1))//If you do not create an instance, this returns false.

ECMAScript 5 Adds a new method called object.getpropertyof (), in all supported implementations
This method returns Prototype

For example alert (object.getprototypeof (person1) ==person.prototype)
Alert (object.getprototypeof (person1). Name);

If a property or method is not found in this instance when it is read to a property or method, it will look in the prototype object
We typically define a property in an instance and define the method in the prototype object. \

The properties in the prototype object cannot be overridden if a shared thing suddenly changes, it's definitely going to go wrong.

If we suddenly do not want the properties defined by this class to access the properties of the prototype object, you can
Delete Object reference. property to complete

Use the hasOwnProperty method to detect whether an attribute exists in an instance or exists in a prototype (the method inherits from object)

You can use the in operator to determine whether a property exists in an object or exists in a prototype
Alert (attribute in object) returns True if the attribute exists in the object or in the prototype object
*/


Simpler prototype syntax
/*
function person ()
{

}

Person.prototype=
{
Name: "Nicolas",
Age:29,
Job: "Software Engineer",
Sayname:function ()
{
alert (this.name);
}
};

Person.prototype.name= "Tom";
alert (Person.prototype.name);
*/


/* It looks like it's refreshing.
But the constructor point here is object because we rewrote the prototype object.
The previous reference to the prototype object's constructor points to a pointer to the function where prototype is located
I think the formula is this: where to construct a prototype object constructor the constructor that points to

If we think this constructor is important, we can force the finger back.

Then the original prototype object will be changed (substitution service)

But the benefit of sharing is the downside of sharing. Add someone to modify a property in the prototype
And you just use the properties in the prototype so it's a problem, so it's best to use a method instead of a property.


*/
/*
4 combining constructors and prototype patterns with the most common patterns
Instance is responsible for building this object Unique property prototype is responsible for sharing properties and methods
function person (name,age,job)
{
This.name=name;
This.age=age;
This.job=job;
this.friends=["Shelby", "Court"];
}

This is just a re-assignment, not a redefinition.
Person.prototype=
{
Constructor:person,
Sayname:function ()
{
alert (this.name);
}
}
*/

5 Dynamic Prototype mode
is what you need to use to define the prototype.
function person (name,age,job)
// {
This.name=name;
This.age=age;
This.job=job;

if (typeof this.sayname= "function")
// {
Person.prototype.sayname=function ()
// {
alert (this.name);
// }
// }
// }

function person ()
// {

// }

person.prototype.name=18;
person.prototype.age=30;


var person1=new person ();
alert (person1.name);
alert (person1.age);

Parasitic constructor mode
In cases where the previous modes are not applicable, the parasitic constructor pattern can be used.
function person (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=new person (' Tom ', ' software Engineer ');
Alert (Person1 instanceof Object);
/*
The constructor defaults to returning a new object instance without a return value if you add a return statement
The value returned by the call constructor can be overridden
*/

JS create several modes of object

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.