Scope of Objects in ECMAScript

Scope refers to the range of applicability of variables.

Public, private, and protected scopes

Concept

In traditional object-oriented programming design, the focus is mainly on public and private scopes. The properties of objects in the public scope can be accessed from outside the object, that is, after the developer creates an instance of the object, they can use its public properties. On the other hand, the properties in the private scope can only be accessed within the object, which means that these properties do not exist to the outside world. This means that if a class defines private properties and methods, its subclasses cannot access these properties and methods.

Protected scope is also used to define private properties and methods, but these properties and methods can still be accessed by its subclasses.

ECMAScript only has public scope

Discussing these scopes in ECMAScript is almost meaningless, because ECMAScript has only one scope - the public scope. All properties and methods of all objects in ECMAScript are public. Therefore, when defining your own classes and objects, you must be very careful. Remember, all properties and methods are public by default!

Suggested solutions

Many developers have proposed effective property scope patterns online to solve this problem in ECMAScript.

Due to the lack of private scope, developers have established a convention to indicate which properties and methods should be considered private. This convention specifies that an underscore should be added before and after the property:

obj._color_ = "blue";

The attribute color in this code is private. Note that the underscore does not change the fact that the attribute is a public attribute; it merely informs other developers that the attribute should be considered private.

Some developers also like to use a single underscore to indicate private members, for example: obj._color.

Static scope

Properties and methods defined by static scope can be accessed from the same location at any time. In Java, a class can have properties and methods without needing to instantiate an object of the class, for example, the java.net.URLEncoder class, whose function encode() is a static method.

ECMAScript does not have a static scope

Strictly speaking, ECMAScript does not have a static scope. However, it can provide properties and methods to the constructor. Remember, a constructor is just a function. A function is an object, and an object can have properties and methods. For example:

function sayHello() {
  alert("hello");
}
sayHello.alternate = function() {
  alert("hi");
}
sayHello(); // Output 'hello'
sayHello.alternate(); // Output 'hi'

Try It Yourself

Here, the method alternate() is actually a method of the function sayHello. It can be called like a regular function to output 'hello', or called as sayHello.alternate() to output 'hi'. Even so, alternate() is a method in the public scope of sayHello(), not a static method.

The keyword 'this'

The function of 'this'

One of the most important concepts to master in ECMAScript is the usage of the keyword 'this', which is used in object methods. The keyword 'this' always refers to the object that calls the method, for example:

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
  alert(this.color);
};
oCar.showColor(); // Output 'red'

Try It Yourself

In the above code, the keyword 'this' is used in the object's showColor() method. In this context, 'this' equals oCar. The following code has the same function as the above code:

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
  alert(oCar.color);
};
oCar.showColor(); // Output 'red'

Try It Yourself

Reasons for using 'this'

Why use 'this'? Because when instantiating an object, it is always uncertain what variable names the developer will use. Using 'this', the same function can be reused in multiple places. Please consider the following example:

function showColor() {
  alert(this.color);
};
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showColor = showColor;
oCar1.showColor();		//Output "red"
oCar2.showColor();		//Output "blue"

Try It Yourself

In the above code, the function showColor() is first defined using this, and then two objects (oCar1 and oCar2) are created. The color property of one object is set to "red", and the color property of the other object is set to "blue". Both objects are given the property showColor, pointing to the original showColor() function (note that there is no naming issue here, because one is a global function and the other is an object's property). Calling each object's showColor(), the output of oCar1 is "red", and the output of oCar2 is "blue". This is because when calling oCar1.showColor(), the this keyword in the function equals oCar1. When calling oCar2.showColor(), the this keyword in the function equals oCar2.

Note that you must use the this keyword when referencing properties of an object. For example, if the following code is used, the showColor() method cannot run:

function showColor() {
  alert(color);
};

If you do not use the object or the this keyword to reference a variable, ECMAScript will treat it as a local or global variable. Then the function will look for a local or global variable named color, but it will not find it. What happens? The function will display "null" in the warning.