"You do not know JavaScript" - Intensive (b)

Knowledge Point

1. lexical stage

Lexical scope is defined in the lexical scoping phase. Simply put, lexical scoping is up to you when writing the code block scope variables and where to write to the decision, so that when the lexical analyzer handling code will remain unchanged scope (in most cases).

// 全局作用域,只有一个标识符:foo
function foo(a){
// foo所创建的作用域,三个标识符:b,a,bar
    var b = a * 2;
    function bar(c){
    // bar所创建的作用域,只有一个标识符:c
        console.log(a,b,c);
    }
    bar(b * 3);
}
foo(2);  // 2,4,12
复制代码

Scope of bubbles by the scope of where to write the code corresponding to the decision, they are progressively included. No function can be partially present in both the parent function.

2. Find

The positional relationship between the structure and scope of the bubble to the engine to provide sufficient mutual location information, use this information to find the engine position identifier.

Scope search stops at the first match of the identifier. Nested scopes may be defined in the multi-layer identifier with the same name, produce a "shadowing."

Global variables automatically becomes global object (such as the browser window object) properties, so that access to global variables can be masked by the same variables are window.a manner. But not global variables are obscured when there is no way to access the

No matter where the function is called, regardless of how it is called, the location decision was in when its lexical scope only by the function is declared.

3. deceive lexical

Deceive lexical scoping can cause performance degradation.

1.eval

eval JavaScript in the () function can take a string as a parameter, you can generate code in the code used to write and run your program, if the code is written in that position.

Principle eval () is the deception lexical: lexical scoping modified at run-writing period

function foo(str,a){
    eval(str); // 欺骗
    console.log(a,b); 
}
var b = 2;
foo("var b = 3",1); // 1,3
复制代码
在严格模式下,eval()在运行时有自己的词法作用域
function foo(str){
    "use strict";
    eval(str);
    console.log(a); // ReferenceError:a is not defined
}
foo("var a = 2");
复制代码

setTimeout () and setInterval () can also be achieved with the same eval () results.

2.with

with typically repeated as a shortcut to reference a plurality of attributes of the same object may reference objects need not be repeated, for example:

var obj = {
    a: 1,
    b: 2,
    c: 3
}
// 改值
obj.a = 2;
obj.b = 3;
obj.c = 4;
// with改值
with(obj){
    a = 3;
    b = 4;
    c = 5;
}
复制代码

Consider the following code:

function foo(obj){
    with(obj){
        a = 2;
    }
}
var o1 = {
    a: 3
}
var o2 = {
    b: 3
}
foo(o1);
console.log(o1.a); // 2

foo(o2);
console.log(o2.a); // undefined
console.log(a); // 2 -- a 被泄露到全局作用域
复制代码

with the object blocks may be treated as a lexical scope, but inside the block normal var statement will not be limited in scope in this block, but is added to the function with which the scope.

to sum up

1. lexical scoping means that scope is determined by the position of writing the code of the function declaration. Lexical analysis phase of compilation of all the identifiers basically know where and how the declaration, which can predict how they look in the process of implementation.

2.JavaScript two mechanisms "cheat" lexical scope: eval () and with, side effects are the engine can not find the scope optimization at compile time, causes the code to run slower, not recommended.

Barabara

What job?

To a layman's point of view may be in order to survive, basic necessities of life to a detached humanly possible to achieve self-worth, to get some kind of glory or sublimation, the current me, what kind of work is just work, say a little one concept, obviously there is no answer, the work is now part of my life and sometimes I would be happy because of it, because sometimes it is sad, I hope he can do a sense of balance, just as often infused into City workers, bearish, seriously, not seriously, with people technically more learning, more thinking, more summary.

Reproduced in: https: //juejin.im/post/5d03a440518825504f6db0fa

Guess you like

Origin blog.csdn.net/weixin_34163741/article/details/93177205