函数由浅入深详解

1. 概述

1.1 函数的声明

JavaScript 有三种声明函数的方法。

（1）function 命令

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

unction print(s) {
    console.log(s);
}复制代码

上面的代码命名了一个print函数，之后使用print()这种形式，就能够调用相应的代码。这叫作函数的声明（Function Declaration）。

（2）函数表达式

除了用function命令声明函数，还能够采用变量赋值的写法。

fvar print = function(s) {
  console.log(s);
};复制代码

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），由于赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。若是加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

var print = function x(){
    console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function复制代码

上面代码在函数表达式中，加入了函数名x。这个x只在函数体内部可用，指代函数表达式自己，其余地方都不可用。这种写法的用处有两个，一是能够在函数体内部调用自身，二是方便除错（除错工具显示函数调用栈时，将显示函数名，而再也不显示这里是一个匿名函数）。所以，下面的形式声明函数也很是常见。

var f = function f() {};
复制代码

须要注意的是，函数的表达式须要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来讲，这两种声明函数的方式，差异很细微，能够近似认为是等价的。

（3）Function 构造函数

第三种声明函数的方式是Function构造函数。

var add = new Function(
    'x',
    'y',
    'return x + y'
);

// 等同于
function add(x, y) {
    return x + y;
}复制代码

上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其余参数都是add函数的参数。

你能够传递任意数量的参数给Function构造函数，只有最后一个参数会被当作函数体，若是只有一个参数，该参数就是函数体。

var foo = new Function(
    'return "hello world";'
);

// 等同于
function foo() {
    return 'hello world';
}复制代码

Function构造函数能够不使用new命令，返回结果彻底同样。

总的来讲，这种声明函数的方式很是不直观，几乎无人使用。

1.2 函数的重复声明

若是同一个函数被屡次声明，后面的声明就会覆盖前面的声明。

function f() {
   console.log(1);
}
f() // 2

function f() {
    console.log(2);
}
f() // 2复制代码

上面代码中，后一次的函数声明覆盖了前面一次。并且，因为函数名的提高（参见下文），前一次声明在任什么时候候都是无效的，这一点要特别注意。

1.3 圆括号运算符，return 语句和递归

调用函数时，要使用圆括号运算符。圆括号之中，能够加入函数的参数。

function add(x, y) {
    return x + y;
}

add(1, 1) // 2复制代码

上面代码中，函数名后面紧跟一对圆括号，就会调用这个函数。

函数体内部的return语句，表示返回。JavaScript 引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即便还有语句，也不会获得执行。也就是说，return语句所带的那个表达式，就是函数的返回值。return语句不是必需的，若是没有的话，该函数就不返回任何值，或者说返回undefined。

函数能够调用自身，这就是递归（recursion）。下面就是经过递归，计算斐波那契数列的代码。

function fib(num) {
    if (num === 0) return 0;
    if (num === 1) return 1;
    return fib(num - 2) + fib(num - 1);
}

fib(6) // 8复制代码

上面代码中，fib函数内部又调用了fib，计算获得斐波那契数列的第6个元素是8。

1.4 第一等公民

JavaScript 语言将函数看做一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可使用值的地方，就能使用函数。好比，能够把函数赋值给变量和对象的属性，也能够看成参数传入其余函数，或者做为函数的结果返回。函数只是一个能够执行的值，此外并没有特殊之处。

因为函数与其余数据类型地位平等，因此在 JavaScript 语言中又称函数为第一等公民。

function add(x, y) {
  return x + y;
}

// 将函数赋值给一个变量
var operator = add;

// 将函数做为参数和返回值
function a(op){
  return op;
}
a(add)(1, 1)
// 2复制代码

1.5 函数名的提高

JavaScript 引擎将函数名视同变量名，因此采用function命令声明函数时，整个函数会像变量声明同样，被提高到代码头部。因此，下面的代码不会报错。

f();

function f() {}复制代码

表面上，上面代码好像在声明以前就调用了函数f。可是实际上，因为“变量提高”，函数f被提高到了代码头部，也就是在调用以前已经声明了。可是，若是采用赋值语句定义函数，JavaScript 就会报错。

f();
var f = function (){};
// TypeError: undefined is not a function复制代码

上面的代码等同于下面的形式。

var f;
f();
f = function () {};复制代码

上面代码第二行，调用f的时候，f只是被声明了，尚未被赋值，等于undefined，因此会报错。所以，若是同时采用function命令和赋值语句声明同一个函数，最后老是采用赋值语句的定义。

var f = function () {
    console.log('1');
}

function f() {
    console.log('2');
}

f() // 1复制代码

2. 函数的属性和方法

2.1 name 属性

函数的name属性返回函数的名字。

function f1() {}
f1.name // "f1"复制代码

若是是经过变量赋值定义的函数，那么name属性返回变量名。

var f2 = function () {};
f2.name // "f2"复制代码

可是，上面这种状况，只有在变量的值是一个匿名函数时才是如此。若是变量的值是一个具名函数，那么name属性返回function关键字以后的那个函数名。

var f3 = function myName() {};
f3.name // 'myName'复制代码

上面代码中，f3.name返回函数表达式的名字。注意，真正的函数名仍是f3，而myName这个名字只在函数体内部可用。

name属性的一个用处，就是获取参数函数的名字。

var myFunc = function () {};

function test(f) {
  console.log(f.name);
}

test(myFunc) // myFunc复制代码

上面代码中，函数test内部经过name属性，就能够知道传入的参数是什么函数。

2.2 length 属性

函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。

function f(a, b) {}
f.length // 2复制代码

上面代码定义了空函数f，它的length属性就是定义时的参数个数。无论调用时输入了多少个参数，length属性始终等于2。

length属性提供了一种机制，判判定义时和调用时参数的差别，以便实现面向对象编程的“方法重载”（overload）。

2.3 toString()

函数的toString方法返回一个字符串，内容是函数的源码。

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }复制代码

对于那些原生的函数，toString()方法返回function (){[native code]}。

Math.sqrt.toString()
// "function sqrt() { [native code] }"复制代码

上面代码中，Math.sqrt是 JavaScript 引擎提供的原生函数，toString()方法就返回原生代码的提示。

函数内部的注释也能够返回。

function f() {/*
  这是一个
  多行注释
*/}

f.toString()
// "function f(){/* // 这是一个 // 多行注释 // */}"复制代码

利用这一点，能够变相实现多行字符串。

var multiline = function (fn) {
    var arr = fn.toString().split('\n');
    return arr.slice(1, arr.length - 1).join('\n');
};

function f() {/*
    这是一个
    多行注释
*/}

multiline(f);
// " 这是一个 // 多行注释"复制代码

3. 函数做用域

3.1 定义

做用域（scope）指的是变量存在的范围。在 ES5 的规范中，JavaScript 只有两种做用域：一种是全局做用域，变量在整个程序中一直存在，全部地方均可以读取；另外一种是函数做用域，变量只在函数内部存在。ES6 又新增了块级做用域，本教程不涉及。

对于顶层函数来讲，函数外部声明的变量就是全局变量（global variable），它能够在函数内部读取。

var v = 1;

function f() {
    console.log(v);
}

f()
// 1复制代码

上面的代码代表，函数f内部能够读取全局变量v。

在函数内部定义的变量，外部没法读取，称为“局部变量”（local variable）。

function f(){
    var v = 1;
} 

v // ReferenceError: v is not defined复制代码

上面代码中，变量v在函数内部定义，因此是一个局部变量，函数以外就没法读取。

函数内部定义的变量，会在该做用域内覆盖同名全局变量。

var v = 1;

function f(){
    var v = 2;
    console.log(v);
}

f() // 2
v // 1复制代码

上面代码中，变量v同时在函数的外部和内部有定义。结果，在函数内部定义，局部变量v覆盖了全局变量v。

注意，对于var命令来讲，局部变量只能在函数内部声明，在其余区块中声明，一概都是全局变量。

if (true) {
    var x = 5;
}
console.log(x);  // 5
复制代码

上面代码中，变量x在条件判断区块之中声明，结果就是一个全局变量，能够在区块以外读取。

3.2 函数内部的变量提高 

与全局做用域同样，函数做用域内部也会产生“变量提高”现象。var命令声明的变量，无论在什么位置，变量声明都会被提高到函数体的头部。

function foo(x) {
    if (x > 100) {
        var tmp = x - 100;
    }
}

// 等同于
function foo(x) {
    var tmp;
    if (x > 100) {
        tmp = x - 100;
    };
}复制代码

3.3 函数自己的做用域

函数自己也是一个值，也有本身的做用域。它的做用域与变量同样，就是其声明时所在的做用域，与其运行时所在的做用域无关。

var a = 1;
var x = function () {
    console.log(a);
};

function f() {
    var a = 2;
    x();
}

f() // 1
复制代码

上面代码中，函数x是在函数f的外部声明的，因此它的做用域绑定外层，内部变量a不会到函数f体内取值，因此输出1，而不是2。

总之，函数执行时所在的做用域，是定义时的做用域，而不是调用时所在的做用域。

很容易犯错的一点是，若是函数A调用函数B，却没考虑到函数B不会引用函数A的内部变量。

var x = function () {
    console.log(a);
};

function y(f) {
    var a = 2;
    f();
}

y(x)
// ReferenceError: a is not defined
复制代码

上面代码将函数x做为参数，传入函数y。可是，函数x是在函数y体外声明的，做用域绑定外层，所以找不到函数y的内部变量a，致使报错。

一样的，函数体内部声明的函数，做用域绑定函数体内部。

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1
复制代码

上面代码中，函数foo内部声明了一个函数bar，bar的做用域绑定foo。当咱们在foo外部取出bar执行时，变量x指向的是foo内部的x，而不是foo外部的x。正是这种机制，构成了下文要讲解的“闭包”现象。

4. 参数

4.1 概述

函数运行的时候，有时须要提供外部数据，不一样的外部数据会获得不一样的结果，这种外部数据就叫参数。

function square(x) {
    return x * x;
}

square(2) // 4
square(3) // 9
复制代码

上式的x就是square函数的参数。每次运行的时候，须要提供这个值，不然得不到结果。

4.2 参数的省略

函数参数不是必需的，JavaScript 容许省略参数。

function f(a, b) {
    return a;
} 

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2
复制代码

上面代码的函数f定义了两个参数，可是运行时不管提供多少个参数（或者不提供参数），JavaScript 都不会报错。省略的参数的值就变为undefined。须要注意的是，函数的length属性与实际传入的参数个数无关，只反映函数预期传入的参数个数。

可是，没有办法只省略靠前的参数，而保留靠后的参数。若是必定要省略靠前的参数，只有显式传入undefined。

function f(a, b) {
  return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined
复制代码

上面代码中，若是省略第一个参数，就会报错。

4.3 传递方式

函数参数若是是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。这意味着，在函数体内修改参数值，不会影响到函数外部。

var p = 2;

function f(p) {
  p = 3;
}
f(p);

p // 2
复制代码

上面代码中，变量p是一个原始类型的值，传入函数f的方式是传值传递。所以，在函数内部，p的值是原始值的拷贝，不管怎么修改，都不会影响到原始值。

可是，若是函数参数是复合类型的值（数组、对象、其余函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的原始值的地址，所以在函数内部修改参数，将会影响到原始值。

var obj = { p: 1 };

function f(o) {
    o.p = 2;
}
f(obj);

obj.p // 2
复制代码

上面代码中，传入函数f的是参数对象obj的地址。所以，在函数内部修改obj的属性p，会影响到原始值。

注意，若是函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]
复制代码

上面代码中，在函数f内部，参数对象obj被整个替换成另外一个值。这时不会影响到原始值。这是由于，形式参数（o）的值实际是参数obj的地址，从新对o赋值致使o指向另外一个地址，保存在原地址上的值固然不受影响。

4.4 同名函数

若是有同名的参数，则取最后出现的那个值。

function f(a, a) {
    console.log(a);
}

f(1, 2) // 2
复制代码

上面代码中，函数f有两个参数，且参数名都是a。取值的时候，之后面的a为准，即便后面的a没有值或被省略，也是以其为准。

function f(a, a) {
    console.log(a);
}

f(1) // undefined
复制代码

调用函数f的时候，没有提供第二个参数，a的取值就变成了undefined。这时，若是要得到第一个a的值，可使用arguments对象。

function f(a, a) {
    console.log(arguments[0]);
}

f(1) // 1复制代码

4.5 arguments 对象

（1）定义

因为 JavaScript 容许函数有不定数目的参数，因此须要一种机制，能够在函数体内部读取全部参数。这就是arguments对象的由来。

arguments对象包含了函数运行时的全部参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可使用。

var f = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3
复制代码

正常模式下，arguments对象能够在运行时修改。

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5
复制代码

上面代码中，函数f调用时传入的参数，在函数内部被修改为3和2。

严格模式下，arguments对象与函数参数不具备联动关系。也就是说，修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2
复制代码

上面代码中，函数体内是严格模式，这时修改arguments对象，不会影响到真实参数a和b。

经过arguments对象的length属性，能够判断函数调用时到底带几个参数。

function f() {
  return arguments.length;
}

f(1, 2, 3) // 3
f(1) // 1
f() // 0
复制代码

（2）与数组的关系

须要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（好比slice和forEach），不能在arguments对象上直接使用。

若是要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组。下面是两种经常使用的转换方法：slice方法和逐一填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}
复制代码

（3）callee 属性

arguments对象带有一个callee属性，返回它所对应的原函数。

var f = function () {
  console.log(arguments.callee === f);
}

f() // true
复制代码

能够经过arguments.callee，达到调用函数自身的目的。这个属性在严格模式里面是禁用的，所以不建议使用。

5. 函数的其余知识点

5.1 闭包

闭包（closure）是 JavaScript 语言的一个难点，也是它的特点，不少高级应用都要依靠闭包实现。

理解闭包，首先必须理解变量做用域。前面提到，JavaScript 有两种做用域：全局做用域和函数做用域。函数内部能够直接读取全局变量。

var n = 999;

function f1() {
    console.log(n);
}
f1() // 999
复制代码

上面代码中，函数f1能够读取全局变量n。

可是，函数外部没法读取函数内部声明的变量。

function f1() {
    var n = 999;
}

console.log(n)
// Uncaught ReferenceError: n is not defined(
复制代码

上面代码中，函数f1内部声明的变量n，函数外是没法读取的。

若是出于种种缘由，须要获得函数内的局部变量。正常状况下，这是办不到的，只有经过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1() {
    var n = 999;
    function f2() {
　　    console.log(n); // 999
  }
}
复制代码

上面代码中，函数f2就在函数f1内部，这时f1内部的全部局部变量，对f2都是可见的。可是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是 JavaScript 语言特有的"链式做用域"结构（chain scope），子对象会一级一级地向上寻找全部父对象的变量。因此，父对象的全部变量，对子对象都是可见的，反之则不成立。

既然f2能够读取f1的局部变量，那么只要把f2做为返回值，咱们不就能够在f1外部读取它的内部变量了吗！

function f1() {
    var n = 999;
    function f2() {
        console.log(n);
  }
    return f2;
}

var result = f1();
result(); // 999
复制代码

上面代码中，函数f1的返回值就是函数f2，因为f2能够读取f1的内部变量，因此就能够在外部得到f1的内部变量了。

闭包就是函数f2，即可以读取其余函数内部变量的函数。因为在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，所以能够把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特色，就是它能够“记住”诞生的环境，好比f2记住了它诞生的环境f1，因此从f2能够获得f1的内部变量。在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。

闭包的最大用处有两个，一个是能够读取函数内部的变量，另外一个就是让这些变量始终保持在内存中，即闭包可使得它诞生环境一直存在。请看下面的例子，闭包使得内部变量记住上一次调用时的运算结果。

function createIncrementor(start) {
    return function () {
        return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7
复制代码

上面代码中，start是函数createIncrementor的内部变量。经过闭包，start的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中能够看到，闭包inc使得函数createIncrementor的内部环境，一直存在。因此，闭包能够看做是函数内部做用域的一个接口。

为何会这样呢？缘由就在于inc始终在内存中，而inc的存在依赖于createIncrementor，所以也始终在内存中，不会在调用结束后，被垃圾回收机制回收。

闭包的另外一个用处，是封装对象的私有属性和私有方法。

function Person(name) {
    var _age;
    function setAge(n) {
        _age = n;
    }
    function getAge() {
        return _age;
    }

    return {
        name: name,
        getAge: getAge,
        setAge: setAge
    };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25
复制代码

上面代码中，函数Person的内部变量_age，经过闭包getAge和setAge，变成了返回对象p1的私有变量。

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，因此内存消耗很大。所以不能滥用闭包，不然会形成网页的性能问题。

5.2 当即调用的函数表达式（IIFE）

在 JavaScript 中，圆括号()是一种运算符，跟在函数名以后，表示调用该函数。好比，print()就表示调用print函数。

有时，咱们须要在定义函数以后，当即调用该函数。这时，你不能在函数的定义以后加上圆括号，这会产生语法错误。

function(){ /* code */ }();
// SyntaxError: Unexpected token (
复制代码

产生这个错误的缘由是，function这个关键字便可以看成语句，也能够看成表达式。

// 语句
function f() {}

// 表达式
var f = function f() {}
复制代码

为了不解析上的歧义，JavaScript 引擎规定，若是function关键字出如今行首，一概解释成语句。所以，JavaScript 引擎看到行首是function关键字以后，认为这一段都是函数的定义，不该该以圆括号结尾，因此就报错了。

解决方法就是不要让function出如今行首，让引擎将其理解成一个表达式。最简单的处理，就是将其放在一个圆括号里面。

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
复制代码

上面两种写法都是以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义语句，因此就避免了错误。这就叫作“当即调用的函数表达式”（Immediately-Invoked Function Expression），简称 IIFE。

注意，上面两种写法最后的分号都是必须的。若是省略分号，遇到连着两个 IIFE，可能就会报错。

// 报错
(function(){ /* code */ }())
(function(){ /* code */ }())
复制代码

上面代码的两行之间没有分号，JavaScript 会将它们连在一块儿解释，将第二行解释为第一行的参数。

推而广之，任何让解释器以表达式来处理函数定义的方法，都能产生一样的效果，好比下面三种写法。

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
复制代码

甚至像下面这样写，也是能够的。

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();
复制代码

一般状况下，只对匿名函数使用这种“当即执行的函数表达式”。它的目的有两个：一是没必要为函数命名，避免了污染全局变量；二是 IIFE 内部造成了一个单独的做用域，能够封装一些外部没法读取的私有变量。

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 写法二
(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}());
复制代码

上面代码中，写法二比写法一更好，由于彻底避免了污染全局变量。

5.3 箭头函数

基本用法

ES6 容许使用“箭头”（=>）定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
复制代码

若是箭头函数不须要参数或须要多个参数，就使用一个圆括号表明参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
复制代码

若是箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，而且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }
复制代码

因为大括号被解释为代码块，因此若是箭头函数直接返回一个对象，必须在对象外面加上括号，不然会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
复制代码

下面是一种特殊状况，虽然能够运行，但会获得错误的结果。

let foo = () => { a: 1 };
foo() // undefined
复制代码

上面代码中，原始意图是返回一个对象{ a: 1 }，可是因为引擎认为大括号是代码块，因此执行了一行语句a: 1。这时，a能够被解释为语句的标签，所以实际执行的语句是1;，而后函数就结束了，没有返回值。

若是箭头函数只有一行语句，且不须要返回值，能够采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();复制代码

6. eval 命令

6.1 基本语法

eval命令接受一个字符串做为参数，并将这个字符串看成语句执行。

eval('var a = 1;');
a // 1
复制代码

上面代码将字符串看成语句运行，生成了变量a。

若是参数字符串没法看成语句运行，那么就会报错。

eval('3x') // Uncaught SyntaxError: Invalid or unexpected token
复制代码

放在eval中的字符串，应该有独自存在的意义，不能用来与eval之外的命令配合使用。举例来讲，下面的代码将会报错。

eval('return;'); // Uncaught SyntaxError: Illegal return statement
复制代码

上面代码会报错，由于return不能单独使用，必须在函数中使用。

若是eval的参数不是字符串，那么会原样返回。

eval(123) // 123
复制代码

eval没有本身的做用域，都在当前做用域内执行，所以可能会修改当前做用域的变量的值，形成安全问题。

var a = 1;
eval('a = 2');

a // 2
复制代码

上面代码中，eval命令修改了外部变量a的值。因为这个缘由，eval有安全风险。

为了防止这种风险，JavaScript 规定，若是使用严格模式，eval内部声明的变量，不会影响到外部做用域。

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()
复制代码

上面代码中，函数f内部是严格模式，这时eval内部声明的foo变量，就不会影响到外部。

不过，即便在严格模式下，eval依然能够读写当前做用域的变量。

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()
复制代码

上面代码中，严格模式下，eval内部仍是改写了外部变量，可见安全风险依然存在。

总之，eval的本质是在当前做用域之中，注入代码。因为安全风险和不利于 JavaScript 引擎优化执行速度，因此通常不推荐使用。一般状况下，eval最多见的场合是解析 JSON 数据的字符串，不过正确的作法应该是使用原生的JSON.parse方法。

6.2 eval 的别名调用

前面说过eval不利于引擎优化执行速度。更麻烦的是，还有下面这种状况，引擎在静态代码分析的阶段，根本没法分辨执行的是eval。

var m = eval;
m('var x = 1');
x // 1
复制代码

上面代码中，变量m是eval的别名。静态代码分析阶段，引擎分辨不出m('var x = 1')执行的是eval命令。

为了保证eval的别名不影响代码优化，JavaScript 的标准规定，凡是使用别名执行eval，eval内部一概是全局做用域。

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1
复制代码

上面代码中，eval是别名调用，因此即便它是在函数中，它的做用域仍是全局做用域，所以输出的a为全局变量。这样的话，引擎就能确认e()不会对当前的函数做用域产生影响，优化的时候就能够把这一行排除掉。

eval的别名调用的形式五花八门，只要不是直接调用，都属于别名调用，由于引擎只能分辨eval()这一种形式是直接调用。

eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')
复制代码

上面这些形式都是eval的别名调用，做用域都是全局做用域。