最近做项目中的东西,发现了一些有意思的事情，说起javascript的作用域链， 或许大家都知道，但是大家究竟是否真的掌握了呢?

如果你看到了例子中的问题，那么恭喜你,你的javascript很扎实哟！

本篇有引用上一篇中的 从写自己的小脚本库说起

如果阅读代码中有疑问,可以先看上一篇。

那客官您准备好瓜子和F12，我们边看码边聊。

我们知道,javascript中作用域链是一个很重要的知识点，这里包含了查找变量，变量使用范围等比较基础的知识。

一个作用域的结束，是以函数执行完毕为标记，并将函数内部的变量，内部函数全部销毁。

那么我们来看几个例子吧。

这个例子有几种情况，为了直观我随便写了一个简单的页面，事件绑定使用之前的文章中的简陋的函数库，有疑问的童鞋，请回头翻阅之前的内容。

先贴上结构和样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div.warp{
width: 280px;
height: 80px;
border: 1px dotted #999;
padding: 10px;
background: #eee;
margin: 70px auto;
}
div.warp div.inner-warp {
position: relative;
width: 100%;
height: 100%;
}
 
div.inner-warp div.controls {
border: 1px dotted #999;
background: #eee;
position: absolute;
padding-left: 20px;
top: -30px;
left: -11px;
width: 100%;
height: 22px;
font-size: 12px;
line-height: 20px;
}
 
div.controls label.radio-mode {
margin: 2px 16px 0 0;
float: left;
 
}
div.controls input[type=radio] {
float: left;
height: 12px;
margin: 4px 4px 0 0;
}
 
div.warp textarea#tarTxt{
width: 200px;
height: 100%;
resize: none;
float: left;
}
 
div.warp button#test-me {
height: 40px;
width: 68px;
float: left;
margin-left: 8px;
}
div.warp button#reset-me {
height: 40px;
width: 68px;
float: left;
margin-left: 8px;
}
</style>
</head>
<body>
 
<div class="warp">
<div class="inner-warp">
<div class="controls">
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="A" checked="true">壹
</label>
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="B">贰
</label>
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="C">叁
</label>
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="D">肆
</label>
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="E">伍
</label>
<label class="radio-mode">
<input type="radio" name="radio-mode" data-action="F">陆
</label>
</div>
 
<textarea id="tarTxt" cols="30" rows="10"></textarea>
 
<button id="test-me">初始化</button>
<button id="reset-me">重置</button>
 
</div>
</div>
</body>
</html>