Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to define classes in javascript. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

JavaScript defines three methods of a class: 1, using the constructor to define the class, the syntax is "function name () {this.name=value;}"; 2, using the "Object.create ()" method to define the class; 3, using the "createNew ()" method to define the class.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What are the three methods that javascript defines a class?

In object-oriented programming, a class is a template for an object (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 it can be simulated in some flexible ways.

I. Constructor function method

This is not only a classical method, but also a compulsory teaching method in textbooks. It uses constructors to simulate "classes" and refers to instance objects with the this keyword inside.

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

When generating an instance, use the new keyword.

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

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

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

For a detailed introduction to this approach, see the series "JavaScript object-oriented programming", which I won't say much about here. Its main disadvantage is that it is complex to teach, uses this and prototype, and is laborious to write and read.

II. Object.create () method

In order to solve the shortcomings of the "constructor method" and generate objects more conveniently, a new method, Object.create (), is proposed in the fifth edition of JavaScript's international standard ECMAScript (currently the third edition).

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

Var Cat = {name: "Big hair", makeSound: function () {alert ("Meow");}}

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

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

Currently, this method is deployed in the latest versions of major browsers, including IE9. If you encounter an older browser, 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 can not implement private properties and private methods, the data can not be shared between instance objects, and the simulation of "class" is not comprehensive enough.

III. Minimalist method

Dutch programmer Gabor de Mooij has come up with a new approach that is better than Object.create (), which it calls "minimalist" (minimalist approach). This is also the method I recommend.

3.1 Encapsulation

This method is not suitable for this and prototype, and the code is very simple to deploy, which is probably why it is called "minimalist method".

First of all, it also uses an object to simulate the "class". In this class, you define a constructor, caeateNew (), to generate the instance.

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

Then, in carateNew (), define an instance object and take it as the return value.

Var Cat = {createNew: function () {var cat = {}; cat.name = "big hair"; car.makeSound = function () {alert ("Meow");};}

When you use it, you can get the instance object by calling the createNew () method.

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

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

This is the end of this article on "how to define classes in javascript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.