JavaScript中函数引用调用和函数直接调用的区别

首先看下面的代码：　　

　　var x = 1　　　　　　　

　　var f1 = function( f ) {

　　var x = 2 ;

　　f( ' console.log( x ) ' )

　　}

　　var f2 =  function( ) {

　　var x = 2 ;

　　eval( ' console.log( x ) ' )

　　}

　　f1( eval )  // 1

　　f2( )　　// 2

　　

　　eval 是一个 global 对象的内置函数，即便在 window 对象内，它也可以作为全局函数使用。

　　如果你对结果有疑问，那为了搞懂原因，需要了解 JavaScript 一个重要的知识点： 作用域 ，上下文环境

　　

　　很多书籍和大牛都会引用 上下文环境 这一概念，在我看来，上下文环境只是一种更加繁琐的理解方式，甚至可以说是完全多余，如果去函数内寻找对应的属性，只会发现一个包含scope关键字的属性与作用域对应，在我看来，上下文环境只是一个被人为创造的词汇，是为了便于他人理解而创建出来的抽象概念。

 

　　如果你接受了我上面的观点，那作用域就同时囊括了上下文环境的特性，以下两个观点是理解作用域的关键：

 

　　第一，只有在函数执行的时候作用域才会生成，函数体内代码未被执行的情况作用域是不会生效的；

　　第二，函数体所在处才是代码执行的地方，依据第一个观点，也即作用域生成的地方，是以此寻找上级作用域的起点。

 

　　和其他强类型语言不同，JavaScript 能创造独立作用域的方式还不够丰富，函数声明就是其中之一，在不考虑闭包等其他操作联通作用域的情况下，同级作用域之间是绝对屏蔽的，即便是嵌套的作用域，也只允许子作用域向上查询，父级作用域无法向下进入子作用域。

 

　　需要注意的是，不是子作用域的所有变量都可以向上去查询，比如 this ，作为一门极其灵活而又混沌的语言，js不会允许这种情况发生，于是ES6这一标准提出了箭头函数的概念，其作用是为 this 开辟一条通向上级作用域的特快通道，将 this 发射出去，这在本质上使得 JavaScript 的逻辑变得更加灵活了，不像其他语言具有较强的模式化属性。

 

　　有点脱离主题了，说回为什么两者的输出结果不一致，引用函数其实也是一个包装过的概念，比如本例中的 f ,它的本质只是栈内存的索引地址，更重要的是这一地址指向的并不是存储在堆内存里的函数对象，而是指向另一个栈内存内的地址 eval ，eval 才是真正指向函数的指针，也可以直接将其理解为 eval 函数在栈内存内的唯一代言，毫无疑问，函数体内部才存在作用域，作用域的本质不过是附着了很多变量属性的对象，需要注意的是，此例中并不是指 f1 和 f2 这两个函数对象，而是指其引向的函数体 { } 这个对象。

 

　　如果你真正理解了上面我这段话，那么也就不难理解结果不同的原因，f( 'console.log( x ) ' )在执行的时候实际上还是去寻找 eval 所指向的作用域，而 eval 的上级作用域是全局作用域，其作用域内 x 的值是为 1 。