Use chrome devtools to learn javascript

The author is Peter Rybin, a member of the Chrome developer tool team.

In: https://gist.github.com/4158604

In this article, we will use Chrome's Developer Tools to learn two important concepts in JavaScript: "closures" and "Internal Attributes ".

Closure

The first thing to talk about is closure-one of the most famous things in JavaScript. A closure is a function that uses external variables. See the following example:

123456789

function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return ar[i]; };}var b = A('Here', 'I', 'am');console.log( b(1) );

The first statement after the function declaration calls function A. function A creates a local variable ar with the value of array [A, B, c] and returns A functionB(Stored in VariablesCenter B), And then the operation ends.

The second statement calls the function.B(b), Returns and prints the array ar. This meansArray ar inA still exists after executionBut where is it stored? Of course, inB! But where exactly does B exist? In a property? No.

This is a core feature of the JavaScript language: A function can hold variables in the outer scope, and there is no other way to access these variables except to call this function.

From now on, chrome Developer Tools can present external variables in the closure. View function instances in the monitoring expression panel.B. Expand its attributes,There should be<Function scope>All bound closure variables can be seen here. These variables are variables that may be used during function calls.

Internal Attributes

The developer tool can also display another thing called internal property ).

Suppose your code has a variable.S, and the following operations are also performed:

1	S. substring (1, 4) // return 'El'

You thinkIs s a string value? This is not necessarily. It may also be a string packaging object. Try the following monitoring expression:

12	"hello"Object("hello")

The first expression is a normal string literal, and the second is an object with full-functionality. what is puzzling is that these two values are almost identical. however, the second expression actually has its own attributes, and you can also add custom attributes to it. expand all its attributes and you will see that it is not a general object: it has an internal attribute [[PrimitiveValue], and the wrapped string value is stored in this attribute. you cannot access this internal attribute in JavaScript code, but you can see it in the developer tool.

What other values have internal attributes? That is, the bound function. The bound function is also a packaging object, but it is packaged as a function. Try to execute the following two statements:

12	Function Sum (a, B) {return a + B;} var inc = Sum. bind (null, 1); // binds the form parameter a to 1, and this to null.

If youSum andInc in the monitoring expression panel for comparison, you will see, They are all functions,Inc is an opaque (non-transparent) function.: You cannot see the content of its function body, nor the scope of its definition.

This is how function binding works. in the developer tool, you will see the three internal attributes [[TargetFunction], [BoundArgs], and [[BoundThis. they all indicateInc is a binding function.And more specific information: the target function bound to inc isSum, Bound to a parameter1. The bound value of this is n.ull.