• Javascript进阶篇——(函数)笔记整理


    这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记

    什么是函数
    如果需要多次使用同一段代码,可以把它们封装成一个函数。函数(function)就是一组允许在你的代码里随时调用的语句。每个函数实际上是一个短小的脚本。
    如:要完成多组数和的功能。

    1 var sum;
    2 sum = 3+2;
    3 alear(sum);
    4 
    5 sum = 7+8;
    6 alear(sum);
    7 ......//不停的重复两行代码

    如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦。使用函数完成:

    1 function add(a,b){
    2     sum = a+b;//只需要写一次就可以
    3 };
    4 add2(3,2);
    5 add2(7,8);
    6 ......//只需要调用函数就可以

    定义函数
    定义函数语法

    1 function 函数名(参数argument){
    2   函数体statements;
    3 }
    4 //function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。
    1 function shout(){
    2      var beatles = Array("John","Paul","George","Ringo");
    3      for (var count = 0; count < beatles.length; count++){
    4          alert(beatles[count]);
    5      }
    6 }
    7 //这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。 
    8 shout();调用函数,执行脚本里的动作

    完成对两个数求和并显示结果的功能:

    1 <script type="text/javascript">
    2     function add2(){
    3         sum = 3+2;
    4         alert()sum;
    5     }
    6     add2();
    7 </script>

    函数调用
    函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
    第一种情况:在<script>标签内调用。

    1 <script type="text/javascript">
    2     function add(){
    3         sum = 1+1;
    4         alert(sum);
    5     }
    6     add();//调用函数,直接写函数名。
    7 </script>

    第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

     1 <html>
     2 <head>
     3 <script type="text/javascript">
     4     function add2(){
     5         sum = 5 + 6;
     6         alert(sum);
     7     }    
     8 </script>
     9 </head>
    10 <body>
    11 <form>
    12     <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件,直接写函数名
    13 </form>
    14 </body>
    15 </html>

    有参数的函数
    其实,定义函数还可以如下格式:

    1 function 函数名(参数1,参数2){
    2   函数代码
    3 }

    在定义函数时,你可以为它声明任意多个参数,只要用逗号把它们分隔开来就行。在函数内部,你可以像使用普通变量那样使用它的任何一个参数。
    按照这个格式,函数实现任意两个数的和应该写成:

    1 function add2(x,y){
    2     sum = x + y;
    3     document.write(sum);
    4 }
    5 //x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。

    实现如下功能:
    定义函数实现三个数的和,函数名为add3。
    计算5、8、3/7、1、4两组三个数的和。

    1 <script type="text/JavaScript">
    2     function add3(x,y,z) {
    3     sum = x + y +z;
    4         document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
    5     }
    6     add3(5,8,3);
    7     add3(7,1,4); 
    8 </script>

    返回值的函数
    函数不仅能够(以参数的形式)接收数据,还能够返回数据。我们完全可以创建一个函数并让它返回一个值、一个字符串、一个数组或是一个布尔值。这是需要用到return语句。

    1 function multiply(num1,num2){
    2     var total = num1*num2;
    3     return total;
    4 }

    之前通过"document.write"把结果输出来,现在使用函数输出
    我们只要把"document.write(sum)"这行改成如下代码:

    1 function add2(x,y){
    2     sum = x + y;
    3     return sum; //返回函数值,return后面的值叫做返回值。
    4 }
    5 //还可以通过变量存储调用函数的返回值:
    6 result = add2(3,4);//语句执行后,result变量中的值为7。

    例:下面这个函数只有一个参数(一个华氏温度值),它将返回一个数值(同一温度的摄氏温度值):

     1 <script type="text/javascript">
     2     function convertToCelsius (temp) {
     3         var result = temp - 32;
     4         result = result / 1.8;
     5         return result;
     6     }
     7     //函数的真正价值体现在,我们还可以把它们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:
     8     var temp_fahrenheit = 95;
     9     var temp_celsius = convertToCelsius(temp_fahrenheit);
    10     alert(temp_celsius);
    11 </script>
    在这个例子里,变量temp_celsius的值将是35,这个数值由convertToCelsius函数返回。
     
     
     
    在命名变量时,我用下划线来分隔各个单词;在命名函数时,我从第二个单词开始把每个单词的第一个字母写成大写形式(也就是驼峰命名法)。
     
     
     
     
    变量的作用域
    变量既可以是全局的,也可以是局部的。
    全局变量(global variable)可以在脚本中的任何位置被引用。一旦你在某个脚本里声明了一个全局变量,就可以从这个脚本中的任何位置------包括函数内部------引用它。全局变量的作用域是整个脚本。
    局部变量(local variable)只存在于声明它的那个函数的内部,在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
    可以用var关键字明确地为函数变量设定作用域。
    如果在某个函数中使用了var,那个变量就将被视为一个局部变量,它只存在于这个函数的上下文中;反之,如果没有使用var,那个变量就将被视为一个全局变量,如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量值。
    例子:
    1 function square(num){
    2     total = num*num;
    3     return total;
    4 }
    5 var total = 50;
    6 var number = square(20);
    7 alert(total);

    这是错误的,number的值为400,但是这里alert弹出的是total的值,应该是50.

    这些代码将不可避免地导致全局变量total的值发生变化。

    全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number,但因为未把这个函数内部total变量明确地声明为局部变量,这个函数把名字同样是total的那个全局变量的值也改变了。

    把这个函数写成如下的样子才是正确的:

    1 function square(num){
    2     var total = num*num;
    3     return total;
    4 }
    5 var total = 50;
    6 var number = square(20);
    7 alert(total);
    8 </script>

    正确结果

    我是根据慕课网学习计划实际敲完代码,去找些资料,有些内容书上有更详细的解释,实际操作之后再去看书就能理解了。

  • 相关阅读:
    apollo实现c#与android消息推送(三)
    apollo实现c#与android消息推送(二)
    apollo实现c#与android消息推送(一)
    成为架构师,需要哪些技能
    Centos 7.x Smokeping部署安装及使用
    ISIS实验配置
    Netty网编程实战:四种解决粘包方式切换、两种生产级双向监听模式并行、高效编解码、多处理器协同作战
    STP+基于LACP的portchannel 实验分享
    Java基础之反射
    IntelliJ IDEA 可以使用中文了
  • 原文地址:https://www.cnblogs.com/alice-shan/p/4921222.html
Copyright © 2020-2023  润新知