JavaScript object-oriented 15-minute tutorial

This guide will have you learning to write beautiful object-oriented JavaScript code in no time, I promise! Learning to write concise JavaScript code is very important for the development of a developer. With the emergence of technologies like Node.js, you can now write JavaScript code on the server side. You can even use JavaScript to query persistent databases like MongoDB. sexual data storage.
Start writing Object Oriented JS (OO JS) now, if you have any questions or I missed something, let me know in the comments below.
Literal Notation
Literal Notation is just one way to create objects in JavaScript, and yes, there are more than one way. Literal Notation is the preferred method when you plan to create an object instance.
var bill = {};
The above code is not very useful, it just creates an empty object. Let's dynamically add some properties and methods to this object.
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};
Here we added the "name" attribute and assigned the value to "Bill E Goat ". We don't have to create an empty object before, and we can do all the above in just one step.
var bill = {
      name: "Bill E Goat",
        sound: function() {
              console.log( 'bahhh!' );
                                                  using   using   using   using .                  Accessing properties and methods is also simple.
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"
If the attribute name is not a valid identifier we can still access it like this:
bill['name']; / / "Bill E Goat"
Please note that when calling a method we need to add a pair of brackets after the method name to call it. Let's override the current sound method and call it by passing it a parameter:
bill.sound = function(noise) {
console.log(noise);
};
bill.sound("brrr!"); // "brrr!" He's cold
Great, we passed in a parameter (noise) and accessed it inside the method. Let's continue to add a method to access the name attribute:
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill.sayName(); // "Hello Bill E Goat"
We can access properties inside a method through this.propertyName
bill.sayName; // function
We assign a local method called sound to an object sound. Now we can add parentheses after sound and pass in the parameters to call That's the method. What would happen if we tried 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. Now sally and bill refer to the same object in memory. Changes to one object affect the other.
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?
bill's name attribute is a local variable, and the sayName method is created in the global scope, so this. name will look up the value of name in the global scope. But the problem is that name is not defined. Let's define a global variable name and see what happens:
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 up name in the global scope and accesses the value "Bearded Octo", good. Let’s take a look at Constructor Notation.
Constructor Notation
Constructor Notation is another way to write object-oriented JavaScript. When you need to set initial property values ​​and methods for an object or plan to create different instances of an object but their properties and methods are different, Constructor Notation is preferred. Let’s start by creating an empty object:
function Game() {};
Please note that it is customary to capitalize the first letter to indicate that it is a class. 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 properties! When creating an object, we can pass values ​​into properties or modify them 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; // ""
Second line possible A bit hard to understand. We're using a ternary operator, which is just a way to fit an if else block onto a single line. It is equivalent to the following:
if (typeof title !== 'undefined') {
this.title = title;
} else {
this.title = "";
}
// Is the same as
this .title = typeof title !== 'undefined' ? title : "";
If the title parameter is passed in when this object is created, the title attribute of the object will be set. If not passed in, it will be set to the default value "".
We can create a method to access this property:
zelda.loveTitle = function() {
  console.log( "I love " + this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"
That looks neat, but it could be better. We can add a method to the Game class so that all objects created from the Game class have 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 is useful for you to learn JavaScript object-oriented. JavaScript object-oriented is also There are many aspects, which will be introduced in future tutorials
.