Several methods of creating objects in JavaScript summary _javascript tips

Objective:

With the advent of Web 2.0 (the most representative of Ajax technology), JavaScript is no longer the "toy language" programmers see. Programming is constantly simplifying, but the "user experience, performance, compatibility, scalability ..." Requirements are constantly improving, followed by the emergence of prototype, JQuery, ExtJs, Dojo and other excellent framework (class library), greatly simplifying web development.

More and more people are beginning to delve into and use JavaScript, and of course, the requirements of the enterprise to the developer are more and more high. In terms of their own experience, Zhougi years, I can use JavaScript to write some page UI effects, to do the site's form verification, and so on, I feel already very cool. But now, if even XMLHttpRequest, JSON is not aware of, even JavaScript in object-oriented/object-based programming do not understand, but also dare to call yourself a good web programmer? (attention to cutting-edge technology friends, must understand Node.js, MongoDB, this is inseparable from JavaScript.) ）

The flexibility of JavaScript makes people love and hate. A typical introduction is simple and difficult to master. Understanding JavaScript oop/object-based Programming is a watershed in judging the level of programmer JavaScript. JavaScript is based on object programming, the most basic is "create object", often make many familiar with other language-oriented (Java, C #, C + +) programmers feel indefinitely or difficult to adapt. So, this article will first introduce you to some of the common ways to create objects in JavaScript.

1. Creation of a Simple object using the literal amount of the object {} Create an object (simplest, well understood, recommended for use)

Copy Code code as follows:

var Cat = {};//json
Cat.name= "kity";//Add attribute and assign value
cat.age=2;
Cat.sayhello=function () {
Alert ("Hello" +cat.name+ "," +cat["Age"]+ "year");//You can use "." Way to access the property, or you can access it by using the HashMap
}
Cat.sayhello ();//Calling object's (method) function

2. Use function (functions) to simulate class (parameterless constructor)

2.1 Create an object that is equivalent to a new instance of a class

Copy Code code as follows:

function person () {

}
var personone=new person ()//defines a function, and if there is a new keyword to "instantiate", then the function can be considered a class
Personone.name= "Dylan";
personone.hobby= "Coding";
Personone.work=function () {
Alert (personone.name+ "is coding now ...");
}

Personone.work ();

2.2 can be implemented using a parameter constructor, which is easier to define and more scalable (recommended)

Copy Code code as follows:

function Pet (name,age,hobby) {
This.name=name;//this Scope: Current Object
This.age=age;
This.hobby=hobby;
This.eat=function () {
Alert ("My name is +this.name+", I Like "+this.hobby+", also a cargo ");
}
}
var Maidou =new Pet ("McDull", 5, "sleep"); Instantiate/Create Object

Maidou.eat ()//Call Eat method (function)

3. Use the Factory method to create (object keyword)

Copy Code code as follows:

var wcdog =new Object ();
Wcdog.name= "Flourishing wealth";
wcdog.age=3;
Wcdog.work=function () {
Alert ("I Am" +wcdog.name+ "," Wang Woo ... ");
}

Wcdog.work ();

4. Prototype keywords in the way of using a prototype object

Copy Code code as follows:

function Dog () {

}
Dog.prototype.name= "Flourishing wealth";
Dog.prototype.eat=function () {
Alert (this.name+ "is a cargo");
}
var wangcai =new Dog ();
Wangcai.eat ();

5. Blending modes (prototypes and constructors)

Copy Code code as follows:

function car (name,price) {
This.name=name;
This.price=price;
}
Car.prototype.sell=function () {
Alert ("I Am" +this.name+ ", I now sell" +this.price+ ");
}

var camry =new car ("Camry", 27);
Camry.sell ();

6. The way of dynamic prototyping (can be considered as a special case of mixed mode)

Copy Code code as follows:

function car (name,price) {
This.name=name;
This.price=price;
if (typeof car.sell== "undefined") {
Car.prototype.sell=function () {
Alert ("I Am" +this.name+ ", I now sell" +this.price+ ");
}
Car.sell=true;
}
}

var camry =new car ("Camry", 27);
Camry.sell ();

These are some of the most common ways to create objects in JavaScript. When the novice sees it, it may faint and even feel worried. In fact, there is no need to worry, these kinds of methods, only to master one or two kinds of other kinds of only need to understand the good. This is the flexibility of JavaScript. Each way must have its advantages and disadvantages, so there is no fixed recommendation, choose the easiest way to understand and master. Besides, everyone's code style may be different. In the future you may need to study the jquery source code, or refer to other plug-ins to rewrite, to develop their own plug-ins, all need to understand other people's coding style. And these class libraries, Plug-ins, are based on object-oriented/object-based.