Basic Review of Javascript (2) js scope, javascriptjs

Basic Review of Javascript (2) js scope, javascriptjs

This is the last article in the expression series from simple to deep, but recently the team has been busy and never been busy! However, if you like expressions, please rest assured that some basic principles of Javascript are common in your work, so I decided to spend some time organizing the basic knowledge and sharing it with you. A training PPT will be attached later. I was planning to write an article at the beginning, but later I wrote it and found more and more articles. So I decided to write a series. All content in this series involves Javascript basics, and there are no trendy things, but I believe these basic things will help you understand those interesting things.

• Basic Review of Javascript (1) Type
• Basic Review of Javascript (ii) Scope
• Basic Review of Javascript (3) Object-oriented

This article is the second part of the Javascript series that you must know. Let's take a look at the variable scope issues in Javascript. It mainly involves the following:

Parameter transfer problems
What is scope and scope chain?
Block-level scope
Extended scope chain
Parameter transfer problems

All parameters in Javascript are passed by value. That is to say, copying the value outside the function to the parameter inside the function is the same as copying the value from one variable to another. The transfer of the basic type value is the same as that of the basic type variable. The transfer of the reference type value is the same as that of the reference type variable.

-- The third edition of Javascript Advanced Programming

function addTen(num) { num += 10; return num;}var count = 20;var result = addTen(count);alert(count) // 20alert(result) // 30

I think the transfer of value types should be very simple, so we will not talk much about it. Let's take a look at the value transfer of reference types.

function setName(person){ person.name = "Jesse";}var person = new Object();setName(person);alert(person.name); //Jesse

This function also changes the value of our external object, which is the same as that of C. Because the person in the function points to the same address as the external person points. The following behavior is the same as that of C #, that is, if the parameter is directed to another object in the function content, it will not affect the external object.

function setName(person){ person.name="Jesse" person = new Object(); person.name = "Another Jesse";}var person = new Object();setName(person);alert(person.name); //Jesse

Copy of the reference type.

1. Allocate a space in the heap to the person object and save the person address reference in the stack.
2. Copy the address of the person in the heap to reference person2 (also in the stack)
3. New Person () allocates a space in the heap to the person2 object again, and points the person2 in the stack to the new address.
4. Subsequent changes to person2 will not affect person

What is scope and scope chain?

We know that there are local variables and global variables in JavaScript, and the local variables in a function cannot be accessed in another function (not to mention closures for the moment ). This is the role of the scope, because the variable only works in the function where it is located.

Each function has its own execution environment, and each execution environment has a variable object associated with it. All the variables and functions in this environment are saved in this variable. In addition to the function's own execution environment, we also have the largest global execution environment, and the well-known window is the variable object of this global execution environment, because all global variables and functions are created as window attributes and methods. After all the code in each environment is executed, the environment is destroyed, and all the variables and functions stored in the environment are destroyed. For the global execution environment, if you close the browser or exit the page, the global execution environment will be destroyed.

But can I only access the variables in this function? As you may know, there are also global variables that can be accessed by any function (Javascript does not have keywords such as public, private, and protected) or any js introduced to the page. This is what we often call the scope chain. The function of the scope chain is to ensure orderly access to all variables and functions that the execution environment has the right to access. Why is sequential access? Let's take a look at the following code:

var color = "blue";function alertColor(){ var color = "red"; alert(color);}alertColor(); // redalert(color); // blue

We all know that if the local variable and global variable have the same name, the global variable will be overwritten, but it is not actually overwritten. It is only overwritten in the current function, we can still use it externally. This involves an orderly access to the execution environment.

The frontend of the scope chain is always the variable object in the environment where the code is currently executed. For our alertColor, it is its own activity object. All function activity objects contain an initial value, which is our arguments. The next object of the scope chain comes from the contained external environment and continues to the global environment. The scope chain of all functions may extend to the global environment, which is why global variables can be accessed in all functions, not because they are called global variables, so it can be accessed in all functions :) and the environment variable of the global execution environment is always the last object of the scope chain.

Let's look at a complicated example:

Var color = "blue"; function changeColor () {var anotherColor = "red"; function swapColors () {var tempColor = anotherColor; anotherColor = color; color = tempColor; // you can access color, anotherColor, tempColor}. // you can only access anotherColor swapColors () ;}// colorchangeColor ();

In the above Code, we have three execution environments: Global Environment, changeColor local execution environment, and swapColors local execution environment. In the global environment, there is only one variable color and one function changeColor (). ChangeColor has a variable anotherColor and a function swapColors (), but it can access the color in the global environment. SwapColors has a local variable tempColor, Which is inaccessible only in the changeColor or global environment. Then, swapColors can access all the variables in the other two environments, because the other two environments are their parent execution environments.

We can find that the scope chain is extended from the inside out. We can access the variables and functions of the external environment through the scope, but the variables and functions of the internal environment cannot be accessed in the external environment. We use the global variable color in swapColors, but it does not find the color at once. It has an internal and external search process:

1. Search for a local variable named color in the current execution environment. The variable is not found and is raised to the next level.
2. In the parent-level execution environment changeColor, the variable called color is not found, and then raised to the next level.
3. The color variable is found in the parent level of changeColor and can be used directly.

Block-level scope
Because there is a block-level scope (starting with curly braces), such code in C # cannot be compiled.

static void Main(string[] args){ for(var i=0;i<=10;i++) {  Console.Write(i); } Console.Write(i);}

We cannot access I any more than the for loop. However, Javascript is totally different.

for (var i = 0; i <= 10; i++){ //}alert(i); // 11

Extended scope chain
As mentioned above, there are only two execution environments in Javascript: global and local. However, we can use with and try-catch to extend the scope. Because there are few common scenarios, we can use with for example.

function buildUrl() { var qs = "?debug=true"; with(location){  var url = href + qs; } return url;}

With, the location variable is added to the frontend of the scope, so all the variables and methods in the location can be accessed within the with range.

The above is the scope content we will talk about. Let's summarize it:

• The value type is passed by value, and the reference type is passed by reference. The transferred industry is the same as that used to copy variables.
• Javascript has two execution environments: global and local (function)
• In the execution environment, a variable object defines the variables and functions that can be accessed in the execution environment.
• The execution environment can be extended from the inside to the outside to the global execution environment.
• Javascript has no block-level scope

Next, let's take a look at how to implement public and private attributes in Javascript if object-oriented programming does not include public, protected, private, and other keywords? How does one implement static variables? Do not go away. After the New Year's Day holiday, we will continue our Javascript basic review journey.