Three ways to analyze JavaScript definition classes

First, the method of constructing function

function User () {this.name = "Zhang San";}

When generating an instance, use the New keyword.

var user1 = new User (); alert (user1.name); Tom

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

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

Cons: More complex, use this and prototype, not easy to write and read.

Second, object.create () Law

To make it easier to generate objects, JavaScript's international standard ECMAScript Fifth Edition, presents a new approach to object.create ().

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

var User = {name: "Zhang San", Sing:function () {alert ("only you!");} };

Then, generate the instance directly with Object.create (), without the need for new.

var user1 = object.create (User); alert (user1.name); Zhang San User1.sing (); Only you!

Currently, the latest version of the major browsers (including IE9) supports this approach. If you want to be compatible with older browsers, you can deploy them 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 "constructor method", but it cannot implement private properties and private methods, nor can data be shared between instance objects, and the simulation of "class" is not comprehensive enough.

Iii. Minimalist Law

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

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 "minimalism."

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

var User = {Createnew:function () {//Some code here}};

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

var user = {Createnew:function () {var user = {};　　　　　　User.Name = "Zhang San";　　　　　　user.sing = function () {alert ("only you!");};　　　　return user; }　　};

When used, the instance object can be obtained by invoking the CreateNew () method.

var user1 = user.createnew (); User1.sing (); Only you!

The benefit of this approach is that it is easy to understand, the structure is clear and elegant, and conforms to 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 another class. As long as in the former CreateNew () method, call the latter's CreateNew () method.

Define a animal class first.

var people = {createnew:function () {var people = {};<pre name= "code" class= "JavaScript" >            people.sleep　　　　　　= function () {alert ("Sleep");};　　　　return people; }　　};

Then, in the user's CreateNew () method, call People's CreateNew () method.

var user = {Createnew:function () {var user = people.createnew ();　　　　　　User.Name = "Zhang San";　　　　　　user.sing = function () {alert ("only you!");};　　　　return user; }　　};

The resulting user instance inherits both the user class and the People class.

var user1 = user.createnew (); User1.sleep (); Go to bed

3.3 Private properties and private methods

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

var user = {Createnew:function () {var user = {};　　　　　　var sound = "speak";　　　　　　User.makesound = function () {alert (sound);};　　　　return user; }　　};

The internal variable sound of the above example cannot be read externally, only through cat's public Method MakeSound ().

var user1 = user.createnew (); alert (User1.sound); Undefined

3.4 Data sharing

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

var user = {sound: "Speak", createnew:function () {var user = {};　　　　　　User.makesound = function () {alert (user.sound);};　　　　　　User.changesound = function (x) {user.sound = x;};　　　　return user; }　　};

Then, build two instance objects:

var user1 = user.createnew ();　　var user2 =user.createnew (); User1.makesound (); Meow Meow

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

User2.changesound ("La la La"); User1.makesound (); La La la

Three ways to analyze JavaScript definition classes