File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ ### 作用域 {#作用域}
2+
3+ #### 执行上下文
4+
5+ ```
6+ console.log(a); // undefined
7+ var a = 100;
8+
9+ fn('zhangsan') // 'zhangsan' 20
10+ function fn(name) {
11+ age = 20;
12+ console.log(name, age);
13+ var age;
14+ }
15+ ```
16+
17+ * 范围：一段< ; script> ; 或者一个函数
18+ * 全局：变量定义、函数声明
19+ * 函数：变量定义、函数声明、this、arguments
20+ * 注意⚠️“函数声明”和“函数表达式”的区别
21+
22+ ```
23+ fn()
24+ function fn() {
25+ //声明
26+ }
27+
28+ fn1()
29+ var fn1 = function () {
30+ //表示
31+ }
32+ var a = 100; //类似于这个
33+
34+ //全局声明
35+
36+ console.log(a);
37+ var a = 100;
38+
39+ fn('zhangsan')
40+ function fn(name) {
41+ console.log(this);
42+ age = 20;
43+ console.log(name,age);
44+ var age;
45+
46+ bar(100);
47+
48+ function bar(num) {
49+ console.log(num);
50+ }
51+ }
52+ ```
53+
54+ #### 作用域
55+
56+ * 没有块级作用域
57+ * 只有函数和全局作用域
58+
59+ ```
60+ //无块级作用域
61+ if(true){
62+ var name = 'zhangsan';
63+ }
64+ console.log(name);
65+
66+ //函数和全局作用域
67+ var a = 100;
68+ function fn() {
69+ var a = 200;
70+ console.log('fn',a);
71+ }
72+ console.log('global',a);
73+ fn();
74+ ```
75+
76+ #### 如何理解作用域
77+
78+ * 自由变量
79+ * 作用域链，即自由变量的查找
80+ * 闭包的两个场景
81+
82+ ```
83+ var x=10;
84+ function foo() {
85+ alert(x);
86+ }
87+ function bar() {
88+ var x=20;
89+ foo();
90+ }
91+ bar();
92+ ```
93+
94+ * 生命周期
95+ * 作用范围
96+
97+ ## 变量作用域
98+
99+ * 静态作用域
100+ * 动态作用域
101+
102+ ### 静态作用域
103+
104+ * 被称为词法作用域
105+ * 由程序定义位置决定
106+
107+ ```
108+ var x=10;
109+ function foo() {
110+ alert(x);
111+ }
112+ function bar() {
113+ var x=20;
114+ foo();
115+ }
116+ bar();
117+ ```
118+
119+ ---
120+
121+ | | 全局作用域 |
122+ | :--- | :--- |
123+ | x | 10 |
124+ | foo | |
125+ | bar | |
126+
127+ ---
128+
129+ | | foo作用域 |
130+ | :--- | :--- |
131+ | - | - |
132+
133+ ---
134+
135+ | | bar作用域 |
136+ | :--- | :--- |
137+ | x | 20 |
138+
139+ ---
140+
141+ ### 动态作用域
142+
143+ * 程序运行时刻
144+ * 栈操作
145+
146+ ---
147+
148+ | x:20 |
149+ | :--- |
150+ | bar: |
151+ | foo: |
152+
153+ ---
154+
155+ # JS变量作用域
156+
157+ * JS使用** 静态作用域**
158+ * JS没有** 块级作用域\( 全局作用域、函数作用域\)\( ES5\) **
159+ * ES5中使用词法环境管理静态作用域
160+
161+ ```
162+ var x = 10;
163+ function foo() {
164+ var z = 30;
165+ function bar(q) {
166+ return x + y + q;
167+ }
168+ return bar;
169+ }
170+ var bar = foo(20);
171+ bar(40);
172+ ```
173+
174+ * 环境记录
175+ * 形式参数
176+ * 函数声明
177+ * 变量
178+ * 对外部词法环境的引用（outer）
179+
180+ ---
181+
182+ * 初始化
183+
184+ [ ![ ] ( https://github.com/TYRMars/JSLearn/raw/master/02/img/chushihua01.png )] ( https://github.com/TYRMars/JSLearn/blob/master/02/img/chushihua01.png )
185+
186+ ---
187+
188+ * 执行
189+
190+ [ ![ ] ( https://github.com/TYRMars/JSLearn/raw/master/02/img/environment_02.png )] ( https://github.com/TYRMars/JSLearn/blob/master/02/img/environment_02.png )
191+
192+ ---
193+
194+ ## 作用域链
195+
196+ ```
197+ var a = 100;
198+ function fn() {
199+ var b = 200;
200+
201+ //作用域没有定义变量，即“自由变量”
202+ console.log(a);
203+ console.log(b);
204+ }
205+ fn();
206+
207+ var a = 100;
208+ function F1() {
209+ var b = 200;
210+ function F2() {
211+ var c = 300;
212+ console.log(a);//a是自由变量。形成一个链式结构，向父级去查找
213+ console.log(b);//b是自由变量
214+ console.log(c);//
215+ }
216+ }
217+ ```
218+
219+
220+
Original file line number Diff line number Diff line change 1- ###
1+ # 闭包 {#闭包}
2+
3+ 闭包主要就是提升函数中变量的作用域，首先要理解[ 作用域] ( # )
4+
5+ * 函数作为返回值
6+
7+ ```
8+ function F1() {
9+ var a = 100;
10+ //返回一个函数（函数作为返回值）
11+ return function () {
12+ console.log(a);//自由变量，父作用域中查找
13+ }
14+ }
15+ //f1得到一个函数
16+ var f1 = F1();
17+ var a = 200;
18+ f1();
19+ ```
20+
21+ * 函数作为参数传递
22+
23+ ```
24+ function F1() {
25+ var a = 100;
26+ return function () {
27+ console.log(a); //自由变量，父作用域中查找
28+ }
29+ }
30+ var f1 = F1();
31+ function F2(fn) {
32+ var a = 200;
33+ fn();
34+ }
35+ F2(f1);
36+ ```
37+
38+ * 实际开发中闭包的应用，主要作用于封装变量，收敛权限
39+
40+ ```
41+ //闭包实际应用中主要作用于封装变量，收敛权限
42+ function isFirstLoad() {
43+ var _list = [];
44+ return function (id) {
45+ if(_list.indexOf(id) >= 0){
46+ return false;
47+ }else {
48+ _list.push(id);
49+ return true;
50+ }
51+ }
52+ }
53+
54+ // 应用
55+ var firstLoad = isFirstLoad()
56+ firstLoad(10) // true
57+ firstLoad(10) // false;
58+ firstLoad(20) // true
59+ ```
60+
61+ ##
262
363
464
Original file line number Diff line number Diff line change 1+ # this
2+
3+ * this 要在执行时才能确认值，定义时无法确认值
4+
5+ ```
6+ var a = {
7+ name:'A',
8+ fn:function(){
9+ console.log(this.name);
10+ }
11+ }
12+ a.fn() //this === A
13+ a.fn.call({name:'B'}) //this === {name:'B'}
14+ var fn1 = a.fn;
15+ fn1() //this === window
16+ ```
17+
18+ * 作为构造函数执行
19+ * 作为对象属性执行
20+ * 作为普通函数执行
21+ * call apply bind
22+
23+ ```
24+ function Foo(name){
25+ this.name = name;
26+ }
27+ var f = new Foo('zhangsan');
28+
29+ var obj = {
30+ name:'A',
31+ printName:function(){
32+ console.log(this.name);
33+ }
34+ }
35+ obj.printName()
36+
37+ function fn(){
38+ console.log(this);
39+ }
40+ fn()
41+
42+ // call apply bind
43+ function fn1(name) {
44+ alert(name);
45+ console.log(this);
46+ }
47+ fn1.call({x:100},'zhangsan',20);
48+ // bind
49+ var fn2 = function fn2(name) {
50+ alert(name);
51+ console.log(this);
52+ }.bind({y:200});
53+ fn2('zhangsan',20);
54+ ```
55+
56+
57+
Original file line number Diff line number Diff line change 77* 输入框输入内容
88* 页面加载完成
99
10+ ![ ] (/assets/屏幕快照 2017-12-07 下午4.28.13.png)
11+
1012# 05-04
1113
1214## 编写一个通用的事件监听函数
Original file line number Diff line number Diff line change 2020 * [ 继承] ( 03/ji-cheng.md )
2121 * [ New] ( 03/new.md )
2222* [ 04-JavaScrpit-函数表达式与函数式编程] ( 04/README.md )
23- * [ 箭头函数] ( 04/jian-tou-han-shu.md )
2423 * [ 递归] ( 04/di-gui.md )
2524 * [ 闭包] ( 04/bi-bao.md )
2625 * [ this] ( 04/this.md )
26+ * [ 箭头函数] ( 04/jian-tou-han-shu.md )
2727 * [ 高阶函数] ( 04/gao-jie-han-shu.md )
2828 * [ 由函数构建函数] ( 04/you-han-shu-gou-jian-han-shu.md )
2929 * [ 纯度、不变性和更改政策] ( 04/chun-du-3001-bu-bian-xing-he-geng-gai-zheng-ce.md )
You can’t perform that action at this time.
0 commit comments