Object-oriented representation in JavaScript

We know that the object-oriented language has a feature, that is, the general concept of class, and then have the class of properties and methods and other concepts.

However, there is no class concept in JavaScript, so how do we go about implementing some object-oriented features through the language itself?

(1) One of the simplest ways

Create an instance of object, add properties and methods to it

var New Object ();     // Create instance car.color = "Red";              // increase the color properties of this object for car function () {       //car Method alert (this. color);}

Later developed into a simpler and more intuitive way of writing JSON-like object literals

var car = {    "red",    function() {        alert (this). color);    }   }

Using the notation of creating a single instance or object literal can create a single object, but if we need to create multiple objects, the above approach is cumbersome,

We have to copy a set of identical code, generate CAR2, CAR3, gradually, in order to solve this problem, we began to adopt the factory model

(2) Creating objects using Factory mode

functionMakecar (color) {varCar =NewObject ();//Create an instanceCar.color = Color,//Add PropertyCar.showcolor =function(){//Add MethodAlert This. color); }       returnCar//returns the generated instance} Call:varCAR1 = Car ("Red");varCAR2 = Car ("green");

Factory mode successfully solves the problem of writing duplicate code when creating multiple objects. And on the other side, in this way, we know that car1 and CAR2 are generated by generating an object instance in attached properties and methods,

That is, they are all instances of object, so we are not well aware of the types of objects produced. Then people put forward a new way to solve this problem.

(3) Constructor mode

function Car (color) {                  // General constructor start uppercase this    . color = color;               //  This    function() {      // Add method        alert (this  . color);    }   } Call:varnew Car ("Red"); var New Car ("green");

Comparing the constructor mode and Factory mode we can see the following differences

1. There is no new Object in the constructor mode, and the method creates an instance and assigns a value to this instance.

2. The created instance is not returned in the constructor mode

3. Constructor mode assigns properties and methods to the This object directly

4. Constructor mode uses the new operator to produce car objects

With the above method, we can create two car objects to solve the object recognition problem (can be verified using the Instanceof method)

Is it not a disadvantage to create an object using the above construction method? The answer is no, the method created in the code above is actually the equivalent of

This.showcolor = new Function ("Alert (This.color)");

In this case, the new object is equivalent to creating multiple function instances, which is wasteful. We can put it out, like the following

function Car (color) {                  // General constructor start uppercase this    . color = color;               //  this    . showcolor = showcolor;} function Showcolor () {      // Add method    alert (this. color);}   

There is also a drawback to this approach, which is that it produces all of the functions of Showcolor, which is the encapsulation of the function cannot be achieved.

(4) using constructors and prototype chain methods

function Car (color) {                  // General constructor start uppercase this    . color = color;               //               = {constructor:car, function () {alert (   this. color);}    }   

The above method uses the concept of the prototype chain, the knowledge about the prototype chain is available and then collated

What we need to know is that using the prototype chain definition method and shared properties can be shared by reference and can save memory to the greatest extent. This is a high degree of adoption of a way.

Object-oriented representation in JavaScript