第八章 函数
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(" ------- sorting by sold -------"); 40 41 products.sort(compareSold); 42 43 printProducts(products); 44 45 46 47 console.log(" ------- sorting by name -------"); 48 49 products.sort(compareName); 50 51 printProducts(products); 52 53 54 55 console.log(" ------- sorting by calories -------"); 56 57 products.sort(compareCalories); 58 59 printProducts(products); 60 61 62 63 console.log(" ------- 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>