A summary of several ways to create objects in javascript

Preface:

With the rise of web 2.0 (most notably Ajax), javascript is no longer a "toy language" for programmers. Programming continues to simplify, but "user experience, performance, compatibility, scalability... However, the requirements are constantly improving, with the emergence of excellent frameworks (libraries) such as Prototype, jQuery, ExtJs, Dojo, etc., which greatly simplifies web development.

More and more people are getting into and using javascript, and of course, companies are demanding more and more from developers. In terms of my own experience, in a few years, I was able to write some page UI effects with javascript, do form validation for websites, and so on, and I thought it was pretty cool. But at this point, if you don't know what XMLHttpRequest or JSON is, or even object-oriented/object-based programming in javascript, can you still call yourself a good web programmer? (if you are interested in cutting-edge technologies, you must know node.js and MongoDB, which are inseparable from javascript.)

The flexibility of javascript is both loved and hated. Typically, it's easy to get started, but hard to master. Understanding javascript OOP/ object-based programming is the watershed in judging a programmer's level of javascript. In object based javascript programming, the most basic is "creating objects", which often makes many programmers who are familiar with other oriented languages (Java, C#, C++) feel confused or difficult to adapt. So, this article begins by showing you some of the common ways to create objects in javascript.

1. Simple object creation How to use object literals {}  Create an object (simplest, easy to understand, recommended)

var Cat  = {};//JSON
 Cat.name="kity";//Add a property and assign a value
 Cat.age=2;
 Cat.sayHello=function(){
  alert("hello "+Cat.name+", This year, "+Cat["age"]+" At the age of ");//You can access the properties as ". "or as a HashMap
 }
 Cat.sayHello();//Calls the (method) function of the object

2. Simulate class with function(function)

2.1 create an object that corresponds to an instance of new

function Person(){
}
var personOne=new Person();//Define a function that can be considered a class if a new keyword is used to "instantiate" it
personOne.name="dylan";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name+" is coding now...");
}
personOne.work();

2.2 can be implemented using the argument constructor, which is more convenient to define and more extensible (recommended)

function Pet(name,age,hobby){
   this.name=name;//This scope: the current object
   this.age=age;
   this.hobby=hobby;
   this.eat=function(){
      alert(" My name is "+this.name+", I like "+this.hobby+", A foodie, too ");
   }
}
var maidou =new Pet(" McDull ",5," Go to bed ");//Instantiate/create objects
 maidou.eat();//Call the eat method (function)

3. Use factory mode to create (Object keyword)

var wcDog =new Object();
 wcDog.name=" Prosperous wealth ";
 wcDog.age=3;
 wcDog.work=function(){
   alert(" I am a "+wcDog.name+", auf ......");
 }
 wcDog.work();

How to use prototype objects   The prototype keyword

function Dog(){

 }
 Dog.prototype.name=" Prosperous wealth ";
 Dog.prototype.eat=function(){
 alert(this.name+" A version ");
 }
 var wangcai =new Dog();
 wangcai.eat();

5. Mixed patterns (prototypes and constructors)

function Car(name,price){
  this.name=name;
  this.price=price; 
}
 Car.prototype.sell=function(){
   alert(" I am a "+this.name+" I'll sell it now "+this.price+" Ten thousand yuan ");
  }
var camry =new Car(" camry ",27);
camry.sell(); 

6. The dynamic prototyping approach (which can be considered a special case of the hybrid model)

function Car(name,price){
  this.name=name;
  this.price=price; 
  if(typeof Car.sell=="undefined"){
   Car.prototype.sell=function(){
    alert(" I am a "+this.name+" I'll sell it now "+this.price+" Ten thousand yuan ");
   }
 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 beginners see this, they may faint and even feel worried. In fact, do not worry at all, these ways, only need to master one or two, a few others just need to understand. This is exactly the flexibility of javascript. Each method must have its advantages and disadvantages, so there is no fixed recommendation, choose your most easy to understand and master the way. Furthermore, everyone's code style may be different. In the future, you may need to study the source code of jQuery, or adapt it according to other plug-ins, or develop your own plug-ins, all of which need to understand the code style of others. These libraries, plug-ins, are built on an object-oriented/object-based basis.