Teach you how to use the Firebug debugging feature to learn about JavaScript closures and This_javascript tips

As for me, self-study JavaScript and no other language learning experience, in the beginning, JavaScript debugging is also a big difficulty, a lot of basic things need to find their own, the process is very depressed.

Think of the opportunity will be the above closed Bauboven map with Firebug again to demonstrate again, is a bit of debugging experience to share.

The sample code is as follows:

Copy Code code as follows:

function fn () {
var max = 10;
return function bar (x) {
if (x > Max) {
Console.log (x);
}
}
}
var fl = fn (),
max = 100;
FL (15);

　　

Select firebug--Script

The right-hand monitor bar can be window objects and variables max, FL, fn.

Also below you can see the properties of the window, taking location as an example, you can run the window.location output directly in the console, further window.location.href the output location href attribute value. Of course, when referring to the properties and methods of a Window object, you do not need to use "window.xxx" as the "xxx" form.

Anyway

Go back to the script bar, debug JavaScript and view variable values by hitting breakpoints.

There are several concepts that can be understood first: breakpoints, stepping in, stepping over, stepping out. Here is the unknown.

This is mainly the use of setting breakpoints, one step into the way.

You can click the set breakpoint at the left row mark, and the right key to the breakpoint can be judged.

You can set multiple breakpoints, and you can delete the breakpoints you have set in the Breakpoints bar.

Here you break the page directly at the beginning of the script tag and refresh the pages.

Now

1, the right monitoring area of the original window object into this, and point to window. In the console output this.location will get the same result as location.

2, global variable Max, FL initialized to undefined

3. Fn () is a function declaration because the parser takes the lead in reading the function declaration and makes it available (accessible) before executing any code

Click the "Step Into" button in the upper right corner

Execute the code successively and view this, the values of each variable, and the stack in the monitoring area. It can be cross-referenced to the recommended blog.

And then another example of this one
The code is as follows:

Copy Code code as follows:

var name = ' The Window ';
var obj = {
Name: ' The local ',
Getnamefunc:function () {
Console.log (this.name);
return function () {
Console.log (this.name);
};
}
};
var c = Obj.getnamefunc ();
C ();

Still "Step into", you can see in the execution C () This line of code, enter into the getnamefunc inside, this from point to the Window object into obj, the console output ' the local '.

Step-by-Step execution makes it very clear to see the logic of the entire code running.

This is the article about using Firebug debugging features to learn about JavaScript closures and this method summed up, I hope you can enjoy