Three methods for defining classes in Javascript: javascriptclass

Three methods for defining classes in Javascript: javascriptclass

Three methods for defining classes in Javascript

Javascript itself does not support object-oriented features. It does not have an access control operator and does not define the class keyword. It does not support inherited extend or colons, nor does it support virtual functions, however, Javascript is a flexible language. Let's take a look at how Javascript without a keyword class implements class definition and creates objects.

In object-oriented programming, a class is an object template that defines the attributes and Methods shared by the same group of objects (also known as "instances.
The Javascript language does not support "classes", but you can simulate "classes" using some flexible methods ".

I. constructor Method

This is a classic method and a required method for textbooks. It uses constructor to simulate a "class" and internally uses the this keyword to represent an instance object.

Function Cat () {this. name = "Xiaohua ";}

Use the new Keyword when generating an instance.

Var cat1 = new Cat (); alert (cat1.name); // Xiaohua

Class attributes and methods can also be defined on the prototype object of the constructor.

Cat. prototype. makeSound = function () {alert (" ");}

The main disadvantage of using the "Constructor method" is that it is complicated. Using this and prototype, writing and reading are laborious.

　　

Ii. Object. create () method

In order to solve the disadvantages of the constructor method and generate objects more conveniently, the fifth edition of the International Javascript standard ECMAScript (currently the third edition) proposed a new method Object. create ().
With this method, "class" is an object, not a function.

Var Cat = {name: "Xiaohua", makeSound: function () {alert (" ");}};

Then, directly use Object. create () to generate an instance without using new.

Var cat1 = Object. create (Cat); alert (cat1.name); // cat1.makeSound (); //

Currently, this method is deployed in the latest versions of browsers (including IE9. If you encounter an old-fashioned browser, you can use the following code to deploy it on your own.

If (! Object. create ){

　　　　Object.create = function (o) {　　　　　　 function F() {}　　　　　　F.prototype = o;　　　　　　return new F();　　　　};　　}

This method is simpler than the constructor method, but it cannot implement private attributes and private methods, and data cannot be shared between instance objects. The simulation of "class" is not comprehensive enough.

Iii. Minimalism

The Dutch programmer Gabor de Mooij proposed a new method that is better than Object. create (), which he calls "minimalist approach ). This is also my recommended method.

3.1 Encapsulation

This method does not use this and prototype, and the code is very simple to deploy. this is probably why it is called "minimalism.
First, it simulates the "class" with an object ". In this class, a constructor createNew () is defined to generate instances.

　　var Cat = {　　　　createNew: function(){　　　　　　// some code here　　　　}　　};

Then, in createNew (), define an instance object and use this instance object as the return value.

Var Cat = {

CreateNew: function () {var cat ={}; cat. name = "Xiaohua"; cat. makeSound = function () {alert ("") ;}; return cat ;}};

Call createNew () to obtain the instance object.

Var cat1 = Cat. createNew (); cat1.makeSound (); //

The advantage of this method is that it is easy to understand and has a clear and elegant structure and conforms to the traditional "Object-Oriented Programming" structure. Therefore, the following features can be conveniently deployed.

3.2 inheritance

It is convenient to implement a class that inherits from another class. You only need to call the createNew () method of the former in the createNew () method of the former. First define an Animal class.

Var Animal = {

CreateNew: function () {var animal ={}; animal. sleep = function () {alert ("sleep") ;}; return animal ;}};

Then, call the createNew () method of Animal in the createNew () method of Cat.

Var Cat = {

CreateNew: function () {var cat = Animal. createNew (); cat. name = "Xiaohua"; cat. makeSound = function () {alert ("") ;}; return cat ;}};

In this way, the Cat instance inherits both the Cat class and the Animal class.

Var cat1 = Cat. createNew (); cat1.sleep (); // sleep

3.3 Private attributes and private methods

The createNew () method is private as long as it is not defined on the cat object.

Var Cat = {

CreateNew: function () {var cat ={}; var sound = ""; cat. makeSound = function () {alert (sound) ;}; return cat ;}};

In the above example, the internal variable sound cannot be read from the outside, and can only be read through the public method makeSound () of cat.

　　var cat1 = Cat.createNew();　　alert(cat1.sound); // undefined

3.4 Data Sharing

Sometimes, we need all instance objects to read and write the same internal data. At this time, you only need to encapsulate the internal data in the Class Object and outside the createNew () method.

Var Cat = {

Sound: "", createNew: function () {var cat ={}; cat. makeSound = function () {alert (Cat. sound) ;}; cat. changeSound = function (x) {Cat. sound = x ;}; return cat ;}};

Then, two instance objects are generated:

Var cat1 = Cat. createNew (); var cat2 = Cat. createNew (); cat1.makeSound (); //

In this case, if one instance object modifies the shared data, the other instance object will also be affected.

Cat2.changeSound ("La la"); cat1.makeSound (); // la