Definition of Class or object in JS

  This article is mainly on the definition of JS class or object description, the need for friends can come to the reference, I hope to help you.

We know that JS is object-oriented. When it comes to object-oriented, it is inevitable to involve the concept of class. Generally, like C#,java, these strongly typed languages have a fixed syntax for defining classes. JS differs in that it can use various methods to implement its own classes and objects. The general implementation has the following several ways:   1. Factory mode means to create a factory function that returns a specific type of object, the sample code is as follows: The   code is as follows: function Createcar (scolor,idoors,impg) {    var otempcar=new Object;    oTempCar.color=sColor;    oTempCar.doors=iDoors;    oTempCar.mpg=iMpg;    otempcar.showcolor=function ()    {        alert (this.color);    & nbsp;}    return Otempcar; var ocar1=createcar ("Red", 4,23); var ocar2=createcar ("Blue", 3,25); Ocar1.showcolor (); Ocar2.showcolor ();   This way each time the factory function is invoked, a new object is created. The problem is that each time a new object is generated, a new function showcolor is created, which makes each object have its own Showcolor version, and in fact, All objects share the same function. To solve this problem, the developer defines the object's method outside the factory function, and then gives the object a pointer to the function, as follows   code as follows: function Showcolor () {    alert (This.color); function Createcar (scolor,idoors,impg) {   var otempcar=new Object;    oTempCar.color=sColor; & nbsp  oTempCar.doors=iDoors;     otempcar.mpg=impg;    oTempCar.showColor=showColor;    return Otempcar; var ocar1=createcar ("Red", 4,23); var ocar2=createcar ("Blue", 3,25); Ocar1.showcolor (); Ocar2.showcolor ();   This does not require creating your own Showcolor function for each object, but simply creating a pointer to the function. This solves the problem from a functional point of view, but the function does not look like an object's method. Thus, the way of constructing the function is educed.   2. Constructor method constructors are similar to factory functions, and the sample code is as follows: The   code is as follows: function car (scolor,idoors,impg) {   this.color=sColor; & nbsp  this.doors=iDoors;    this.mpg=iMpg;    this.showcolor=function ()    {      alert (this.color);    } var ocar1=n EW car ("Red", 4,23); var ocar2=new car ("Blue", 3,25);   In the constructor, there is no internal creation object, but the This keyword is used. When you call a constructor by using the new operator, you create an object before the first line of code is executed, and this is the only way to access the object. But what is the problem, obviously, each of its objects will also create its own version of the Showcolor function. To solve this problem, the following prototype method is introduced.   3. Prototype mode This method utilizes the prototype attribute of the object, which can be viewed as the prototype on which the new object is created. Here, use the empty constructor to set the class name. Then all the methods and attributes are given directly to the prototype attribute. As follows: The code is as follows: Function car () {} car.prototype.color= "red"; car.prototype.doors=4; car.prototype.mpg=23; Car.prototype.dRivers=new Array ("Mike", "Sue"); Car.prototype.showcolor=function () {   alert (this.color);}   The prototype method can only be assigned directly, not by passing parameters to the constructor to initialize the value of the property. In this way, you will encounter two problems, do not know that you do not notice. The first problem is that you have to create each object in this way before you can change the default value of the property. Instead of creating each object directly, you will have the property values you want. This is disgusting. The second problem is when the attribute refers to an object. There are no problems with function sharing, but there are problems with object sharing. Because each instance typically implements its own object.   as follows: Code below: var ocar1=new car (); var ocar2=new car (); OCar1.drivers.push ("Matt"); alert (ocar1.drivers);//Output "Mike,sue,matt" alert (ocar2.drivers);/output "Mike,sue,matt"   therefore drivers property is only a pointer to an object. So all instances actually share the same object. As a result of these problems, we have elicited the following federated use constructors and prototypes.   4. Mixed constructors/prototypes the idea of this approach is to define the object's function properties (methods) in a prototype manner, using a constructor that defines all the non function attributes of the object, including the normal property and the attribute that points to the object. As a result, all functions are created only once, and each object has its own instance of object attribute. The sample code is as follows:   code is as follows: function car (scolor,idoors,impg) {   this.color=sColor;    this.doors=iDoors;    this.mpg=iMpg;    this.drivers=new Array ("Mike", "Sue"); } car.prototype.showcolor=function () {   alert (this.color);} var ocar1=new car ("Red", 4,23); var ocar2=new car ("Blue", 3,25); OcAr1.drivers.push ("Matt"); alert (ocar1.drivers);//Output "Mike,sue,matt" alert (ocar2.drivers);//Output "Mike,sue"   is known by the instance code, which solves two problems in the previous approach at the same time. However, in this way, some developers still do not feel perfect.   5. Dynamic prototyping we know that most object-oriented languages visually encapsulate attributes and methods. The Showcolor method of the above approach is defined outside the class. Therefore, they designed the dynamic prototyping method. The basic idea of this approach is the same as the mixed constructor/prototype approach, the only difference being the location of the object method. As follows: The code is: function car (scolor,idoors,impg) {   this.color=sColor;    this.doors=iDoors;   & Nbsp;this.mpg=impg;    this.drivers=new Array ("Mike", "Sue");    if (typeof car._initialized== "undefined")   {     car.prototype.showcolor=function ()      {        alert (this.color)     &nbsp}     Car._initialize D=true; }   This way Car.prototype.showColor is only created once. So dependent, this code is more like a class definition in other languages.   6. Hybrid Factory approach This is usually a workaround that cannot be used in the previous way. It is designed to create a fake constructor and return only a new instance of another object.   Code as follows: function Createcar () {   var otempcar=new Object;    otempcar.color= "Red";     Otempcar.doors=4;    oTempCar.mpg=23;    otempcar.showcolor=function ()    {        alert (this.color);    & nbsp;};    return Otempcar; var car=new car ();   Because the new operator is called inside the car () constructor, the second new operator is automatically ignored. Objects created inside the constructor are passed back to the variable var. This approach has the same problem with the classic approach to the internal management of object methods. So it is highly recommended that you avoid using this approach unless you have to.