For people like me who study javascript by themselves and have no experience in learning other languages, at the beginning, debugging javascript was also a relatively difficult point. Many basic things need to be explored by themselves, and this process is very depressing.
I thought about taking the opportunity to demonstrate the pictures of the above closure blog post using firebug, which can be regarded as a sharing of debugging experience.
The sample code is as follows:
The code copy is 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 monitoring bar on the right can be window objects and variables max, fl, and fn.
At the same time, you can also see the properties of window below. Taking location as an example, you can directly run window.location output in the "Console" and further output the href attribute value of the location. Of course, when referring to properties and methods of window objects, you do not need to use the form "window.xxx" but directly use "xxx".
Get back to the point,
Go back to the "Script" column, debug javascript and view variable values by hitting "breakpoints".
There are several concepts that you can first understand: breakpoints, step-by-step entry, step-by-step skip, and step-by-step exit. I won't describe it here.
This time, we mainly use the method of setting breakpoints and entering step by step.
You can click to set a breakpoint at the left line mark, and the right-click to make a regular judgment.
Multiple breakpoints can be set, and the set breakpoints can be deleted in the "Breakpoint" column.
Here you break the point directly at the beginning of the script tag and refresh the page.
at this time
1. The original window object in the monitoring area on the right becomes this and points to window. Output this.location in the "Console" will get the same result as the location.
2. The global variables max and fl are initialized to undefined
3. fn() is a function declaration, because the parser will read the function declaration first and make it available before executing any code (accessible)
Click the "Single-Step Enter" button in the upper right corner
Execute the code step by step and view this, the changes in the value of each variable, and the stack in the monitoring area. You can refer to the recommended blog.
Then come another example of this
The code is as follows:
The code copy is 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 in", you can see that when executing the c() line of code, you enter getNameFunc, this changes from pointing to window object to obj, and the console outputs 'The local'.
Step-by-step execution allows you to see the running logic of the entire code very clearly.
The above is a summary of the method of using Firebug's debugging function to understand JavaScript closures and this. I hope you like it