Scope and context in JavaScript are unique to the language, thanks in part to the flexibility they bring. Each function has different variable context and scope. These concepts underlie some powerful design patterns in JavaScript. However, this also brings great confusion to developers. The following comprehensively reveals the differences between context and scope in JavaScript, and how various design patterns use them.
context vs scope
The first thing that needs to be clarified is that context and scope are different concepts. Over the years I've noticed that many developers often confuse these two terms, incorrectly describing one as the other. To be fair, these terms have become very confusing.
Every function call has a scope and context associated with it. Basically, scope is function-based and context is object-based. In other words, scope is related to the access of variables on each function call, and each call is independent. The context is always the value of the keyword this, which is a reference to the object that calls the current executable code.
variable scope
Variables can be defined in local or global scopes, which results in runtime variable access from different scopes. Global variables need to be declared outside the function body, exist throughout the running process, and can be accessed and modified in any scope. Local variables are only defined within the function body and have a different scope for each function call. This topic is assignment, evaluation and operation of values only within the call, and values outside the scope cannot be accessed.
Currently, JavaScript does not support block-level scope. Block-level scope refers to defining variables in statement blocks such as if statements, switch statements, loop statements, etc. This means that variables cannot be accessed outside the statement block. Currently any variables defined within a statement block can be accessed outside the statement block. However, this will soon change, as the let keyword has been officially added to the ES6 specification. Use it instead of the var keyword to declare local variables as block-level scope.
"this" context
The context usually depends on how a function is called. When a function is called as a method on an object, this is set to the object on which the method is called:
Copy the code code as follows:
var object = {
foo: function(){
alert(this === object);
}
};
object.foo(); // true
The same principle applies when calling a function to create an instance of an object using the new operator. When called this way, the value of this will be set to the newly created instance:
Copy the code code as follows:
function foo(){
alert(this);
}
foo() // window
new foo() // foo
When calling an unbound function, this will be set to the global context or window object (if in a browser) by default. However, if the function is executed in strict mode ("use strict"), the value of this will be set to undefined by default.
Execution context and scope chain
JavaScript is a single-threaded language, which means that it can only do one thing at a time in the browser. When the JavaScript interpreter initially executes code, it first defaults to the global context. Each call to a function creates a new execution context.
Confusion often occurs here. The term "execution context" here means scope, not context as discussed above. This is poor naming, but the term is defined by the ECMAScript specification and has no choice but to abide by it.
Each time a new execution context is created, it is added to the top of the scope chain and becomes the execution or call stack. The browser always runs in the current execution context at the top of the scope chain. Once completed, it (the current execution context) is removed from the top of the stack and control is returned to the previous execution context. For example:
Copy the code code as follows:
function first(){
second();
function second(){
third();
function third(){
fourth();
function fourth(){
//do something
}
}
}
}
first();
Running the previous code will cause the nested functions to be executed from top to bottom until the fourth function. At this time, the scope chain from top to bottom is: fourth, third, second, first, global. The fourth function can access global variables and any variables defined in the first, second, and third functions just like its own variables. Once the fourth function completes execution, the fourth context will be removed from the top of the scope chain and execution will return to the thrid function. This process continues until all code has completed execution.
Variable naming conflicts between different execution contexts are resolved by climbing the scope chain, from local to global. This means that local variables with the same name have higher priority in the scope chain.
Simply put, every time you try to access a variable in the function execution context, the search process always starts from the own variable object. If the variable you are looking for is not found in your own variable object, continue searching the scope chain. It will climb the scope chain and examine each execution context variable object to find a value that matches the variable name.
closure
A closure is formed when a nested function is accessed outside its definition (scope) so that it can be executed after the outer function returns. It (the closure) maintains (in the inner function) access to local variables, arguments and function declarations in the outer function. Encapsulation allows us to hide and protect the execution context from the outer scope, while exposing the public interface through which further operations can be performed. A simple example looks like this:
Copy the code code as follows:
function foo(){
var local = 'private variable';
return function bar(){
return local;
}
}
var getLocalVariable = foo();
getLocalVariable() // private variable
One of the most popular types of closures is the well-known module pattern. It allows you to mock public, private and privileged members:
Copy the code code as follows:
var Module = (function(){
var privateProperty = 'foo';
function privateMethod(args){
//do something
}
return {
publicProperty: "",
publicMethod: function(args){
//do something
},
privilegedMethod: function(args){
privateMethod(args);
}
}
})();
Modules are actually somewhat similar to singletons, adding a pair of parentheses at the end and executing them immediately after the interpreter finishes interpreting them (execute the function immediately). The only available external members of the closure execution context are the public methods and properties in the returned object (such as Module.publicMethod). However, all private properties and methods will exist throughout the life cycle of the program, because the execution context is protected (closures), and interaction with variables is through public methods.
Another type of closure is called an immediately-invoked function expression IIFE, which is nothing more than a self-invoked anonymous function in the window context.
Copy the code code as follows:
function(window){
var a = 'foo', b = 'bar';
function private(){
// do something
}
window.Module = {
public: function(){
//do something
}
};
})(this);
This expression is very useful for protecting the global namespace. All variables declared within the function body are local variables and persist throughout the entire runtime environment through closures. This way of encapsulating source code is very popular for both programs and frameworks, usually exposing a single global interface to interact with the outside world.
Call and Apply
These two simple methods, built into all functions, allow functions to be executed in a custom context. The call function requires a parameter list while the apply function allows you to pass the parameters as an array:
Copy the code code as follows:
function user(first, last, age){
//do something
}
user.call(window, 'John', 'Doe', 30);
user.apply(window, ['John', 'Doe', 30]);
The result of the execution is the same, the user function is called on the window context and the same three parameters are provided.
ECMAScript 5 (ES5) introduced the Function.prototype.bind method to control context, which returns a new function that is permanently bound to the first argument of the bind method, regardless of how the function is called. It corrects the context of the function through closures. Here is a solution for browsers that do not support it:
Copy the code code as follows:
if(!('bind' in Function.prototype)){
Function.prototype.bind = function(){
var fn = this, context = arguments[0], args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(context, args);
}
}
}
It is commonly used in context loss: object-oriented and event processing. This is necessary because the node's addEventListener method always maintains the function's execution context as the node to which the event handler is bound, which is important. However, if you use advanced object-oriented techniques and need to maintain the callback function's context as an instance of the method, you must manually adjust the context. This is the convenience brought by bind:
Copy the code code as follows:
function MyClass(){
this.element = document.createElement('div');
this.element.addEventListener('click', this.onClick.bind(this), false);
}
MyClass.prototype.onClick = function(e){
//do something
};
When looking back at the source code of the bind function, you may notice the following relatively simple line of code, calling a method on Array:
Copy the code code as follows:
Array.prototype.slice.call(arguments, 1);
Interestingly, it is important to note here that the arguments object is not actually an array, however it is often described as an array-like object, much like the nodelist (the result returned by the document.getElementsByTagName() method). They contain length attributes, and the values can be indexed, but they are still not arrays because they do not support native array methods such as slice and push. However, since they behave similarly to arrays, array methods can be called and hijacked. If you want to execute array methods in an array-like context, follow the example above.
This technique of calling methods of other objects is also applied to object-oriented, when emulating classic inheritance (class inheritance) in JavaScript:
Copy the code code as follows:
MyClass.prototype.init = function(){
// call the superclass init method in the context of the "MyClass" instance
MySuperClass.prototype.init.apply(this, arguments);
}
We can reproduce this powerful design pattern by calling methods of the superclass (MySuperClass) in instances of the subclass (MyClass).
in conclusion
It is very important to understand these concepts before you start learning advanced design patterns, since scope and context play an important and fundamental role in modern JavaScript. Whether we talk about closures, object-oriented, and inheritance or various native implementations, context and scope play an important role. If your goal is to master the JavaScript language and gain a deep understanding of its components, scope and context should be your starting point.
Translator's supplement
The bind function implemented by the author is incomplete. Parameters cannot be passed when calling the function returned by bind. The following code fixes this problem:
Copy the code code as follows:
if(!('bind' in Function.prototype)){
Function.prototype.bind = function(){
var fn = this, context = arguments[0], args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(context, args.concat(arguments));//fixed
}
}
}