JS系列（三）：非严格模式与严格模式

这个话题涉及面很大，通过学习，不断补充。

• 非严格模式，浏览器在此模式下表现会有一些不同，主要体现在：
  1. 变量不需要声明就能直接赋值；
  2. 作用域也会有些许不同；
  3. 可以使用某些函数，如：eval，with，setTimeout，setInterval，new Function(..)；
• 严格模式，浏览器会遵照我们一般开发习俗（使用前需声明："use strict"）：
  1. 变量使用前必需声明；
  2. 严格限制在作用域中；
  3. 不允许使用with，eval有自己的作用域；

对于1、2（如下代码）：

// 非严格模式
function foo(a) {
    b = a; // b = 2; 且此时 b为全局变量
}

// 严格模式
function foo(a) {
    "use strict";
    b = a; // ReferenceError: b is not defined
}

foo(2);

对于3（如下代码）：

// eval使用
function foo(str, a) {
    eval(str);
    console.log(a, b); // 2, 3
}

function foo(str, a) {
    "use strict";
    eval(str);
    console.log(a, b); // ReferenceError: b is not defined
}

var b = 1;
foo("var b = 3", 2);

/**
 * JavaScript 中的 eval(..) 函数可以接受一个字符串为参数，
 * 并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。
 * 换句话说，可以在你写的代码中用程序生成代码并运行，就好像代
 * 码是写在那个位置的一样！
 *
 * 如上代码，由于动态语句中在foo函数中通过eval执行后，在foo
 * 函数中声明了一个变量b且赋值为3，RHS查询b时，由于在foo函数
 * 中已经找到了变量b（就近原则），因此改变了log的结果。
 */

【以下不推荐使用代码字符串！】

/**
 * setTimeout和setInterval的第一个参数可以是字符串，
 * 同样如eval，字符串可以解释为一段动态生成的函数代码！
 *
 * new Function(..)函数的行为也类似，最后一个参数可以
 * 接受代码字符串，并转化为动态生成的函数（前面的参数是这
 * 个新生成的函数的形参），此构建函数的语法比eval略微安全
 * 一点。
 */

【严格模式下直接禁止！】

 // with使用
 var obj = {
     a: 1,
     b: 2
 };
 // 如果要修改obj中a、b的值，再新增一个变量c，方式一般如下：
 obj.a = 3;
 obj.b = 4;
 obj.c = 5;
console.log(obj); // {a:3, b:4, c:5}

// 非严格模式下，with可以省略少敲击键盘的事
function foo(param) {
    with(param) {
        a = 3;
        b = 4;
        c = 5;
    };
}
foo(obj);
console.log(obj); // {a:3, b:4}
console.log(c);   // 5.... oh, no!
/**
 * 变量c被加入到了全局对象中，类似我们前面讲到的『LHS未声明而直接赋值』
 *
 * JavaScript 中的 with(..) 可以将一个没有或有多个属性的对象处理为
 * 一个完全隔离的词法作用域『创建一个全新的词法作用域』，因此这个对象的
 * 属性也会被处理为定义在这个作用域中的词法标识符。
 *
 * 尽管with块可以将一个对象处理为词法作用域，但是这个块内部正常的var声明
 * 并不会被限制在这个块的作用域中，而是被添加到 with 所处的函数作用域中。
 */

总结（非严格模式下）：

• eval函数如果接受了含有一个或多个声明的代码，就会修改其所处的词法作用域
• with声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域

除了上面所说会改变作用域，最最最重要的原因：
因为JS引擎采用谨慎保守原则，当遇到上面这些能够动态改变作用域的方法时，JS编译器不会去优化这块代码，因而导致性能严重下降。