JavaScript Object Discussion

Due to the flexibility of JavaScript, everyone can write code according to their own habits. There are functional programming methods, and there are also object literals that are widely used today. Due to the emergence of object-oriented, the functional programming that JavaScript just started has also gradually Evolved into class programming. Now I will briefly explain several familiar programming habits:

1. Object literal:

The following is the quoted content: var person = { name:null, setName:function(name){ this.name = name; return this.name; }, getName:function(){ alert(this.name); } }

A programming method with JavaScript characteristics. It contains the attribute name, methods setName and getName in class units. It is relatively simple to call the method person.setname('R'). From this point onwards, this points to person, and the attributes and methods of person are all Not private, can be called.

2.Prototype constructor calling mode

The following is the quoted content: var Person = function(){ this.name = null; } Person.prototype.setName = function(name){ this.name = name; } Person.prototype.getName = function(){ alert(this.name); }

It is also a very common programming method to create a Person class, and then use prototype to extend the class and add methods. The biggest difference from object literals is that when calling methods of this class, you must first use new (similar to Java calling classes). var p = new Person();p.getName(); If you create it directly without using new, an error will occur. And this error will not be reported and is difficult to find. The reason for the error comes from this pointing to Person.prototypel, and Person does not have a setName method.

3. Use anonymous functions for functional programming

The following is the quoted content: (function(){ var name; var setName = function(n){ name = n; } window['person']['setName'] = setName; var getName = function(){ alert(name); } window['person']['getName'] = getName; })()

One of the biggest benefits of the emergence of classes is that it reduces the occurrence of global variables. But if you are still used to functional programming, it doesn’t matter. As long as you create an anonymous function and perform closure, you can perform functional programming in it. No need to Worry about the appearance of global variables. As you can see above, the var name cannot be called outside the anonymous function. Then use external variables to call internal functions or variables. You can use this to create private variables and private methods.

4. Class programming (I don’t know what to call it)

The following is the quoted content: var person = function(){ var name = null; return{ setName:function(n){ name = n; }, getName:function(){ alert(name); } } }

It is very similar to object literals, except that this is left aside, and methods and properties can be made private. Calling methods is basically the same as object literals.

5.Method chain

The following is the quoted content: var Person = function(){ this.name = null; } Person.prototype = { setName:function(name){ this.name = name; return this; }, getName:function(){ alert(this.name); return this; } }

jQuery is the most classic method chaining library. If you still don’t understand what method chaining is, take a look at this example:

The following is the quoted content: var p = new Person(); p.setName('Tom').getName().setName('Ray').getName();

Since each method ends with return this; a method-chained class is created.

These are the methods that I am more familiar with. Everyone has their own characteristics, so there are endless methods. However, I would like to explore the following issues:

1. About this pointer

This is used when creating multiple categories, but what is the role of this? In fact, this plays a big role in reuse and inheritance. Let's first look at an example of inheritance:
First create the Person class:

The following is the quoted content: var Person = function(){ this.name = null; } Person.prototype.setName = function(name){ this.name = name; } Person.prototype.getName = function(){ alert(this.name); } Person.prototype.getAge = function(){ var age = this.age || ''; alert(age); }

Then create a Children class and integrate all methods and properties of Person:

The following is the quoted content: var Children = function(age){ this.name = null; this.age = age; } Children.prototype = new Person(); //Inherit the properties and methods of Person Children.prototype.ageJudge = function(){ //Also add a new method for Children if(this.age > 18){ alert('adult~'); } else { alert('Under 18 years old~'); } } Children.prototype.getName = function(){ //Override the getName method var about = this.name + ' ' + this.age; alert(about); } var tom = new Children(12); var ages = tom.getAge(); //12 var judge = tom.ageJudge(); //Under 18 years old~ var setN = tom.setName('Tom'); var get = tom.getName(); //Tom 12

This is inheritance, and then we look at a simple function reuse:

The following is the quoted content: var SetColor = function(){ this.style.backgroundColor = '#000'; //this points to window } document.body.onclick = SetColor; //This points to body at this time documnet.getElementById('color').onmouseout = SetColor; //this points to documnet.getElementById('color') After seeing the function of this, I must have a new understanding of this. Now I have a question, that is, whether this should be used or not. Let's look at a simple example: var setColor = { init:function(obj){ this.obj = obj; //this points to setColor this.obj.onclick = this.color; }, color:function(){ this.style.backgroundColor = '#000'; //this points to obj } }

In just one class, this points to two places, which sometimes makes people confused. People who are just learning will be confused by this. And slightly change the way of writing code:

The following is the quoted content: var setColor = { init:function(obj){ setColor.obj = obj; setColor.obj.onclick = setColor.color; }, color:function(){ this.style.backgroundColor = '#000'; //This can facilitate the reuse of methods } }

In this way, the code can be clearer. Therefore, when writing code, you should consider its future use and whether it can be reused. If it is clear that inheritance or reuse is not to be carried out, I personally feel that you should avoid using this as much as possible. There is another more common problem. It is as follows:

The following is the quoted content: var Person = function(){ this.name = null; } Person.prototype.setName = function(name){ this.name = name; } Person.setName('tom'); //Wrong way: this in the setName method will point to Person.prototypel, Person does not have a setName method

As mentioned before, if it is not written as var p = new Person();p.setName('tom'); this in this class will point directly to Person.prototypel. This error will not occur during compilation or runtime. An error will be reported. Sometimes it will cause headaches. So when writing code, I always choose this carefully.

2. Class encapsulation

In Java, methods or properties of a class can be set as private, so as to avoid external calls, but JavaScript does not have such a setting. Take a look at the following code:

The following is the quoted content: var person = { name:null, init:function(name){ this.setName(name); }, setName:function(name){ this.name = name; return this.name; } } person.init('tom'); //tom

In this class, there are a total of 2 methods, namely init and setName, and we only want to run setName from init, or various methods that will be added to it in the future, and do not want to appear:

person.setName('tom'); //tom

Call the setName method directly. To be precise, you want the setName method to be private, and the name attribute to be private. This prevents other programmers from calling methods you don't want to be called when using your class.
So how should we encapsulate classes well? Try another programming method and see how the revised version goes:

The following is the quoted content: var person = function(){ var name = null; var setName = function(n){ name = n; return name; } return{ init:function(n){ setName(n); } } }

In this way, the methods and properties that were originally intended to be privatized can be privatized and cannot be called directly from the outside. This is also achieved by using closures. However, this programming method is not easy to read, especially for novices. It will be very difficult to see this kind of code, and it will also take up more memory than ordinary ones.
Okay, that’s it for now. I’ll talk about closures and scope next time I have time.