JavaScript学习笔记（七）—— 再说函数
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript学习笔记（七）—— 再说函数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11096字，纯文字阅读大概需要16分钟。
内容图文
第八章 函数
1 函数声明和函数表达式
差别一：函数声明：函数在执行代码前被创建；函数表达式是在运行阶段执行代码时创建；
差别二：函数声明创建一个与函数同名的变量，并让她指向函数；使用函数表达式，不给函数指定名称，
因此要么在代码中将函数赋给一个变量，要么以其他方式使用函数表达式；
差别三：函数声明不返回指向函数的引用；而是创建一个与函数同名的变量，并将指向函数的引用赋给它；函数表达式返回一个引用，该引用指向函数表达式创建的函数；
差别四：函数声明是完整的语句，而函数表达式是语句的一部分；
共同一：函数都可以被看做引用，函数引用是一个指向函数的值；quack函数存储在同名变量quack；fly显式存储；可以在变量中存储指向函数的引用；
共同二：可以用相同的方式处理调用他们的语句
例：
1 <script language="JavaScript" type="text/JavaScript">
2
3 var migrating=true;
4
5
6
7 //函数表达式
8
9 var fly=function(num){
10
11 for(var i=0;i<num;i++)
12
13 {
14
15 console.log("Flying!");
16
17 }
18
19 };
20
21
22
23 //函数声明
24
25 function quack(num){
26
27 for(var i=0;i<num;i++)
28
29 {
30
31 console.log("Quack!");
32
33 }
34
35 }
36
37
38
39 //调用
40
41 if(migrating)
42
43 {
44
45 var superquack=quack;//创建变量实现再引用
46
47 superquack(2);
48
49 var superfly=fly;
50
51 superfly(3);
52
53 //quack(4);
54
55 //fly(3);
56
57 }
58
59 </script>
2函数是一个一等值
可以将函数赋给变量；
可以将函数传递给函数；
可以从函数返回函数；
例：
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>First Class</title>
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13
14
15 </style>
16
17 <script language="JavaScript" type="text/JavaScript">
18
19 //表示乘客的数据结构
20
21 var passenger=[{name:"Jane Doloop",paid:true,ticket:"coach"},
22
23 {name:"Dr.Evel",paid:true,ticket:"firstclass"},
24
25 {name:"Sue proprty",paid:false,ticket:"firstclass"},
26
27 {name:"John Funcall",paid:true,ticket:"coach"}
28
29 ];
30
31 //方法一：传统分步检验函数
32
33 /*
34
35 //检查是否买票
36
37 function checkPaid(passenger){
38
39 for(var i=0;i<passenger.length;i++)
40
41 if(!passenger[i].paid)
42
43 {
44
45 console.log("The plane can't take off:"+passenger[i].name+" hasn't paid!");
46
47 return false;
48
49 }
50
51 return true;
52
53 }
54
55 //检查是否乘客在禁飞名单
56
57 function checkNoFly(passenger){
58
59 for(var i=0;i<passenger.length;i++)
60
61 if(passenger[i].name=="Dr.Evel")
62
63 {
64
65 console.log("The plane can't take off:"+passenger[i].name+" is on the no-fly-list!");
66
67 return false;
68
69 }
70
71 return true;
72
73 }
74
75 //打印乘客姓名
76
77 function printPassenger(passenger){
78
79 for(var i=0;i<passenger.length;i++){
80
81 console.log(passenger[i].name)
82
83 }
84
85 }
86
87 //主调函数
88
89 printPassenger(passenger);
90
91 if(checkPaid(passenger))
92
93 {
94
95 if(checkNoFly(passenger))
96
97 console.log("The plane could take off!");
98
99 }
100
101 */
102
103 //方法二：传递函数简化代码
104
105 //迭代乘客
106
107 function processPassenger(passenger,testFunction)
108
109 {
110
111 for(var i=0;i<passenger.length;i++)
112
113 if(testFunction(passenger[i]))
114
115 return false;
116
117 return true;
118
119 }
120
121 //打印乘客名单
122
123 function printPassenger(passenger)
124
125 {
126
127 var ifpaid;
128
129 if(passenger.paid)
130
131 ifpaid="已";
132
133 else
134
135 ifpaid="未";
136
137 console.log(passenger.name+" "+ifpaid+"购票");
138
139 }
140
141 //禁飞名单检测
142
143 function checkNoFlyList(passenger)
144
145 {
146
147 return (passenger.name==="Dr.Evel");
148
149 }
150
151 //检查乘客是否已买票
152
153 function checkNotpaid(passenger)
154
155 {
156
157 return (!passenger.paid);
158
159 }
160
161 //打印乘客名单
162
163 processPassenger(passenger,printPassenger);
164
165 //向函数传递函数
166
167 var allCanFly=processPassenger(passenger,checkNoFlyList);
168
169 if(!allCanFly)
170
171 console.log("The plane can't take off:we have a passenger on the no-fly-list!");
172
173 var allPaid=processPassenger(passenger,checkNotpaid)
174
175 if(!allPaid)
176
177 console.log("The plane can't take off:not everyone has paid!");
178
179
180
181 //乘客点饮料
182
183 function createDrinkOrder(passenger)
184
185 {
186
187 var orderFunction;//创建一个变量用于存储要返回的函数
188
189 if (passenger.ticket==="firstclass")
190
191 {
192
193 orderFunction=function(){
194
195 alert("Would you like a cocktail or wine?");
196
197 };
198
199 }else{
200
201 orderFunction=function(){
202
203 alert("Your choice is cola or water.");
204
205 };
206
207 }
208
209 return orderFunction;//返回函数
210
211 }
212
213 //提供服务的函数
214
215 function serverCustomer(passenger)
216
217 {
218
219 var getDrinkOrderFunction=createDrinkOrder(passenger);//获取返回函数
220
221 getDrinkOrderFunction();//调用函数
222
223 //让乘客点餐
224
225 //getDrinkOrderFunction();
226
227 //播放电影
228
229 //getDrinkOrderFunction();
230
231 //清理垃圾
232
233 //getDrinkOrderFunction();
234
235 }
236
237 //顾客调用服务
238
239 function serverPassenger(passenger)
240
241 {
242
243 for(var i=0;i<passenger.length;i++)
244
245 {
246
247 serverCustomer(passenger[i]);
248
249 }
250
251 }
252
253
254
255 serverPassenger(passenger);
256
257 </script>
258
259 </head>
260
261 <body>
262
263
264
265 </body>
266
267 </html>
3 数组的sort方法
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>Drink PAIXU</title>
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13
14
15 </style>
16
17 <script language="JavaScript" type="text/JavaScript">
18
19 var products=[{name:"Grapefruit",calories:170,color:"red",sold:8200},
20
21 {name:"Orange",calories:160,color:"orange",sold:12101},
22
23 {name:"Cola",calories:210,color:"caramel",sold:25412},
24
25 {name:"Diet",calories:0,color:"caramel",sold:43922},
26
27 {name:"Lemon",calories:200,color:"clear",sold:14983},
28
29 {name:"Raspberry",calories:180,color:"pink",sold:9427},
30
31 {name:"Root Beer",calories:200,color:"caramel",sold:9909},
32
33 {name:"Water",calories:0,color:"clear",sold:62123},
34
35 ];
36
37 // sort and display the scores
38
39 console.log("\n------- sorting by sold -------");
40
41 products.sort(compareSold);
42
43 printProducts(products);
44
45
46
47 console.log("\n------- sorting by name -------");
48
49 products.sort(compareName);
50
51 printProducts(products);
52
53
54
55 console.log("\n------- sorting by calories -------");
56
57 products.sort(compareCalories);
58
59 printProducts(products);
60
61
62
63 console.log("\n------- sorting by color -------");
64
65 products.sort(compareColor);
66
67 printProducts(products);
68
69
70
71 function compareName(colaA, colaB) {
72
73 if (colaA.name > colaB.name) {
74
75 return 1;
76
77 } else if (colaA.name === colaB.name) {
78
79 return 0;
80
81 } else {
82
83 return -1;
84
85 }
86
87 }
88
89
90
91 function compareCalories(colaA, colaB) {
92
93 if (colaA.calories > colaB.calories) {
94
95 return 1;
96
97 } else if (colaA.calories === colaB.calories) {
98
99 return 0;
100
101 } else {
102
103 return -1;
104
105 }
106
107 }
108
109
110
111 function compareColor(colaA, colaB) {
112
113 if (colaA.color > colaB.color) {
114
115 return 1;
116
117 } else if (colaA.color === colaB.color) {
118
119 return 0;
120
121 } else {
122
123 return -1;
124
125 }
126
127 }
128
129
130
131 function compareSold(colaA, colaB) {
132
133 if (colaA.sold > colaB.sold) {
134
135 return 1;
136
137 } else if (colaA.sold === colaB.sold) {
138
139 return 0;
140
141 } else {
142
143 return -1;
144
145 }
146
147 }
148
149 //打印函数
150
151 function printProducts(products) {
152
153 for (var i = 0; i < products.length; i++) {
154
155 console.log("Name: " + products[i].name +
156
157 ", Calories: " + products[i].calories +
158
159 ", Color: " + products[i].color +
160
161 ", Sold: " + products[i].sold);
162
163 }
164
165 }
166
167
168
169 </script>
170
171 </head>
172
173 <body>
174
175 </body>
176
177 </html>
3 匿名函数
是没有名称的函数表达式，使用匿名函数可以让代码更简单
如：
window.onload=function(){alert("Yeah,that page loaded!");};
setTimeout(function(){alert("Time to ttake the cookies out of the oven.");},6000);
4 嵌套函数
在其他函数中定义的函数，与局部变量一样，嵌套函数的作用域也是局部的；
词法作用域：通过阅读代码可以确定变量的作用域；
自由变量：在函数体内未绑定的变量；
闭包：函数和引用环境[环境为实际环境而非环境副本]；
闭包应用;避免全局变量命名冲突，使用受保护的局部变量实现计数；
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>Bibao Counter</title>
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13
14
15 </style>
16
17 <script language="JavaScript" type="text/JavaScript">
18
19 //原来
20
21 var count=0;
22
23 function counter(){
24
25 count=count+1;
26
27 return count;
28
29 }
30
31
32
33 console.log(counter());
34
35 console.log(counter());
36
37 console.log(counter());
38
39
40
41 //使用闭包
42
43 function makeCounter(){
44
45 var count=0;
46
47 function counter(){
48
49 count=count+1;
50
51 return count;
52
53 }
54
55 return counter;
56
57 }
58
59 var doCount=makeCounter();//调用makeCounter()获得闭包（函数及其环境）
60
61 console.log(doCount());//除了调用doCount没有其他办法访问count
62
63 console.log(doCount());
64
65 console.log(doCount());
66
67 </script>
68
69 </head>
70
71 <body>
72
73
74
75 </body>
76
77 </html>
闭包案例2——将函数表达式用作实参创建闭包
1 function makeTimer(doneMessage,n){
2
3 setTimeout(function(){alert(doneMessage);},n);
4
5 }
6
7 makeTimer("Cookies are done!",1000);
闭包案例3——利用返回对象创建闭包
1 function makeCounter(){
2
3 var count=0;
4
5 return {//返回对象
6
7 increment:function(){//对象方法
8
9 count++;
10
11 return count;
12
13 }
14
15 };
16
17 }
18
19 var counter=makeCounter();
20
21 console.log(counter.increment());//调用对象方法
闭包案例4——利用返回且传递实参再函数创建闭包
1 function multN(n){
2
3 return function multBy(m){
4
5 return n*m;
6
7 };
8
9 }
10
11
12
13 var multBy3=multN(3);
14
15 console.log("Multiplying 2:"+multBy3(2));
16
17 console.log("Multiplying 4:"+multBy3(4));
闭包案例5——使用事件处理程序来创建闭包
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>Click me!</title>
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13
14
15 </style>
16
17 <script language="JavaScript" type="text/JavaScript">
18
19 //不使用闭包
20
21 /*
22
23 var count=0;
24
25 window.onload=function(){
26
27 var button=document.getElementById("clickme");
28
29 button.onclick=handleClick;
30
31 };
32
33 function handleClick(){
34
35 var message="You clicked me ";
36
37 var div=document.getElementById("message");
38
39 count++;
40
41 div.innerHTML=message+count+" times!";
42
43 }
44
45 */
46
47 //使用闭包
48
49 window.onload=function(){
50
51 var count=0;
52
53 var message="You clicked me ";
54
55 var div=document.getElementById("message");
56
57
58
59 var button=document.getElementById("clickme");
60
61 button.onclick=function(){
62
63 count++;
64
65 div.innerHTML=message+count+" times!";
66
67 };
68
69 };
70
71 </script>
72
73 </head>
74
75 <body>
76
77 <button id="clickme">Click me!</button>
78
79 <div id="message"></div>
80
81 </body>
82
83 </html>
内容总结
以上是互联网集市为您收集整理的JavaScript学习笔记（七）—— 再说函数全部内容，希望文章能够帮你解决JavaScript学习笔记（七）—— 再说函数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】