Learn JavaScript by using Chrome's developer tools

This writer is a member of the Peter Rybin,chrome developer tools team.

In this article, we'll use Chrome's developer tools to learn two important concepts in JavaScript, "closures" and "internal properties."

Closed Package

The first thing to say is one of the most famous things in the closure (closure) –javascript. A closure is a function that uses an external variable. View the following example:

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)); 

 

Console.log (b (1));

Function A is called by the first statement after the function declaration, and function a creates an array of local variable ar values of [A,b,c], returning a functionB(stored in a variableb中), and then run the end.

The second statement calls the functionB(b), and the array ar is returned and printed out. That meansA中的数组ar在A结束执行后仍然存在. But where is it stored? Of course, inb上! But where is B? Is there a property? Well developed 5 years of UI front-end framework!

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

From now on, Chrome's developer tools allow external variables in closures to be visible. View function instances in the Watch Expressions panelb,展开它的属性后,There should be a call<function scope>的Child nodes. All the bound closure variables can be seen here, which are variables that might be used when the function is called.

Internal properties

The developer tool can also show another thing called an internal attribute (internal property).

Suppose you have a variable in your code s, and also performs the following actions :

S.substring (1, 4)  //Return to ' ell '

 

You think s肯定是个字符串值吗? 这可不一定 . It may also be a string wrapper object. Try the following monitoring expression:

"Hello" Object ("Hello")

 

The first expression is an ordinary string literal, and the second is a functionally complete (full-featured) object. It is puzzling that the two values are almost identical. But the second expression really has its own properties, And you can also add custom properties to it. Expand all of its properties you will see that it is not a completely regular object: it has an internal property [[Primitivevalue]], The wrapped string value is stored in this property. You cannot access this intrinsic property in JavaScript code, but you can see it in the developer tools. Well-developed 5-year UI front-end framework!

What other values have intrinsic properties? That's the binding function (bound functions). A binding function is also a wrapper object, except that it is packaged as a function. Attempt to execute the following two statements:

function Sum (A, b) {return a + B;} var inc = Sum.bind (NULL, 1); Bind parameter A to 1,this bound to null 

 

If you putSum和inc放在监控表达式面板中对比一下,你会看到, they are all functions, butinc是一个不透明(non-transparent )的函数: You do not see its function body content, and you cannot see its scope when it is defined. Carefully developed 5-year UI front-end framework!

This is how the binding function works. In the developer tools, you will see [[Targetfunction]], [[Boundargs]] and [[Boundthis]] these three internal properties. They all showinc是一个绑定函数, as well as some more specific information: The target function of the INC binding isSum, a parameter was bound1,绑定的this值是null5 years of well-developed UI front-end framework!

Learn JavaScript by using Chrome's developer tools