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

How to analyze the way of writing JavaScript, I believe that many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

From this article, there will be about 5-8 articles about the way JS OO is written from shallow to deep. Later, we will analyze the way popular libraries (frameworks) are written. Some of the ways to write class tools or frameworks are essentially constructors + prototypes. Only by understanding this can you really understand how to write object-oriented code in JavaScript. Or the way code is organized in an object-oriented way. Of course, you can also write functional code with JS, which is multi-generic.

For the sake of singleness discussed, class inheritance, (private, protected) properties or methods are not considered for the time being. There is no real concept of class in EMCAScript, but it can be understood as a broader concept.

1. Constructor mode

/ * Person class: define a person with an attribute name, and a getName method * @ param {String} name * / function Person (name) {this.name = name; this.getName = function () {return this.name;}}

This style makes it a bit intimate to write Java in that you need to configure some parameters to construct an object, and the parameters are assigned to the this in the class. But the difference from Java is that JS uses function instead of class, and parameters do not need to define types.

After the class is written, let's create a few objects:

Var p1 = new Person ("Jack"); var p2 = new Person ("Tom"); console.log (p1 instanceof Person); / / true console.log (p2 instanceof Person); / / true

The console output also proves that p1Magi p2 is indeed an object instance of class Person.

The advantage of this approach is that different object instances can be constructed according to the parameters, but the disadvantage is that each instance object will generate a version of the getName method during construction, resulting in a waste of memory.

Experienced programmers replace class methods with an external function so that every object shares the same method. The rewritten class is as follows:

/ / external function function getName () {return this.name;} function Person (name) {this.name = name; this.getName = getName;// Note here}

Some people may think that the style of the code is a little less satisfactory, and it is not as compact as Java. But it does reduce memory consumption.

2. Prototype mode

/ * Person class: defines a person with an attribute name and a getName method * / function Person () {} Person.prototype.name = "jack"; Person.prototype.getName = function () {return this.name;}

Hang the properties (fields) and methods of the class on prototype.

Build a few objects to test

Var p1 = new Person (); var p2 = new Person (); console.log (p1.getName ()); / / jack console.log (p2.getName ()); / / jack

You can see that the output is jack, and the disadvantage of the prototype approach is that you cannot construct object instances through parameters (generally, the properties of each object are different). The advantage is that all object instances share getName methods (relative to constructor methods), resulting in no memory waste.

3. Constructor + prototype

Take the advantages of the first two:

A, use constructors to define class properties (fields).

B. define the method of the class in a prototype way.

/ * Person class: define a person with an attribute name, and a getName method * @ param {String} name * / function Person (name) {this.name = name;} Person.prototype.getName = function () {return this.name;}

In this way, people with different name can be constructed through constructors, and object instances also share getName methods without wasting memory.

But it seems that this code style is still not as compact as the Java class, wrapping properties, constructors (functions), and methods in curly braces.

Public class Person {/ / attribute (field) String name; / / constructor (function) Person (String name) {this.name = name;} / / method String getName () {return this.name;}}

To make the JS code more compact, move the method code hanging on the prototype to the curly braces of the function Person.

Function Person (name) {this.name = name; Person.prototype.getName = function () {return this.name;}}

It seems amazing to be able to write like this! Verify it.

Var p1 = new Person ("Jack"); var p2 = new Person ("Tom"); console.log (p1.getName ()); / / Jack console.log (p2.getName ()); / / Tom

No error was reported, and the console output was correct. The description can be written in this way, it seems very *.

A. You can construct an object instance by passing parameters

B. all object instances share the same method without causing memory waste

C, the code style is also relatively compact.

But every time new an object, it executes.

Person.prototype.getName = function () {return this.name;}

Resulting in unnecessary repetitive operations. Because the getName method is hung on the prototype and only needs to be executed once. It just needs a little modification.

Function Person (name) {this.name = name; if (Person._init==undefined) {alert ("I only do it once!") ; Person.prototype.getName = function () {return this.name;} Person._init = 1;}}

New two objects

Var p1 = new Person ("Andy"); / / * every new will pop up "I only do it once!" Var p2 = new Person ("Lily"); / / after reading the above, do you know how to analyze the way JavaScript writes classes? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.