Explanation of class definition methods in javascript (four methods ),

Explanation of class definition methods in javascript (four methods ),

This article describes how to define classes in javascript. We will share this with you for your reference. The details are as follows:

Class definition includes four methods:

1. Factory Mode

Function createCar (name, color, price) {var tempcar = new Object; tempcar. name = name; tempcar. color = color; tempcar. price = price; tempcar. getName = function () {document. write (this. name + "-----" + this. color + "<br>") ;}; return tempcar;} var car1 = new createCar ("factory santana", "red", "121313"); car1.getName ();

Defining a factory function that can create and return specific types of objects looks good, but there is a small problem,

Create a new function showColor every time you call it. We can move it out of the function,

function getName(){  document.write(this.name+"-----"+this.color+"<br>");}

Direct to it in the factory function
Copy codeThe Code is as follows: tempCar. getName = getName;

This avoids repeated function creation, but does not seem like an object method.

2. constructor Method

Function Car (name, color, price) {this. name = name; this. color = color; this. price = price; this. getColor = function () {document. write (this. name + "-----" + this. color + "<br>") ;};}var car2 = new Car ("construct santana", "red", "121313"); car2.getColor ();

We can see the difference from the first method. No object is created in the constructor, but the this keyword is used.

When calling the constructor using new, an object is created first, and then accessed using this.

This method is similar to other object-oriented languages, but this method has the same problem as the previous one, that is, repeated function creation.

3. Prototype

Function proCar () {} proCar. prototype. name = "prototype"; proCar. prototype. color = "blue"; proCar. prototype. price = "10000"; proCar. prototype. getName = function () {document. write (this. name + "-----" + this. color + "<br>") ;}; var car3 = new proCar (); car3.getName ();

First, the constructor Car is defined, but no code is available. Then, the attribute is added through prototype. Advantages:

A. All instances store the pointer to showColor, which solves the problem of repeated function creation.

B. You can use instanceof to check the object type.
Copy codeThe Code is as follows: alert (car3 instanceof proCar); // true

Disadvantage: add the following code:

proCar.prototype.drivers = newArray("mike", "sue");car3.drivers.push("matt");alert(car3.drivers);//outputs "mike,sue,matt"alert(car3.drivers);//outputs "mike,sue,matt"

Drivers is a pointer to an Array object. Both instances of proCar point to the same Array.

4. Dynamic Prototype

Function autoProCar (name, color, price) {this. name = name; this. color = color; this. price = price; this. drives = new Array ("mike", "sue"); if (typeof autoProCar. initialized = "undefined") {autoProCar. prototype. getName = function () {document. write (this. name + "-----" + this. color + "<br>") ;}; autoProCar. initialized = true;} var car4 = new autoProCar ("Dynamic Prototype", "yellow", "1234565"); car4.getName (); car4.drives. push ("newOne"); document. write (car4.drives );

This method is my favorite. All the class definitions are completed in one function. It looks very similar to the class definitions in other languages and does not create functions repeatedly. You can also use instanceof

I hope this article will help you design JavaScript programs.

Articles you may be interested in:

• Implementation examples of javascript definition classes and Classes
• How to define classes in javascript
• Summary of methods for defining classes in javascript
• Summary of several methods for defining JavaScript classes
• Definition and method of classes in javascript (Study Notes in javascript advanced programming)
• Summary of defining class standards using javascript
• JavaScript class definition and reference JavaScript advanced training custom object
• Code used to obtain the class name of a JavaScript custom class