函数

函数

函数的分类：

• 匿名函数：function（）{}
• 命名函数：function 函数名 （）{}

函数声明和调用：

函数是由事件驱动的代码块、或者被调用时可以重复使用的代码块

使用函数有必不可少的两个步骤，函数声明和函数调用

• 函数声明：function 函数名 （）{代码块}或var 函数名=function（）{}

• 函数调用：函数名（）；

• 函数在没有调用前是不会执行的

• 两种函数声明的区别：

• 直接调用是没有区别的

  fun();//页面弹出123
  function fun(){alert('123');}
  -----------------------------------------
  funn();//报错
  var funn=function(){alert('321')}
  

• 第一种声明方法，调用在声明前结果也是正确的；第二种方法，调用只可以在声明后，否则会报错

函数的使用

• 计算1-10之间的和

• 以前用的方法

• var sum=0;
  for(var i=0;i<=10;i++){
  	sum +=i;                       
  }
  console.log(sum);
  

• 使用函数

• 自调用

• function fun(){
  	var sum=0;//这是局部变量，后面详细整理
  	for(var i=0;i<=10;i++){
  		sum +=i;                       
  	}
      console.log(sum);
  }
  fun();//55
  fun();//55
  \\--------------
  var sum=0;//这是全局变量
  function fun(){
  	for(var i=0;i<=10;i++){
  		sum +=i;                       
  	}
      console.log(sum);
  }
  fun();//55
  fun();//110
  

• 事件驱动（两种方法）

• <script>
  	var btn=document.getElementsTagName('buttom')[0];
      function fun(){
  	var sum=0;
  	for(var i=0;i<=10;i++){
  		sum +=i;                       
  	}
      console.log(sum);
  }
      btn.onclick=fun;//方法一
      btn.onclick=function(){
          fun();
      }//方法二
  </script>
  

函数的参数

形参和实参，他们两个是一一对应的

• 形参 变量名后面括号里面的是形参,形参的个数可以是多个，也可以没有

• function fun(a){};
  

• 实参 调用后面括号里面的是实参，实参是具体的值

• function fun(){}
  fun(10);
  

• 多个形参或者多个实参都用逗号代替

• 形参和实参个数不一致

• function fun(a,b){
  	console.log(a);
  	console.log(b);
  }
  fun(10,20,30);
  //结果：a=10,b=20
  fun(10);
  //结果：a=10,b=undefined
  

• 实参给形参赋值是，是从左往右赋值的，如果形参的个数小于实参的，就不会有什么影响，如果形参的个数大于实参的，就会出现有的形参没有被赋值

arguments 类数组，伪数组、实参集合

• function fun（a,b）{
  	console.log(arguments);//1，2，3实参集合
  	console.log(arguments。length);//3 实参长度
  }
  fun(1,2,3)
  

• arguments使用

• function add(){
              var sum=0;
              for(var i=arguments[1];i<arguments[3];i++){
                  sum += i;
              }
              console.log(sum);
          }
          add(1,2,3,10,11);
  
  

• 相对应 形参 和 arguments 是可以相互覆盖的

参数类型

• 参数类型可以是数据类型中的任意一个，number、string、Boolean、null、undefined、function、object、array；但是null和undefined作为参数没有任何意义而且有时会报错

函数返回值

• 函数内部定义的变量外部是访问不了的函数通过返回值将结果传出去，关键字return

• function fun(num){
  	var sum=0;
  	for(var i=0;i<=num;i++){
      	sum += i;
      }
      return sum;//用return将sum传出去
  }
  fun(100);
  console.log(sum);//5050
  
  

获取非行内样式

• 我们平时的获取样式方法只能获取行内样式

• var a=di.style.width;
  
  

• 获取非行内样式

• 有兼容性问题，ie8以及以下浏览器不兼容，所以不同浏览器的方法不同

• 标准浏览器：getComputedStyle(obj).attr //obj是对象，attr是样式

• ie浏览器：obj.currentStyle.attr

• <style>
      #box{
          width=100px;
          height=100px;
          border:1px solid red;
      }
  </style>
  ...
  <div id="box"></div>
  <script>
  	var box=document.getElementById('box');
      box.onclick=function(){
          if(box.currentStyle){
              alert(box.currentStyle.width);
          }else{
               alert(getComputedStyle(box).width);
          }
      }
  </script>
  
  

• 上述方法就可以解决兼容问题，之所以把box.currentStyle放在前面，是因为高版本的浏览器遇到box.currentStyle提示的是false，会执行else里面的，如果把getComputedStyle(box)放在前面，低版本的浏览器根本就无法识别，会直接报错并且不执行后面