JavaScript 学习 第五天

day05 函数

1、函数

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

document.onclick = function(){

}

function sum(){}

sum()

2、函数声明及使用范围

普通的声明方式：

​ 1、声明函数 function 函数名(){

​ 代码块

​ }

​ 2、调用函数 函数名()

表达式声明：

​ var 变量 = function(){ }

​ 变量名();

//声明
function sum(){
   console.log("我使用一个函数");
}
//调用
sum();
    
//表达式声明
var f = function(){
   console.log("表达式声明");
}
f();

使用场景：

作为事件处理函数：document.onclick = function(){}

封装：有具体功能的

代码复用：重复的代码存放在函数中，需要的是调用

3、函数参数

函数参数：当函数中出现不确定的值，就可以使用参数

形参：形式参数 function 函数名(a) {} a：形参

实参：实际参数 函数名(10) 10:实参

function s(a){//var a; a = 10
  console.log(a);
}
s(10);
s(20);

1、参数个数

一个参数 ： function 函数名(a)

多个参数 ： function 函数名(a,b) //var a,b

参数个数确定不了，不写参数，用arguments，是函数内置的一个对象，表示实参集合

function f(){
console.log(arguments); //Arguments(3) [10, 20, 30] 实参集合，类数组
         console.log(arguments.length);//长度
         console.log(arguments[1]);
     }
     f(10,20,30);

2、参数类型

函数的参数类型：所有的js数据类型都能做完函数参数（number,string,boolan,null,undefined,object,array,function）

一般null和undefined不会做为函数参数，没有意义，有时候还会报错

选择排序

for(var i = 0;i<array.length;i++){
          //i = 0; arr[i] = 4
          for(var j = i+1;j<array.length;j++){
              //比较
              if(array[i]>array[j]){
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
              }
          }
      }

4、函数注意问题

1.arguments和参数是一个

 ~~~

function f1(a){
arguments[0] = 30;
console.log(a); //30

        a = 50;
        console.log(arguments); //50
    }
    f1(10);
 ~~~

2、同名会覆盖

function f2(){
    console.log("函数1");
}
function f2(){
    console.log("函数2");
}
f2();

3、变量函数同名照样会覆盖

function f3(){
   console.log("分");
}
var f3 = 10;
console.log(f3);
//f3(); //f3 is not a function

4、实参个数不同形参个数

function f4(a,b){ //a = 10 b = 20 
    console.log(a+b); 
}
f4(10,20,30); //实参个数大于形参个数，多了不管
f4(10); //实参个数小于形参个数，没有被赋值参数就是undefined

5、作用域与变量提升

1、作用域

作用域：变量或者函数的有效使用范围

​ 全局变量：在函数外声明的变量/函数，叫全局变量/函数，会一直存储在内存中，可以在任何地方被修改和访问

​ 局部变量：在函数内声明的变量/函数，叫局部变量/函数,只能在函数内部使用，出了函数的{}就会被回收

​ 作用域链：是js中的一种查找机制,先找自己，自己依次往上找，一直到全局，全局没有则是is not defined

全局变量：

var a = 10;
     console.log(a);//10

     function fun(){
         console.log(a);
         a = 100;
     }   
     fun();
     console.log(a); //100

局部变量：

function fun2(){
         var c = 10;
         console.log(c);
     }
     fun2();
     //console.log(c); //c is not defined 

作用域链：

var s = 10;
     function out(){
         var s = 20;
         function inner(){
             var s = 30;
             console.log(s);
         }
         inner();
     }

     out();

变量提升：

浏览器在解析js的，至少有其中两步

预解析：

​ var : 在js仓库中先存储变量，var a a=undefined

​ function:在js仓库中会存储整个函数 f = function(){}

​ 逐步执行：

//1.找var
    console.log(a); //undefined
    var a = 10;
    console.log(a);

    //2.找function
    console.log(f);
    function f(){
        //fdfdfd
        console.log("ffff");
    }

    console.log(sum);
    var sum = 10;
    function sum(){
        console.log("fd");
    }
    //sum(); //10  sum is not a function

函数内部在执行的时候也会先经过一个预解析

   function sum(a){//var a
        console.log(a);   //undefined
        var a = 10;
      }
      sum(10);

6、函数返回值

函数返回值：函数调用完以后得到结果

​ 所有的函数都有返回值，默认是undefined ,使用return返回指定的结果

​ 语法：return 要返回的结果

​ 注意：return 只能返回一个值,如果写多个，返回最后一个

​ 函数中只要遇到return，函数就结束

function sum(a,b){
          var s1 = a+b;
          var s2 = a*b;
          //将结果返回到函数外使用
          return s1,s2;
      }  

7、获取非元素样式

获取非行间样式

​ 标准浏览器：getComputedStyle(标签).属性名 ie6 7 8不兼容

​ ie：标签.currentStyle.属性名 标准浏览器不兼容

​ 兼容：两个方法的兼容，拿其中一个方法作为判断条件

if(oDiv.currentStyle){//ie
            var w = oDiv.currentStyle.width;
        }else{//标准
            var w = getComputedStyle(oDiv).width;
        }
        alert(w);