Experts teach you 15 minutes to master JavaScript Object-Oriented Programming

It is often seen that some JavaScript code is messy and unintelligible. attributes and methods are everywhere, or a loop is nested with a loop. However, if object-oriented code is used, the code can be easily understood and modified. If you do not want your code to be understood only by God, consider using the object-oriented mode whenever possible.

Attributes and methods are everywhere, and the code is very difficult to understand. Oh, my programmer, what are you doing? Take a closer look at this guide. Let's write elegant object-oriented JavaScript code together!

As a developer, writing elegant code is crucial to your career. With the development of technologies such as node. JS, you can even use JavaScript on the server. Similarly, you can use JavaScript to control MongoDB's continuous data storage.

Text mark

Text Markup is only a method for creating objects in Javascript. Of course, this is not the only method,It is the preferred method for creating only one object instance..

1. VaR bill = {};

The above code is not practical. It is just an empty object. Next, we dynamically add some attributes and methods to this object.

1. Bill. Name = "Bill e goat ";
2. Bill. Sound = function (){
3. Console. Log ('hhh! ');
4. };

The property name is added and the value "Bill e goat" is assigned to it ". Instead of creating an empty object, we can write all the Code directly in a pair of parentheses.

 

1. VaR bill = {
2. Name: "Bill e goat ",
3. Sound: function (){
4. Console. Log ('hhh! ');
5. }
6. };

Is it beautiful? Accessing its attributes and methods is as simple and natural as breathing.

1. Bill. Name; // "Bill e goat"
2. Bill. Sound (); // "bahhh"

If the attribute name is not a valid identifier, we can access it as follows:

1. Bill ['name']; // "Bill e goat"

Note: I added parentheses after the method. Now, we will rewrite the current sound method and add a parameter.

1. Bill. Sound = function (Noise ){
2. Console. Log (Noise );
3. };
4. Bill. Sound ("Brrr! "); //" Brrr! "He's cold :)

Well, we have passed in the parameter and accessed it in the method definition. Next, add a new method to the object to access the name attribute.

1. Bill. sayname = function (){
2. Console. Log ("hello" + this. Name );
3. };
4. Bill. sayname (); // "Hello bill e goat"

We can use this. propertyname (in this example, this. Name) to access the property within the method.

1. Bill. sayname; // Function

What's going on? A method definition is returned when you access the sayname method. Now let's go deeper.

1. VaR sound = bill. sound;
2. Sound ('moo! '); // "Moo! "

Now we have specified the sound method as a local function. You can call this function and pass parameters. What do you think will happen when copying bill? (Similar to cloned goat Dolly)

1. VaR Sally = bill;
2. Sally. Name; // "Bill e goat", but its name is Sally
3. Sally. Name = "Sally ";
4. Sally. Name; // "Sally", better
5. Bill. Name; // "Sally", the problem is transferred to Bill.

In the above example, we create a variable Sally and make it the same as Bill, so Bill and Sally will reference the same object in the memory. At this time, they will change at the same time. Let's take a look at the following code:

1. Bill. Name = "Bill e goat ";
2. Bill. sayname (); // "Hello bill e goat ";
3. VaR sayname = bill. sayname;
4. Sayname; // function all goes well so far
5. Sayname (); // "hello", why is the name of Bill no longer displayed here?

The name of Bill is a local instance variable, which is only available to Bill. When the sayname method is created as a global variable, when it encounters this. Name declaration, it looks for the value of name globally. The only problem is that name is not defined yet. Now let's define the name globally to see what will happen:

1. VaR name = "bearded octo ";
2. Sayname (); // "Hello bearded octo"

The name variable is defined globally and the value "bearded octo" is assigned ". When we call the sayhello method, it searches for the name variable globally and obtains the value "bearded octo ". Why don't we create a common "class" for these objects?

Constructor

The constructor is another method for compiling object-oriented JavaScript code,When you need to initialize the attributes and methods of an object, or create instances with different attributes and methods, it will be your best choice.. Similarly, we start by creating an empty object:

1. Function game (){};

This object includes its own attributes. You can even pass in the attributes when creating the object and then modify it.

1. VaR Zelda = new game ();
2. VaR SMB = new game ();
3. Zelda. Title = "Legend of Zelda ";
4. SMB. Title = "Super Mario Brothers ";
5. Zelda. Title; // "Legend of Zelda"
6. SMB. Title; // "Super Mario Brothers"

Now this object has its own method! When creating a new object, we can even pass the attribute and then modify it.

1. Function game (title ){
2. This. Title = typeof title! = 'Undefined '? Title :"";
3. };
4. VaR Zelda = new game ("Legend of Zelda ");
5. Zelda. Title; // "Legend of Zelda"
6. Zelda. Title = "ocarina of Time ";
7. Zelda. Title; // "ocarina of time"
8. VaR blank = new game ();
9. Blank. Title ;//""

You may not understand the content of the second line. In fact, you use a ternary operation to avoid the if else of a single line. It is equivalent to the standard if else statement below.

1. If (typeof title! = 'Undefined '){
2. This. Title = title;
3. } Else {
4. This. Title = "";
5. }
6. // Is the same
7. This. Title = typeof title! = 'Undefined '? Title :"";

If the title variable is input when the object is created, the title instance variable is specified as the title value. If no value is input, the title will be initialized to the default value "". We can also create a method to access this property:

1. Zelda. lovetitle = function (){
2. Console. Log ("I love" + this. Title );
3. };
4. Zelda. lovetitle (); // "I love ocarina of time"

This is neat, but we can do better. We can add a method to the game class so that all game class instances can use this method.

1. Game. Prototype. heartit = function (){
2. Console. Log ("I Heart" + this. Title );
3. };
4. Zelda. heartit (); // "I heart ocarina of time"
5. SMB. heartit (); // "I heart Super Mario Brothers"

Postscript: of course, this is only an entry to JavaScript object-oriented programming. Oo JS has a lot to talk about. If you have anything you want to know, you can leave a message at the bottom of the author's blog.

Original article: beardedocto.tumblr.com