Common Error Summary _javascript techniques for JavaScript variable scope use

Source: Internet
Author: User
Tags function definition variable scope

Today in Rainweb's blog, saw this very good article, feel very necessary to share out, I believe that we read this article carefully, the understanding of JS scope will rise to a new level.

Preface: The variable scope of JavaScript is a problem that often lets a person have a headache and is mad, the following through 10++ a topic, the situation that often encounters and error is easy to summarize, the code sample is very short very simple

Topic One

Copy Code code as follows:

var name = ' Casper '; alert (name); No doubt output: Casper

Topic Two
Copy Code code as follows:

alert (name); Error: Object undefined, even with a variable that does not exist
Age = 24; The wood here is wrong, but age is not defined? Turn down the Rhino book, understand. Assigning a value to an undefined variable creates a global variable, equivalent to: var age = 24

Topic Three
Copy Code code as follows:

alert (name); Name below the definition, there must be an error? Wrong! Here pops up: undefined
var name = ' Casper ';

Explanation: JavaScript code, when parsing, searches for variables in the Var declaration, and its declaration is advanced, and the actual process is as follows:
Copy Code code as follows:

var name; The light declares the name variable but does not assign a value, so this is: undefined
alert (name); name = ' Casper ';

Topic Four
Copy Code code as follows:

var name = ' Casper ';
Function Show () {
alert (name);
name = ' Hello '; Change the value of the global variable name to ' Hello '
}
Show (); Output: Casper

Topic Five
Copy Code code as follows:

var name = ' Casper ';
Function Show () {alert (name);/output: Undefined, is there a heart that wants to die?
var name = ' Hello '; Note: As compared to topic four, there is a VAR before name here,
Show ();

Explanation: In function show, name is a local variable, and the principle of topic three applies to this, that is, the function show interior is actually
(Small knowledge point supplement: When the function has the same name as the external global variable local variables, precedence of local variables, here is name)
Function Show () {var name; alert (name); name = ' Hello ';}
Topic Six
Copy Code code as follows:

var list = [1,2,3];
Function Show () {if (typeof list = = ' undefined ')
{list = [];}
alert (list.length);
};
Show (); Results: 3, is not a glance = =, wait, please continue to see the seventh question

Topic Seven
Copy Code code as follows:

var list = [1,2,3];
Function Show () {
if (typeof list = = ' undefined ')
{var list = [];//Please note that there is more var than topic six.
alert (list.length); };
Show (); Result: 0, did not suddenly have the impulse to die

Explanation: JavaScript does not have a block-level scope (that is, scoped by {}), all variables declared in the function, no matter where declared, in the entire function are defined, this is different from C + + and so on, and quickly reverse the idea of advancing with the Times
So, let's look at the actual internal analytic logic of Show method
Copy Code code as follows:

Function Show () {var list;//list is a local variable and has not been assigned here
if (typeof list = = ' undefined ') {
list = []; }
alert (list.length); };

Topic Eight
Copy Code code as follows:

Alert (typeof show); Result: function, please believe your eyes, you are not wrong
Function Show () {}

Explanation: The process of parsing JavaScript code, like function show () This form of declaration of functions, like the Var declaration of the variable, will be mentioned at the top, the difference is that the function declaration with the definition is complete, but the Var declaration of the variable value of the assignment will not be completed later
Topic Nine
Copy Code code as follows:

Alert (typeof show); Result: Undefined, please polish your eyes again, you are right.
var show = function () {};

Explanation: There are some differences between the two processes by using function definitions and function expression definitions
function definition: Functions Show () {}
function expression: var show = function () {}
By using the method of function definition declaration, the definition of function is advanced, and the method of function expression declaration, the function definition is the same as the local variable with var declaration, the function declaration is ahead, but the function definition position is the same, the procedure is as follows:
Copy Code code as follows:

var show; Alert (typeof show);
Show = function () {};

Topic Ten
Copy Code code as follows:

var data = {name: ' Casper '};
function data () {alert (' Casper ');}
Data (); Typeerror:object is not a function

Is there an impulse to smash the monitor ... Data at this time is actually {name: ' Casper '}, an object when the function call, so the error
As mentioned earlier, the function declaration (through the function definition), VAR declaration of the variables will be ahead, but there will be a sequence of points, as follows:
Copy Code code as follows:

function data () {alert (' Casper ');
} var data; data = {name: ' Casper '};
Data ();

Slightly modified, the result is different from the bird:
Copy Code code as follows:

var data = {name: ' Casper '};
var data = function () {//Declaration of functions by function expression
Alert (' Casper '); }
Data (); Result: Casper

Combining the above is not difficult to guess the process is as follows:
Copy Code code as follows:

var data; data = {name: ' Casper '};
data = function () {alert (' Casper ');}
Data (); Result: Casper

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.