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>