JavaScript object-oriented 15-minute tutorial

This guide will soon allow you to learn to write beautiful object-oriented JavaScript code. I promise you! Learning to write concise JavaScript code is very important to a developer's development. with the emergence of js technology, you can now write JavaScript code on the server side. You can even use JavaScript to query persistent data storage such as MongoDB.
Now I am writing object-oriented JS (oo js). If you have any questions or I have missed something, I will comment on it and tell you.
Literal Notation
Literal Notation is only a method for creating objects in JavaScript. Yes, there are more than this method. Literal Notation is the preferred method when you plan to create an object instance.
Var bill = {};
The above code is not very useful, but only creates an empty object. Let's dynamically add some attributes and methods to this object.
Bill. name = "Bill E Goat ";
Bill. sound = function (){
Console. log ('hhh! ');
};
Here we have added the "name" attribute and assigned it as "Bill E Goat ". We don't have to create an empty object before, but we can do everything in one step.
Var bill = {
Name: "Bill E Goat ",
Sound: function (){
Console. log ('hhh! ');
}
};
Simple and beautiful, right? The access attributes and methods are also very simple.
Bill. name; // "Bill E Goat"
Bill. sound (); // "bahhh"
If the property name is not a valid identifier, we can access it as follows:
Bill ['name']; // "Bill E Goat"
Note that when calling a method, we need to add a pair of brackets after the method name to call it. Let's rewrite the current sound method and pass it a parameter to call it:
Bill. sound = function (noise ){
Console. log (noise );
};
Bill. sound ("brrr! "); //" Brrr! "He's cold
Well, we passed in a parameter (noise) and accessed it within the method. Next, we will add a method to access the name attribute:
Bill. sayName = function (){
Console. log ("Hello" + this. name );
};
Bill. sayName (); // "Hello Bill E Goat"
You can use this. propertyName to access attributes in a method.
Bill. sayName; // function
We assign a local method called sound to the sound object. Now we can add brackets behind the sound and input parameters to call that method. What will happen if we try to clone Bill?
Var sally = bill;
Sally. name; // "Bill E Goat", But her name is Sally silly
Sally. name = "Sally ";
Sally. name; // "Sally", Better
Bill. name; // "Sally", Oh no what happened to Bill
In the above example, we created a new variable sally and made it equal to bill. Currently, sally and bill reference the same object in the memory. Changes to one object will affect the other.
Next, let's look at another example:
Bill. name = "Bill E Goat ";
Bill. sayName (); // "Hello Bill E Goat ";
Var sayName = bill. sayName;
SayName; // function, OK so far so good
SayName (); // "Hello", huh why didn't it print out Bills name?
The name attribute of bill is a local variable, and the sayName method is created globally. Therefore, this. name searches for the name value globally. However, the problem is that the name is not defined. Let's define a global variable name to see what will happen:
Var name = "Bearded Octo ";
SayName (); // "Hello Bearded Octo"
Here we create a global variable name and assign the value "Bearded Octo ". When we call the sayName method, it looks for the name globally and accesses the value "Bearded Octo", which is good. Next let's take a look at Constructor Notation.
Constructor Notation
Constructor Notation is another method for writing object-oriented JavaScript. When you need to set the initial attribute value and method for an object or create different instances of an object, but their attributes and methods are different, the Constructor Notation method is preferred. The following describes how to create an empty object:
Function Game (){};
Note that it is a class in upper case. Let's use this class to create a new object:
Var zelda = new Game ();
Var smb = new Game ();
Zelda. title = "Legend of Zelda ";
Smb. title = "Super Mario Brothers ";
Zelda. title; // "Legend of Zelda"
Smb. title; // "Super Mario Brothers"
Our object now has its own attributes! When creating an object, we can transfer the value in the attribute or modify it later.
Function Game (title ){
This. title = typeof title! = 'Undefined '? Title :"";
};
Var zelda = new Game ("Legend of Zelda ");
Zelda. title; // "Legend of Zelda"
Zelda. title = "Ocarina of Time ";
Zelda. title; // "Ocarina of Time"
Var blank = new Game ();
Blank. title ;//""
The second line may be hard to understand. We use a ternary operator, which is just a way to write the if else statement block to a row. It is equivalent to the following:
If (typeof title! = 'Undefined '){
This. title = title;
} Else {
This. title = "";
}
// Is the same
This. title = typeof title! = 'Undefined '? Title :"";
If the title parameter is input when this object is created, the title attribute of the object will be set. If it is not input, it is set to the default value "".
You can create a method to access this property:
Zelda. loveTitle = function (){
Console. log ("I love" + this. title );
};
Zelda. loveTitle (); // "I love Ocarina of Time"
It looks neat, but it can be better. We can add a method to the Game class so that all objects created from the Game class can use this method:
Game. prototype. heartIt = function (){
Console. log ("I heart" + this. title );
};
Zelda. heartIt (); // "I heart Ocarina of Time"
Smb. heartIt (); // "I heart Super Mario Brothers
Conclusion
I hope this tutorial will be useful for you to learn JavaScript object-oriented. There are many other aspects of JavaScript object-oriented, which will be introduced later in the tutorial. If you have any questions, please leave a comment below. Thank you for reading this article!

 

From tsl0922 @ oschina