正文
JavaScript学习笔记（七）—— 再说函数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
第八章 函数1 函数声明和函数表达式
差别一：函数声明：函数在执行代码前被创建；函数表达式是在运行阶段执行代码时创建；
差别二：函数声明创建一个与函数同名的变量，并让她指向函数；使用函数表达式，不给函数指定名称，
因此要么在代码中将函数赋给一个变量，要么以其他方式使用函数表达式；
差别三：函数声明不返回指向函数的引用；而是创建一个与函数同名的变量，并将指向函数的引用赋给它；函数表达式返回一个引用，该引用指向函数表达式创建的函数；
差别四：函数声明是完整的语句，而函数表达式是语句的一部分；
共同一：函数都可以被看做引用，函数引用是一个指向函数的值；quack函数存储在同名变量quack；fly显式存储；可以在变量中存储指向函数的引用；
共同二：可以用相同的方式处理调用他们的语句
例：
<script language="JavaScript" type="text/JavaScript"> var migrating=true; //函数表达式 var fly=function(num){ for(var i=0;i<num;i++) { console.log("Flying!"); } }; //函数声明 function quack(num){ for(var i=0;i<num;i++) { console.log("Quack!"); } } //调用 if(migrating) { var superquack=quack;//创建变量实现再引用 superquack(2); var superfly=fly; superfly(3); //quack(4); //fly(3); } </script>
2函数是一个一等值
可以将函数赋给变量；
可以将函数传递给函数；
可以从函数返回函数；
例：
<!doctype html> <html lang="en"> <head> <title>First Class</title> <meta charset="utf-8"> <style type="text/css"> </style> <script language="JavaScript" type="text/JavaScript"> //表示乘客的数据结构 var passenger=[{name:"Jane Doloop",paid:true,ticket:"coach"}, {name:"Dr.Evel",paid:true,ticket:"firstclass"}, {name:"Sue proprty",paid:false,ticket:"firstclass"}, {name:"John Funcall",paid:true,ticket:"coach"} ]; //方法一：传统分步检验函数 /* //检查是否买票 function checkPaid(passenger){ for(var i=0;i<passenger.length;i++) if(!passenger[i].paid) { console.log("The plane can't take off:"+passenger[i].name+" hasn't paid!"); return false; } return true; } //检查是否乘客在禁飞名单 function checkNoFly(passenger){ for(var i=0;i<passenger.length;i++) if(passenger[i].name=="Dr.Evel") { console.log("The plane can't take off:"+passenger[i].name+" is on the no-fly-list!"); return false; } return true; } //打印乘客姓名 function printPassenger(passenger){ for(var i=0;i<passenger.length;i++){ console.log(passenger[i].name) } } //主调函数 printPassenger(passenger); if(checkPaid(passenger)) { if(checkNoFly(passenger)) console.log("The plane could take off!"); } */ //方法二：传递函数简化代码 //迭代乘客 function processPassenger(passenger,testFunction) { for(var i=0;i<passenger.length;i++) if(testFunction(passenger[i])) return false; return true; } //打印乘客名单 function printPassenger(passenger) { var ifpaid; if(passenger.paid) ifpaid="已"; else ifpaid="未"; console.log(passenger.name+" "+ifpaid+"购票"); } //禁飞名单检测 function checkNoFlyList(passenger) { return (passenger.name==="Dr.Evel"); } //检查乘客是否已买票 function checkNotpaid(passenger) { return (!passenger.paid); } //打印乘客名单 processPassenger(passenger,printPassenger); //向函数传递函数 var allCanFly=processPassenger(passenger,checkNoFlyList); if(!allCanFly) console.log("The plane can't take off:we have a passenger on the no-fly-list!"); var allPaid=processPassenger(passenger,checkNotpaid) if(!allPaid) console.log("The plane can't take off:not everyone has paid!"); //乘客点饮料 function createDrinkOrder(passenger) { var orderFunction;//创建一个变量用于存储要返回的函数 if (passenger.ticket==="firstclass") { orderFunction=function(){ alert("Would you like a cocktail or wine?"); }; }else{ orderFunction=function(){ alert("Your choice is cola or water."); }; } return orderFunction;//返回函数 } //提供服务的函数 function serverCustomer(passenger) { var getDrinkOrderFunction=createDrinkOrder(passenger);//获取返回函数 getDrinkOrderFunction();//调用函数 //让乘客点餐 //getDrinkOrderFunction(); //播放电影 //getDrinkOrderFunction(); //清理垃圾 //getDrinkOrderFunction(); } //顾客调用服务 function serverPassenger(passenger) { for(var i=0;i<passenger.length;i++) { serverCustomer(passenger[i]); } } serverPassenger(passenger); </script> </head> <body> </body> </html>
3 数组的sort方法
<!doctype html> <html lang="en"> <head> <title>Drink PAIXU</title> <meta charset="utf-8"> <style type="text/css"> </style> <script language="JavaScript" type="text/JavaScript"> var products=[{name:"Grapefruit",calories:170,color:"red",sold:8200}, {name:"Orange",calories:160,color:"orange",sold:12101}, {name:"Cola",calories:210,color:"caramel",sold:25412}, {name:"Diet",calories:0,color:"caramel",sold:43922}, {name:"Lemon",calories:200,color:"clear",sold:14983}, {name:"Raspberry",calories:180,color:"pink",sold:9427}, {name:"Root Beer",calories:200,color:"caramel",sold:9909}, {name:"Water",calories:0,color:"clear",sold:62123}, ]; // sort and display the scores console.log("\n------- sorting by sold -------"); products.sort(compareSold); printProducts(products); console.log("\n------- sorting by name -------"); products.sort(compareName); printProducts(products); console.log("\n------- sorting by calories -------"); products.sort(compareCalories); printProducts(products); console.log("\n------- sorting by color -------"); products.sort(compareColor); printProducts(products); function compareName(colaA, colaB) { if (colaA.name > colaB.name) { return 1; } else if (colaA.name === colaB.name) { return 0; } else { return -1; } } function compareCalories(colaA, colaB) { if (colaA.calories > colaB.calories) { return 1; } else if (colaA.calories === colaB.calories) { return 0; } else { return -1; } } function compareColor(colaA, colaB) { if (colaA.color > colaB.color) { return 1; } else if (colaA.color === colaB.color) { return 0; } else { return -1; } } function compareSold(colaA, colaB) { if (colaA.sold > colaB.sold) { return 1; } else if (colaA.sold === colaB.sold) { return 0; } else { return -1; } } //打印函数 function printProducts(products) { for (var i = 0; i < products.length; i++) { console.log("Name: " + products[i].name + ", Calories: " + products[i].calories + ", Color: " + products[i].color + ", Sold: " + products[i].sold); } } </script> </head> <body> </body> </html>
3 匿名函数
是没有名称的函数表达式，使用匿名函数可以让代码更简单
如：
window.onload=function(){alert("Yeah,that page loaded!");};
setTimeout(function(){alert("Time to ttake the cookies out of the oven.");},6000);
4 嵌套函数
在其他函数中定义的函数，与局部变量一样，嵌套函数的作用域也是局部的；
词法作用域：通过阅读代码可以确定变量的作用域；
自由变量：在函数体内未绑定的变量；
闭包：函数和引用环境[环境为实际环境而非环境副本]；
闭包应用;避免全局变量命名冲突，使用受保护的局部变量实现计数；
<!doctype html> <html lang="en"> <head> <title>Bibao Counter</title> <meta charset="utf-8"> <style type="text/css"> </style> <script language="JavaScript" type="text/JavaScript"> //原来 var count=0; function counter(){ count=count+1; return count; } console.log(counter()); console.log(counter()); console.log(counter()); //使用闭包 function makeCounter(){ var count=0; function counter(){ count=count+1; return count; } return counter; } var doCount=makeCounter();//调用makeCounter()获得闭包（函数及其环境） console.log(doCount());//除了调用doCount没有其他办法访问count console.log(doCount()); console.log(doCount()); </script> </head> <body> </body> </html>
闭包案例2——将函数表达式用作实参创建闭包
function makeTimer(doneMessage,n){ setTimeout(function(){alert(doneMessage);},n); } makeTimer("Cookies are done!",1000);
闭包案例3——利用返回对象创建闭包
function makeCounter(){ var count=0; return {//返回对象 increment:function(){//对象方法 count++; return count; } }; } var counter=makeCounter(); console.log(counter.increment());//调用对象方法
闭包案例4——利用返回且传递实参再函数创建闭包
function multN(n){ return function multBy(m){ return n*m; }; } var multBy3=multN(3); console.log("Multiplying 2:"+multBy3(2)); console.log("Multiplying 4:"+multBy3(4));
闭包案例5——使用事件处理程序来创建闭包
<!doctype html> <html lang="en"> <head> <title>Click me!</title> <meta charset="utf-8"> <style type="text/css"> </style> <script language="JavaScript" type="text/JavaScript"> //不使用闭包 /* var count=0; window.onload=function(){ var button=document.getElementById("clickme"); button.onclick=handleClick; }; function handleClick(){ var message="You clicked me "; var div=document.getElementById("message"); count++; div.innerHTML=message+count+" times!"; } */ //使用闭包 window.onload=function(){ var count=0; var message="You clicked me "; var div=document.getElementById("message"); var button=document.getElementById("clickme"); button.onclick=function(){ count++; div.innerHTML=message+count+" times!"; }; }; </script> </head> <body> <button id="clickme">Click me!</button> <div id="message"></div> </body> </html>
