说明
图解 Google V8 学习笔记
函数声明与函数表达式的差异
我们先来看两段代码的对比:
代码片段1:
foo() function foo(){ console.log('foo') }
执行代码,发现没有报错,并且成功打印了 foo。
代码片段2:
foo() var foo = function (){ console.log('foo') }
同样我们执行代码,发现代码执行报错了:Uncaught TypeError: foo is not a function
都是在定义的函数之前调用函数,为什么代码片段1执行成功,而代码片段2执行报错?
原因:这两种定义函数的方式具有不同语义,不同的语义触发了不同的行为。
我们把第一种称之为函数声明
第二种称之为函数表达式
函数声明与函数表达式区别
函数表达式是在表达式语句中使用 function 的,最典型的表达式是 a=b 这种形式,因为函数也是一个对象,我们把 a = function (){} 这种方式称为函数表达式;
在函数表达式中,可以省略函数名称,从而创建匿名函数(anonymous functions)
一个函数表达式可以被用作一个立即调用的函数表达式(IIFE)(Immediately Invoked Function Expression)
V8 是怎么处理函数声明的?
先看一个例子:
var x = 5 function foo(){ console.log('Foo') }
V8 执行这段代码的流程大致如下:
在编译阶段:
如果解析到函数声明,那么 V8 会将这个函数声明转换为内存中的函数对象,并将其放到作用域中。
如果解析到了某个变量声明,也会将其放到作用域中,但是会将其值设置为 undefined,表示该变量还未被使用。
在执行阶段:
如果使用了某个变量,或者调用了某个函数,那么 V8 便会去作用域查找相关内容。
查看作用域的数据
没有d8环境的可以参考我这篇文章window 系统里怎么使用 jsvu 工具快速调试 v8?
我们在 kaimo.js
里添加上面的代码
然后执行命令
v8-debug --print-scopes kaimo.js
执行之后我们就能看到作用域的数据
Inner function scope: function foo () { // (00000254208756A0) (23, 53) // NormalFunction // 2 heap slots } Global scope: global { // (00000254208753F0) (0, 53) // will be compiled // NormalFunction // 1 stack slots // temporary vars: TEMPORARY .result; // (0000025420875900) local[0] // local vars: VAR foo; // (0000025420875870) VAR x; // (0000025420875610) function foo () { // (00000254208756A0) (23, 53) // lazily parsed // NormalFunction // 2 heap slots } }
我们可以看到,作用域中包含了变量 x 和 foo,变量 x 的默认值是 undefined,变量 foo 指向了 foo 函数对象,foo 函数对象被 V8 存放在内存中的堆空间了,这些变量都是在编译阶段被装进作用域中的。
在编译阶段,将所有的变量提升到作用域的过程称为变量提升。
表达式和语句
在 V8 解析 JavaScript 源码的过程中,如果遇到普通的变量声明,那么便会将其提升到作用域中,并给该变量赋值为 undefined,如果遇到的是函数声明,那么 V8 会在内存中为声明生成函数对象,并将该对象提升到作用域中。
这是为什么呢?这跟表达式和语句有关。
简单的说:表达式就是表示值的式子,而语句是操作值的式子。
举个例子:
x = 1 1 === 2
上面这些就是表达式,因为执行这段代码,它会返回一个值。
而定义了一个变量,比如:
var x
就是一个语句,执行该语句时,V8 并不会返回任何值给你。
在比如:声明了一个函数时
function foo(){ return 1 }
执行这段代码时,V8 并没有返回任何的值,它只是解析 foo 函数,并将函数对象存储到内存中。
我们在看一个声明变量赋值的例子:
var x = 313
V8 执行这段代码时,会认为它是两段代码:
var x = undefined
:定义变量的语句,在编译阶段完成。V8 将这些变量存放在作用域时,还会给它们赋一个默认的 undefined 值。x = 313
:赋值的表达式,在执行阶段完成的,不会在编译阶段执行的。
函数声明是表达式还是语句呢?
函数声明并不是一个表达式,而是一个语句。另外函数也是一个对象,在编译阶段,V8 就会将整个函数对象提升到作用域中,并不是给该函数名称赋一个 undefined
。
V8 是怎么处理函数表达式的?
在一个表达式中使用 function 来定义一个函数,那么就把该函数称为函数表达式。
foo = function (){ console.log('foo') }
函数表达式
例子:
var foo = function (){ console.log('foo') }
可以把这段代码拆分为下面两行代码:
var foo = undefined
这一行是声明语句, V8 在解析阶段,会在作用域中创建该对象,并将该对象设置为 undefined,
foo = function (){ console.log('foo') }
这一行是函数表达式,在编译阶段,V8 并不会处理函数表达式,也就不会将该函数表达式提升到作用域中。
立即调用的函数表达式(IIFE)
(function () { })
因为小括号之间存放的必须是表达式,如果在小阔号里面定义一个函数,那么 V8 就会把这个函数看成是函数表达式,执行时它会返回一个函数对象。如果直接在表达式后面加上调用的括号,这就称为立即调用函数表达式(IIFE)
。
比如下面这个就是 IIFE
(function () { })()
函数立即表达式也是一个表达式,所以 V8 在编译阶段,并不会为该表达式创建函数对象。这样的一个好处就是不会污染环境,函数和函数内部的变量都不会被其他部分的代码访问到。
因为函数立即表达式是立即执行的,所以将一个函数立即表达式赋给一个变量时,不是存储 IIFE 本身,而是存储 IIFE 执行后返回的结果。
比如:
var kaimo = (function () { return 777 })()
经典面试题
通过上面的学习,这两个题目应该得心应手。【手动狗头】
var n = 1; (function foo(){ n = 100; console.log(n); }()) console.log(n);
var n = 1; function foo(){ n = 100; console.log(n); } console.log(n); foo()