Which of the three ways Javascript defines classes do you prefer?

In object-oriented programming, a class is a template for an object that defines properties and methods common to the same set of objects (also known as "instances"). The Javascript language does not support "classes", but there are some workarounds that can be used to simulate "classes".

First, the constructor method

This is the classic method, and it is also the method that must be taught in textbooks. It simulates a "class" with a constructor and refers to an instance object with the this keyword inside it.

　　function Cat() {

　　　　this.name = "Zhang San";

　　}

When generating an instance, use the new keyword.

　　var cat1 = new Cat();

　　alert(cat1.name); Tom

The properties and methods of a class can also be defined on top of the constructor's prototype object.

　　Cat.prototype.makeSound = function(){

　　　　alert ("Hello I'm a class");

Object.create() law

In order to solve the shortcomings of the "constructor method" and make it easier to generate objects, the fifth edition of the international standard for Javascript (currently in common with the third edition) proposes a new approach.

With this method, a "class" is an object, not a function.

　　var Cat = {

　　　　name: "Li Si",

　　　　makeSound: function(){ alert("Good morning!!" ); }

　　};

Then, generate the instance directly from Object.create(), without using new.

　　var cat1 = Object.create(Cat);

　　cat1.makeSound(); Good morning!!

Major browsers are more compatible with this method. If you encounter an older version of the browser (such as IE6), you can deploy it yourself with the following code.

　　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 properties and private methods, and the data cannot be shared between instance objects, and the simulation of "classes" is not comprehensive enough.

Third, the minimalist method

3.1 Encapsulation

This approach doesn't use this and prototype, and the code is very simple to deploy, which is probably why it's called "minimalist".

First, it also simulates a "class" with an object. Inside this class, define a constructor createdNew() to generate instances.

　　　　createNew: function(){

　　　　　　// some code here

　　　　}

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

　　　　　　var cat = {};

　　　　　　cat.name = "Zhang San";

　　　　　　cat.makeSound = function(){ alert("rustle"); };

　　　　　　return cat;

When used, call the createNew() method to get the instance object.

　　var cat1 = Cat.createNew();

　　cat1.makeSound(); Rustle

The advantage of this approach is that it is easy to understand, clear and elegant in structure, and conforms to the traditional "object-oriented programming" construct, so the following features can be easily deployed.

3.2 Inheritance

It is convenient to have one class inherit from another. Just call the createNew() method of the latter in the former's createNew() method.

Define an Animal class first.

　　var Animal = {

　　　　　　var animal = {};

　　　　　　animal.sleep = function(){ alert("rustle"); };

　　　　　　return animal;

Then, in Cat's createNew() method, call Animatal's createNew() method.

var cat = Animal.createNew();

The resulting Cat instance will inherit both the Cat class and the Animal class.

　　cat1.sleep(); Rustle

3.3 Private Properties and Private Methods

In the createNew() method, as long as the methods and properties are not defined on the cat object, they are private.

var sound = "rustle";

cat.makeSound = function(){ alert(sound); };

The internal variable sound in the above example cannot be read externally, and can only be read through the public method of cat, makeSound().

alert(cat1.sound); // undefined

3.4 Data Sharing

Sometimes, we need all instance objects that can read and write to the same internal data. At this time, just encapsulate this internal data inside the class object and outside the createNew() method.

sound : "Rustle",

cat.makeSound = function(){ alert(Cat.sound); };

cat.changeSound = function(x){ Cat.sound = x; };

Then, two instance objects are generated:

　　var cat2 = Cat.createNew();

At this point, if one instance object modifies the shared data, the other instance object is also affected.

cat2.changeSound ("tweet tweet");

　　cat1.makeSound(); Tweet tweet