JavaScript Object-oriented

This article turns from HTTP://WWW.YIIBAI.COM/DEMO/4

This article is about JS object-oriented implementation, easy to understand. Worth collecting.

This example is primarily object-oriented JavaScript programming, and learning to write concise JavaScript code is important to the development of a developer, With the advent of technologies like node. JS, you can now write JavaScript code on the server side, and even use JavaScript to query persistent data stores like MongoDB.

Now start writing object-oriented JS (OO js), if you have any questions or I missed something, in the comments below to tell me.

Literal Notation

Literal notation is just one way to create objects in JavaScript, yes, there are more ways than one. Literal notation is the preferred method when creating an object instance.

Varbill = {};

The code above is not very useful, it just creates an empty object. Let's add some properties and methods to this object dynamically.

Bill.name = "Bill E Goat";     Bill.sound =function () {        console.log (' bahhh! ');     };

Here we add the "name" attribute and assign the value "Bill E Goat". We don't have to create an empty object in front of you, and we can do all of it in one step.

var bill = {      name: "Bill E Goat",      sound:function () {        console.log (' bahhh! ');      }     };

It's simple and beautiful, isn't it? Accessing properties and methods is just as easy.

bill.name;//"Bill E Goat" Bill.sound ();//"Bahhh"

If the property name is not a valid identifier, we can also access it:

bill[' name '];//"Bill E Goat"

Notice that when you call a method, we add a pair of parentheses after the method name to invoke it. Let's rewrite the current sound method and pass it a parameter to invoke 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 inside the method. Below we continue to add a method to access the Name property:

Bill.sayname =function () {    console.log ("Hello" +this.name);}; Bill.sayname ();//"Hello Bill E Goat"

We can pass this. PropertyName Accessing properties within a method

bill.sayname;//function

We assign a local method called sound to an object sound, and now you can add parentheses after the sound and pass in the parameter to invoke that method. What happens if we try to clone bill?

var sally = Bill; sally.name;//"Bill E Goat", but she name is sally silly sally.name = "Sally"; sally.name;//"Sally", Better bill.name;//"Sally", Oh no what happened to bill

In the example above 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 can affect the other.

Let's look at another example below:

Bill.name = "Bill E Goat"; Bill.sayname ();//"Hello Bill E Goat"; Varsayname = Bill.sayname; sayname;//function, OK so far so Good sayname ();//"Hello", huh why didn ' t it print out Bills name?

　　

Bill's Name property is a local variable, and the Sayname method is created globally, so this.name looks for the value of name at the global scope. But the problem is that name is not defined. Let's define a global variable name to see what happens:

var name = "Bearded Octo"; Sayname ();//"Hello bearded Octo"

Here we create a global variable name and assign a value of "bearded Octo". When we call the Sayname method, it looks for the name in the global scope and accesses the value "bearded Octo", very well. Here's 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 if you intend to create different instances of an object but their properties and methods are different, then the preferred constructor notation method. The following starts with creating an empty object:

function Game () {};

Be aware that the first letter of the word is used 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"; zelda.title;//"Legend of Zelda" smb.title;//"Super Mario"

　　

Our object now has its own properties! When creating an object, we can pass 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 a bit difficult to understand. We used a ternary operator, which is just a way to write an if Else statement block to a line. He 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 object is created with the title parameter passed, the object's Title property is set. If not passed in, it is 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 can 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

　　

This guide can soon let you learn to write graceful object-oriented JavaScript code, I promise! Learning to write concise JavaScript code is important to the development of a developer, With the advent of technologies like node. JS, you can now write JavaScript code on the server side, and you can even use JavaScript to query persistent data stores like MongoDB.

JavaScript Object-oriented