Introduction to several methods for defining class classes in JavaScript

In object-oriented programming, classes (Class) are templates of objects (object) that define properties and methods that are common to the same set of objects (also known as "instances").

The JavaScript language does not support "classes," but you can simulate "classes" in some alternative way.

First, the structural function method

This is the classical method, is also the textbook must teach the method. It simulates "class" with the constructor, and within it uses the This keyword to refer to the instance object.

　

The code is as follows	Copy Code
function Cat () { THIS.name = "hairy"; }

When you generate an instance, use the New keyword.

　

The code is as follows	Copy Code
var cat1 = new Cat (); alert (cat1.name); Nagymaros

Class, and can also be defined on top of the prototype object of the constructor.

　　

The code is as follows	Copy Code
Cat.prototype.makeSound = function () { Alert ("Meow meow Meow"); }

For a detailed description of this approach, please see my series of articles "Javascript object-oriented programming", here is not much to say. Its main disadvantage is that it is more complex to use this and prototype, writing and reading are laborious.

Second, object.create () Law

In order to solve the disadvantage of "constructor method", more easily generate objects, JavaScript International standard ECMAScript Fifth edition (currently in the third edition), proposed a new method Object.create ().

In this way, "class" is an object, not a function.

　　

The code is as follows	Copy Code
var Cat = { Name: "Hairy", Makesound:function () {alert ("Meow Meow");} };

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

　

The code is as follows	Copy Code
var cat1 = object.create (Cat); alert (cat1.name); Nagymaros Cat1.makesound (); Meow Meow Meow

This method is currently deployed in the latest versions of the major browsers, including IE9. If you encounter an older browser, you can deploy it yourself with the following code.

　　

The code is as follows	Copy Code
if (! Object.create) { Object.create = function (o) { function F () {} F.prototype = O; return new F (); }; }

This method is simpler than "constructor method", but it can't realize private property and private method, the instance object can not share data, and the simulation of "class" is not comprehensive enough.

Iii. Minimalist Approach

The Dutch programmer, Gabor de Mooij, proposed a better new approach than object.create (), which he called the "minimalist approach" (minimalist approach). This is also the method I recommend.

3.1 Package

This method does not use this and prototype, and the code is very simple to deploy, which is probably why it is called the minimalist approach.

First, it also simulates "class" with an object. Within this class, define a constructor createnew (), which is used to generate the instance.

　

The code is as follows	Copy Code
var Cat = { Createnew:function () { Some code here } };

Then, in CreateNew (), define an instance object that takes the instance object as the return value.

　

The code is as follows	Copy Code
var Cat = { Createnew:function () { var cat = {}; Cat.name = "hairy"; Cat.makesound = function () {alert ("Meow Meow");}; return cat; } };

When used, the CreateNew () method is invoked, and the instance object can be obtained.

　　

The code is as follows	Copy Code
var cat1 = Cat.createnew (); Cat1.makesound (); Meow Meow Meow

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

3.2 Inheritance

It is convenient to have one class inherit from another. As long as in the former CreateNew () method, the CreateNew () method of the latter is invoked.

Define a animal class first.

　

The code is as follows	Copy Code
var Animal = { Createnew:function () { var animal = {}; Animal.sleep = function () {alert ("Sleep Late");}; return animal; } };

Then, in the Cat CreateNew () method, the animal CreateNew () method is invoked.

　

The code is as follows	Copy Code
var Cat = { Createnew:function () { var cat = Animal.createnew (); Cat.name = "hairy"; Cat.makesound = function () {alert ("Meow Meow");}; return cat; } };

This results in a cat instance that inherits both the cat class and the animal class.

　

The code is as follows	Copy Code
var cat1 = Cat.createnew (); Cat1.sleep (); Sleep

3.3 Private properties and private methods

In the CreateNew () method, as long as the methods and properties that are not defined on the Cat object are private.

　

The code is as follows	Copy Code
var Cat = { Createnew:function () { var cat = {}; var sound = "Meow meow meow"; Cat.makesound = function () {alert (sound);}; return cat; } };

The internal variables of the example above are sound and cannot be read externally, only read by the public method of cat MakeSound ().

　　

The code is as follows	Copy Code
var cat1 = Cat.createnew (); alert (Cat1.sound); Undefined

3.4 Data sharing

Sometimes, we need all instance objects to be able to read and write the same internal data. This time, as long as the internal data, encapsulated within the class object, CreateNew () method outside.

　　

The code is as follows	Copy Code
var Cat = { Sound: "Meow meow Meow", 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:

　

The code is as follows	Copy Code
var cat1 = Cat.createnew (); var cat2 = Cat.createnew (); Cat1.makesound (); Meow Meow Meow

At this point, if you have an instance object that modifies the shared data, another instance object can also be affected.

　

code is as follows	copy code
Cat2.changesou nd ("La la la"); Cat1.makesound ();//La La la!