Analysis of three methods for defining Javascript classes

Analysis of three methods for defining Javascript classes

I. constructor Method

Function User () {this. name = "James ";}

Use the new Keyword when generating an instance.

Var user1 = new User (); alert (user1.name); // Zhang San

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

User.prototype.sing = function(){　　　alert("only you!");}

Disadvantages: this and prototype are complicated and difficult to write and read.

Ii. Object. create () method

To generate objects more conveniently, the fifth edition of ECMAScript, an international standard for Javascript, proposes a new method Object. create ().

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

Var User = {name: "James", sing: function () {alert ("only you! ");}};

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

Var user1 = Object. create (User); alert (user1.name); // Zhang San user1.sing (); // only you!

Currently, the latest versions of browsers (including IE9) support this method. To be compatible with older browsers, you can use the following code to deploy them 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 User = {　　　　createNew: function(){　　　　　　// some code here　　　　}　　};

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

Var User = {createNew: function () {var user = {}; user. name = "James"; user. sing = function () {alert ("only you! ") ;}; Return user ;}};

Call createNew () to obtain the instance object.

var user1 = User.createNew();　　user1.sing(); // only you!

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 People = {createNew: function () {var people = {};
People. sleep = function () {alert ("sleeping") ;}; return people ;}};

Then, call the createNew () method of People in the createNew () method of the User.

Var User = {createNew: function () {var user = People. createNew (); user. name = "Zhang San"; user. sing = function () {alert ("only you! ") ;}; Return user ;}};

In this way, the User instance inherits both the User class and the People class.
Var user1 = User. createNew (); user1.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 User = {createNew: function () {var user = {}; var sound = ""; user. makeSound = function () {alert (sound) ;}; return user ;}};

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 user1 = User.createNew();　　alert(user1.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 User = {sound: "speak", createNew: function () {var user = {}; user. makeSound = function () {alert (User. sound) ;}; user. changeSound = function (x) {User. sound = x ;}; return user ;}};

Then, two instance objects are generated:
Var user1 = User. createNew (); var user2 = User. createNew (); user1.makeSound (); //

In this case, if one instance object modifies the shared data, the other instance object will also be affected.
User2.changeSound (""); user1.makeSound (); //