JavaScript之函数与变量

最新推荐文章于 2020-07-21 16:18:39 发布

Albert-Wilson

最新推荐文章于 2020-07-21 16:18:39 发布

阅读量217

点赞数

分类专栏： JavaScript 文章标签： JavaScript 函数

本文链接：https://blog.csdn.net/hxwm_8937/article/details/77053868

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
 函数的基本结构 
 ：function （函数名称）（[参数1，参数2，..]）{ 

 
 函数体 

}

 
 函数类型： 无参函数 

 
 有参函数 

 
 匿名函数 

 
 无参函数 

 
 函数结构中函数名称后面括号中的参数未给定 

 
 <body> 

 
 <button οnclick="showName 
 () 
 ">显示名字</button> 

 
 </body> 

 
 <script> 

 
 function showName 
 () 
  { 

 
 alert("wwl"); 

}

 
 showName(); 

 
 </script> 

 
 有参函数 

 
 有参函数： 在函数中的参数为“ 
 形式参数 
 ”，在事件中的参数是 
 实际参数 

 
 形式参数 
 ：定义函数时指定的参数，具体数据是有实际参数决定的

 
 实际参数 
 ：调用函数时指定的参数，实参的值会影响形式参数

 
 <button οnclick="showName( 
 'wwl 
 ' 
 )">显示我的名字</button> 

 
 </body> 

 
 <script> 

 
  
 function showName( 
 name 
 ) { 

 
 alert(name); 

}

 
 showName(); 

 
 </script> 

 
 匿名函数 

 
 匿名函数：用变量接收，变量名称+（）可以让函数执行 

 
 <script> 

 
 var show 
  = function () {

 
 alert("1111111") 

}

 
 show() 
 ;

 
 </script>  

 
 匿名函数自调用的三种方法 

 
 （1）将函数用括号括起来，然后在其后面加一个括号，使其实现调用效果 

 
 <script>  

 
 ( 
 function () {

 
 alert("我是匿名函数") 

 
 } 
 )() 
 ; 

 
 </script>  

 
 （2）在函数前加一个感叹号！，然后再 
 在其后面加一个括号，使其实现调用效果 

 
 <script>  

 
 ! 
 function () {

 
 alert("我是匿名函数") 

 
 } 
 () 
 ; 

 
 </script>  

 
 （3）与第一种方法类似，不过该注意的是，它把实现函数调用的括号加在了大括号里面 

 
 <script>  

 
 ( 
 function () {

 
 alert("我是匿名函数") 

 
 } 
 ()) 
 ; 

 
 </script>  

 
   函数的属性：Arguments属性 
  
   callee属性 
  
   This属性 
  
   Arguments属性 
  
   在实参个数不确定的时候，可以省略形参，在函数体内部使用arguments，arguments是一个数组，里面包含了函数调用的所有实参。 
  
   <script> 
  
   function calc() { 
  
   console.log(arguments); 
  
   var result = 0; 
  
   var 
    length = arguments.length 
   ; 
  
   if (length == 2){ 
  
   result =  
   arguments[0] 
    +  
   arguments[1 
   ]; 
  
   }else if (length == 3){ 
  
   switch (arguments[2]){ 
  
   case "+": 
  
   result = arguments[0] + arguments[1]; 
  
   break; 
  
   case "-": 
  
   result = arguments[0] - arguments[1]; 
  
   break; 
  
   case "*": 
  
   result = arguments[0] * arguments[1]; 
  
   break; 
  
   case "/": 
  
   result = arguments[0] / arguments[1]; 
  
   break; 
  
   } 
  
   } 
  
   return result; 
  
   } 
  
   var r = calc(10,6,"/"); 
  
   alert(r); 
  
   </script> 
  
   callee属性 
  
   返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文 
  
   <script> 
  
   function show() { 
  
   console.log( 
   arguments.callee 
   ); 
  
   } 
  
   </script> 
  
   其中， 
   arguments.callee属性指向函数本身，可以用于递归 
  
   递归：1+2+3+4+...+10 
  
   <script>  
  
   var sum = 0; 
  
   function calc(num) { 
  
   sum += num; 
  
   num++; 
  
   if (num <= 10){ 
  
   arguments.callee(num) 
   ; 
  
   } 
  
   } 
  
   calc(1); 
  
   alert(sum) 
  
   </script> 
  
   This属性 
  
   this：谁调用这个方法，this就指向谁 
  
    <script> 
  
    var zhangsan = { 
  
    name:"zhangsan", 
  
    age:"26", 
  
    height:"182", 
  
    /*this：谁调用这个方法，this就指向谁*/ 
  
    say:function () { 
  
    alert(zhangsan .name); 
  
    console.log(this); 
  
    }, 
  
    eat:function () { 
  
    alert("汉堡"); 
  
    } 
  
    } 
  
    zhangsan.say(); 
  
    </script> 
  
   程序调试的相关按键 
  
    F10：代码一行一行的执行，遇到代码块，一步执行完毕 
  
    F11：代码一行一行的执行，遇到代码块，进入代码块内部 
  
    F12：如果代码运行在代码块内部时，则跳出代码块 
  
    <script> 
   
    /* 
    全局变量 
    */ 
   
    /* 
    var num = 10; 
    */ 
   
    var num = 5; 
   
    function calc1() { 
   
    /* 
    局部变量 
    */ 
   
    /* 
    var num = 10 
    ;*/ 
   
    /* 
    全局变量 
    ：没有用var修饰的变量，会一层一层的往上找 
   
    * 如果找到同名变量，就进行复制或者覆盖 
   
    * 如果到最后度没有找到同名变量，就声明一个同名全局变量*/ 
   
    num = 10; 
   
    alert(num + 15); 
   
    } 
   
    function calc2() { 
   
    alert(num + 20); 
   
    } 
   
    calc1(); 
   
    calc2(); 
   
    </script>