当我写一段js代码并运行时,有三个非常重要的角色:引擎、 编译器、 作用域
下面模拟一段js代码运行的过程
如下代码
var a = 2
- 遇到var a 编译器会询问作用域是否已经有一个变量a存在于统一作用域下,如果有则忽略该声明,继续进行编译,,否则会要求作用域在当前作用域声明新的变量a
- 编译器会为引擎生产运行时所需要的代码,用来处理a=2的赋值操作,引擎运行时,会先询问作用域是否有变量a,如果是,会引用这个变量,否则,引擎会继续查找该变量。
- 如果引擎找到了a,就把2赋值给它。否则引擎就会丢出一个异常
词法作用域
- let:可以将变量绑定在所在的作用域内(通常是{....}内部),也就是说let为它声明的变量隐式的劫持了所在的块作用域
注意:使用显式的代码能让代码更加的清晰,如下
var a = 6
if (a) {
{ // <-- 显式的块
let boy = "Jack"
console.log(boy)
}
}
声明提前的小细节
查看以下代码
foo() //TypeError 此时只声明了foo,并未定义foo是函数
bar() //ReferenceError 找不到bar
var foo = function bar() {
console.log("hello")
}
以上代码会被理解为以下形式
var foo
foo()
bar()
foo = function () {
var bar = ..self..
}
注意:包括函数表达式的赋值操作在内的赋值操作不会被提升
闭包
考虑如下代码
function foo() {
var a = 2
function bar() {
console.log(a)
}
return bar
}
var baz = foo()
baz() //2 这就是典型的闭包了
我们打开控制台研究下这段代码
看看绿色箭头处,这就是闭包
注意:无论何种方式将内部函数传递到所在的词法作用域外,它都会持有对原始作用域的引用,无论在何处执行这个函数,都会使用闭包
闭包的本质
将(访问它们各自词法作用域的)函数当作第一级的值类型并且到处传递,这就是闭包
考虑以下例子
function CoolModule() {
var something = "cool"
var another = [1, 2, 3]
function dosomeThing() {
console.log(something)
}
function doAnother() {
console.log(another.join("!"))
}
return {
doSomeThing: dosomeThing,
doAnother: doAnother
}
}
var foo = CoolModule()
foo.doSomeThing() //cool
foo.doAnother() //1!2!3
这是典型的闭包应用,在js中被称为模块,最常见的实现模块的方式通常被称为模块暴露
模块模式需要具备两个必要条件
- 必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)
- 封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态
模块模式的功能
命名将要作为公共API返回的对象
var foo = (function CoolModule(id) {
function change() {
publickAPI.identify = identify2
}
function identify1() {
console.log(id)
}
function identify2() {
console.log(id.toUpperCase())
}
var publickAPI = {
change: change,
identify: identify1
}
return publickAPI
})("foo module")
foo.identify() //foo module
foo.change()
foo.identify() //FOO MODULE
通过模块化实例的内部保留对公共API对象的内部引用,可以从内部对模块实例进行修改,包括添加或删除方法和属性,以及修改它们的值
现代化的模块机制
大多数模块依赖加载器/管器本质上都是将这种模块定义封装进一个友好的API
考虑如下代码:
var MyModules = (function Manager() {
var modules = {}
function define(name, deps, impl) {
for (var i = 0; i < deps.length; i++) {
deps[i] = modules[deps[i]]
}
modules[name] = impl.apply(impl, deps)
}
function get() {
return modules[name]
}
return {
define: define,
get: get
}
})()