目的
- 首先, 网上有很多关于这个知识点的文章, 可是我还是写了这篇, 原因有二:
- 网上很多文章中有误, 挨个回复又太麻烦, 而且不一定有人看回复
- 貌似也没有说的太全面.
- 所以, 本着希望各位不要陷入误区的目的, 来写这篇文章, 但是小弟也是接触js不久, 如果有错误的地方还希望各位指正. 感激不尽!
- 此文章基本都是借鉴于<JavaScript 高级程序设计第三版>, 少量借鉴网上文章
开始啦~
我们先来弄清楚几个概念: (ps: 这里概念性东西很多, 但是我还是你建议反复看几遍...)
- 执行环境(execution context) : 执行环境定义了变量或函数有权访问的其他数据, 决定了它们各自的行为.
- 变量对象(variable object) : 每个执行环境都有一个与之关联的变量对象 , 环境中定义的所有变量和函数都保存在这个对象中. (这个对象你访问不到, 解析器会在后台使用它)
- 函数的执行环境: 每个函数都有自己的 执行环境, 当执行流进入一个函数时, 函数的环境就会被推入一个环境栈中, 而在函数执行之后, 栈将其弹出, 把控制权返回给之前的执行环境.
作用域链 - 看起来重点来咯
- 当代码在一个环境中执行时, 会创建变量对象的一个 作用域链(scope chain)
- 用途: 是保证对 执行环境 有权访问的所有变量 和 函数 的有序访问. 作用域链的前端, 始终都是当前执行的代码所在环境的变量对象.
- 如果这个环境是 函数, 则将其 活动对象(activation object) 作为变量对象.
- 注意: 我仔细查了关于活动对象的资料, 大家可以把这玩意和变量对象划等号, 在此之前, 我看过很多帖子都是以 活动对象 举例子, 但是<JavaScript 高级程序设计第三版>中都是用的变量对象.
- 作用域链中的下一个对象来自包含(外部)环境, 而再下一个变量对象则来自下一个包含环境. 以此类推, 一直延续到全局执行环境; (这里的包含环境就是指的上一层执行环境)
- 全局环境的变量对象始终都是作用域链中的最后一个对象.
只看上面那堆概念性是很容易睡着的. 上代码:
- 先看懂这点代码再去看图
var color = 'yellow';
function changeColor() {
var anotherColor = 'red';
function swapColor() {
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColor();
}
changeColor(color);
console.log("color--- ", color); // red
- 图解:
// window 的变量对象包含了 color, changeColor
// changeColor() 的变量对象里面有anotherColor和swapColor()
// ...
window 的变量对象
|
----color
|
----changeColor() 此函数的变量对象包含 anotherColor 和 swapColor()
|
----anotherColor
|
----swapColor() 此函数的变量对象包含 tempColor
|
----tempColor
至此, 基本的作用域链知识其实就说完了, 但是我是被困在了 延长作用域链 上:
- 虽然执行环境的类型总共只有两种: 全局和局部(函数), 但是还有其它办法来延长作用域链.
- 因为有些语句可以在作用域链的前端临时增加一个变量对象, 该变量对象会在代码执行后被移除.
- 在两种情况下会发生这种现象, 具体来说, 就是当执行流进入下列任何一个语句时, 作用域链就会得到加长:
-
try-catch语句的catch块: 对catch语句来说, 会创建一个新的变量对象, 其中包含的是被抛出的错误对象的声明. -
with语句 : 对with语句来说, 会将指定的对象添加到作用域链中.
-
关于 try-catch 貌似没什么好说的, 在这里主要讲 with 的细节(不知道 with 的赶紧去翻书!):
- 先来看段代码 ~ <JavaScript 高级程序设计第三版> 源代码:
- 大家注意,
url这个变量是在with内部定义的, 但是怎么还是被return呢?
function buildUrl() {
var qs = "?debug=true";
with(location) {
var url = href + qs;
}
return url;
}
- 这段代码是没有任何问题的, 有关
with的用法, 书上也没多说. 我开始以为到了with语句的时候会再创建一层执行环境, 但是如果是这样, 我们在外部(这里是buildUrl()) 是无法访问到它的, 也就是在上面的例子中是没办法return的, 不然解析器就会赏你一个大 ERROR - 再看看书上原话:
在此, with 语句接收的是location对象, 因此其变量对象中就包含了location对象的所有属性和方法, 而这个变量对象被添加到了作用域链的前端.
- 好了, 水落石出! 我觉得书里应该把这里画出来的, 但是它没有, 所以, 让我来吧:
| window | | | | |
|--------+------------+--------------------------+---+---|
| | buildUrl() | | | |
|--------+------------+--------------------------+---+---|
| | | qs | | |
|--------+------------+--------------------------+---+---|
| | | href(belong to location) | | |
|--------+------------+--------------------------+---+---|
| | | url (belong to buildUrl) | | |
|--------+------------+--------------------------+---+---|
| | | ....(belong to location) | | |
-
各位看好了,
belong to location. 我在此的理解即是:-
buildUrl()的变量对象里面本来是只有qs, 但是执行到了with语句的时候, 会把location这个对象的所有方法和属性都添加到了buildUrl()的变量对象里面, 所以url这个变量其实是在buildUrl()的对象变量里面的,location对象的属性和方法也是在buildUrl()里面的(在with语句内是这样).
-
可能上面说的还不是很清楚, 再来段代码附张图好了:
var obj = { name: 'Nicholas' };
function printName() {
with(obj) {
var str = "The name is " + name;
}
console.log(str);
}
printName(); // The name is Nicholas
- 图解, 我相信大家看完这些后, 对作用域链基本也没啥问题了
| | variable object | variable object | | |
|--------+-----------------+----------------------+---+---|
| window | | | | |
|--------+-----------------+----------------------+---+---|
| | obj | | | |
|--------+-----------------+----------------------+---+---|
| | printName | name (belong to obj) | | |
|--------+-----------------+----------------------+---+---|
| | | str (belong to obj) | | |
|--------+-----------------+----------------------+---+---|
额外知识点: 这里纠正 with 的一些问题, 很简单的~ 建议自己敲敲代码去验证
- 如果我们在函数内部使用了
with, 那么with语句内使用的变量会默认先去with语句内包含的对象上去寻找, 如果找不到才会去从当前执行环境中寻找
- 如果我们在函数内部使用了
var obj = { name: 'Nicholas' };
var name = 'Mark';
function printName() {
with(obj) {
// 这里的 name 是从 obj 找到的, 而不是全局变量
var str = "The name is " + name;
}
console.log(str);
}
printName(); // The name is Nicholas
//------------------------------------------------------------------------------
var obj = {};
var name = 'Mark';
function printName() {
with(obj) {
// 这里的 name 是从 全局变量 找到的, 因为 obj 没有这个属性
var str = "The name is " + name;
}
console.log(str);
}
printName(); // The name is Mark
//------------------------------------------------------------------------------
- 2 . with 的危险之处
var obj = { name: 'Nicholas' };
var name = 'Mark';
function printName() {
with(obj) {
// with的危险之处, 大概就是指的这里, 我们在内部可以修改外面obj属性的值.
name = 'Jhon';
var str = "The name is " + name;
}
console.log(str);
}
console.log("Global name is ", name); // Global name is Mark
printName(); // The name is Jhon
console.log("obj.name----- ", obj.name); // obj.name----- Jhon
结束语
- 至此, 差不多就都说完了, 希望各位敲一敲来验证结果, 如果文章哪里有不对的地方, 还请指出来, 我会尽快修改, 免得误导其他人..
