《你不知道的JavaScript》第一部分：作用域和闭包

第1章 作用域是什么

作用域

作用域

☞ 编译原理

☞ 理解作用域

// 不关心当前的值是什么，只是想要为 =2 这个赋值操作找到一个目标
a = 2;

// a 并没有赋予任何值
// 需要查找并取得 a 的值，这样才能传递给 console.log(...)
console.log( a );

第2章 词法作用域

☞ 查找

☞ 欺骗词法

function foo(str, a) {
eval( str );  // 欺骗！
console.log(a, b);
}

var b = 2;

foo( 'var b = 3;', 1);  // 1,3

第3章 函数作用域和块作用域

☞ 函数作用域

setTimeout(function timeoutHandler() {
//...
}, 1000);

☞ 立即执行函数表达式

var a = 2;
(function IIFE(global) {
var a = 3;
console.log(a); //3
console.log(global.a);  // 2
})(window);

console.log(a); // 2

undefined = true;   // 反模式，绝对不要这么做！

(function IIFE(undefined) {
var a;
if (a === undefined) {
console.log('undefined is safe here!');
}
})();

var a = 2;
(function IIFE(def) {
def(window);
})(function def(global) {

var a = 3;
console.log(a); // 3;
console.log(global.a);  // 2
});

☞ 块作用域

let

第4章 提升

// 我们习惯将它看作一个声明
var a = 2;

/**
* JavaScript 引擎会把它当作两个单独的声明
*/
var a;  // 定义声明，在编译阶段进行
a = 2;  // 赋值声明，在执行阶段进行

第5章 作用域闭包

function foo() {
var a = 2;

function bar() {
console.log(a);
}

return bar;
}

var baz = foo();

// 实际上只是通过不同的标识符引用调用了内部的函数 bar()
baz();  // 2 —— 闭包的效果

function foo() {
var a = 2;

function baz() {
console.log(a);
}

bar(baz);
}

function bar(fn) {
fn(); // 闭包
}

foo();  // 2

var fn;

function foo() {
var a = 2;

function baz() {
console.log(a);
}

fn = baz; // 将 baz 分配给全局变量
}

function bar() {
fn(); // 闭包
}

foo();

bar();  // 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
}
}

/**
* 必须通过调用 CoolModule() 来创建一个模块实例
* 如果不执行外部函数，内部作用域和闭包都无法被创建
*/
var foo = CoolModule();
foo.doSomething();  // cool
foo.doAnother();  // 1!2!3

var foo = (function CoolModule() {
// ...
})();

foo.doSomething();  // cool
foo.doAnother();  // 1!2!3

var foo = (function CoolModule(id) {
function change() {
// 修改公共API
publicAPI.identify = identify2;
}

function identify1() {
console.log(id);
}

function identify2() {
console.log(id.toUpperCase());
}

var publicAPI = {
change: change,
identify: identify1
}
})('foo module');

foo.identify(); // 'foo module'
foo.change();
foo.identify(); // 'FOO MODULE'

☞ 现代的模块机制(没太看明白）

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(name) {
return modules[name];
}

return {
define: define,
get: get
};
})();

// 定义模块
MyModules.define('bar', [], function() {
function hello(who) {
return 'Let me introduce: ' + who;
}

return {
hello: hello
};
});

MyModules.define('foo', ['bar'], function() {
var hungry = 'hippo';

function awesome() {
console.log(bar.hello(hungry).toUpperCase());
}

return {
awesome: awesome
};
});

var bar = MyModules.get('bar');
var foo = MyModules.get('foo');

console.log(
bar.hello('hippo')
);  // Let me introduce: hippo

foo.awesome();

☞ 未来的模块机制

function hello(who) {
return "Let me introduce: " + who;
}

export hello;

// 仅从 'bar' 模块导入 hello()
import hello from 'bar';

var hungry = 'hippo';

function awesome() {
console.log(
hello(hungry).toUpperCase()
);
}

export awesome;

// 导入完整的 “foo” 和 “bar” 模块
module foo from 'foo';
module bar from 'bar';

console.log(
bar.hello('rhino')
);  // Let me introduce: rhino

foo.awesome();  // LET ME INTRODUCE: HIPPO