Discussion on JavaScript Objects

Author：Eve Cole Update Time：2025-02-10 11:50:24

Due to the flexibility of JavaScript, everyone can write code according to their own habits. There are functional programming methods and there are also a wider range of object literals used now. Due to the emergence of object-oriented, the function programming in JavaScript has gradually begun. Evolved into a class programming method. Now I will give a brief explanation of several more 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 features, contains attribute name, method setName and getName in the unit of class. Calling the method is simpler person.setname('R'), this all points to person, and the properties and methods of person are both It is not private and can be called.

2. Prototype constructor call 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. Create a Person class, then use prototype to extend the class and add methods. The biggest difference from object literals is that when calling the method of this class, you must first new (similar to Java calling class). var p = new Person();p.getName(); If you create it directly without new, an error will be generated. Moreover, this error will not report an error and is difficult to detect. The reason for the error comes from this pointing to Person.prototype, and Person does not have a setName method.

3. Use anonymous functions to program functions

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 emergence of global variables, but if you are still accustomed to functional programming, it doesn't matter. Just create an anonymous function and perform closures, and you can program the function inside, and there is no need to Worry about the emergence of global variables. As seen above, var name cannot be called outside anonymous functions, and then use external variables to call internal functions or variables. You can use this to create private variables and private methods.

4. Classical programming (I don’t know what name it is)

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 the object literals, but the difference is that it is aside this and can private methods and attributes. The calling method is basically the same as the 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 link library. If you don’t know what the method link 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 the end of each method is return this; a method chained class is generated.

I am more familiar with these methods. Everyone has their own characteristics, so the methods are endless. But with this, I want to discuss the following issues:

1. About this pointer

This is used when creating various types, but what is this function? In fact, this plays a great role in reuse and inheritance. Let’s take a look at an example about inheritance:
First create the Person class:

The following is the quoted content:

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

The following is the quoted content:

This is inheritance, and then let's 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; // At this time this points to body
documentnet.getElementById('color').onmouseout = SetColor; //this points to documentnet.getElementById('color')

After seeing the function of this, I must have a new understanding of this. Now I have a question, whether this should be used or not. Let’s take a 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
}
}

Just in a class, this points to two places, and sometimes this always makes people feel confused. People who have just learned will be even more confused by this. And slightly change the way to write 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 reuse of methods
}
}

In this way, the code can be clearer. Therefore, when writing the code, you should consider the future use and whether it can be reused. If it is clear that it will not be inherited or reused, I personally think that this should be avoided as much as possible. There is a more common problem. 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'); //Error method At this time, this in the setName method will point to Person.prototype, Person does not have a setName method

As mentioned earlier, if you do not write it as var p = new Person(); p.setName('tom'); this in this class will directly point to Person.prototype. This error is not at compile time or runtime. It will report an error. Sometimes it can cause headaches. So when writing code, I always choose this carefully.

2. Class encapsulation

In Java, the methods or properties of the class can be set to private, so that external calls can be avoided. However, JavaScript does not have such settings. 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 2 methods, namely init and setName. We only want to run setName from init, or various methods that will be added to it in the future, without expecting it to appear:

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

Call the setName method directly. To be honest, I hope the setName method is private and the name attribute is private. Avoid other programmers calling methods that they do not want to be called when using your class.
So how should we package the class? Try another programming method and see how the revised version looks like:

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, we can say that the methods and attributes that were originally intended to be privatized are privatized, and the external cannot be called directly. This is also the method required to achieve the problem by using closures. However, this programming method is not easy to read, especially for beginners. It will be very difficult to see this kind of code, and it also occupies more memory than ordinary ones.
Okay, let’s all for now. Next time I have time to talk about closures and scopes.