Summary of several methods of creating objects in javascript_javascript skills

Foreword:

With the rise of web 2.0 (the most representative one is Ajax technology), JavaScript is no longer a "toy language" in the eyes of programmers. Programming is constantly being simplified, but the requirements for "user experience, performance, compatibility, scalability..." are constantly improving, and excellent frameworks (class libraries) such as Prototype, jQuery, ExtJs, and Dojo have emerged. , greatly simplifying web development.

More and more people are beginning to study and use javascript in depth. Of course, enterprises have higher and higher requirements for developers. Let’s take my own experience as an example. In the early 2000s, I was able to use JavaScript to write some page UI effects and do website form verification and other operations. I thought it was pretty cool at the time. But now, if you don’t even know what XMLHttpRequest and JSON are, and you don’t even understand object-oriented/object-based programming in JavaScript, do you still dare to call yourself an excellent web programmer? (Friends who pay attention to cutting-edge technology must know node.js and MongoDB, both of which are inseparable from JavaScript.)

The flexibility of JavaScript is something that people both love and hate. It is typically easy to get started but difficult to master. Understanding javascript OOP/object-based programming is the watershed for judging a programmer's javascript level. In JavaScript object-based programming, the most basic thing is "creating objects", which often makes many programmers who are familiar with other language-oriented languages ​​​​(Java, C#, C) feel confused or difficult to adapt to. Therefore, this article will first introduce to you several common ways to create objects in JavaScript.

1. Creation of simple objects Create an object using object literal {} (the simplest, easy to understand, recommended)

Copy code The code is as follows:

var Cat = {};//JSON
Cat.name="kity"; //Add attributes and assign values ​​
Cat.age=2;
Cat.sayHello=function(){
alert("hello " Cat.name ", this year " Cat["age"] " is old ");//You can use "." to access attributes, or you can use HashMap to access
}
Cat.sayHello();//Call the object's (method) function

2. Use function to simulate class (no-argument constructor)

2.1 Create an object, equivalent to new instance of a class

Copy code The code is as follows:

function Person(){

}
var personOne=new Person();//Define a function. If there is the new keyword to "instantiate", then the function can be regarded as a class
personOne.name="dylan ";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name " is coding now...");
}

personOne.work();

2.2 It can be implemented using a parameterized constructor, which makes definition more convenient and more scalable (recommended)

Copy code The code is 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 ", and I am also a foodie");
}
}
var maidou =new Pet("McDull",5,"sleeping");//Example Transform/create objects

maidou.eat();//Call the eat method (function)

3. Use factory method to create (Object keyword)

Copy code The code is as follows:

var wcDog =new Object();
wcDog .name="Wangcai";
wcDog.age=3;
wcDog.work=function(){
alert("I am " wcDog.name ", woof woof woof...... ");
}

wcDog.work();

4. How to use prototype objects prototype keyword

Copy code The code is as follows:

function Dog(){

}
Dog.prototype.name=" Wangcai";
Dog.prototype.eat=function(){
alert(this.name "Is a foodie");
}
var wangcai =new Dog();
wangcai .eat();

5. Mixed mode (prototype and constructor)

Copy code The code is as follows:

function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype. sell=function(){
alert("I am " this.name ", I am selling " this.price "10,000 yuan");
}

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

6. Dynamic prototype method (can be regarded as It is a special case of mixed mode)

Copy code The code is 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 ", and I am selling " this.price "10,000 yuan");
}
Car.sell=true;
}
}

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

The above are the most commonly used ways to create objects in JavaScript. Beginners may faint or even feel worried after seeing it. In fact, there is no need to worry at all. You only need to master one or two of these methods, and you only need to understand the other ones. This is the flexibility of JavaScript. Each method must have its advantages and disadvantages, so there is no fixed recommendation. Just choose the method that is easiest for you to understand and master. Moreover, everyone's coding style may be different. In the future, you may need to study the source code of jQuery, or refer to other plug-ins to rewrite it, or develop your own plug-in. You will also need to understand other people's coding styles. These class libraries and plug-ins are all based on object-oriented/object-based.