06-js函数

1.1函数概念

为什么要学函数：要重复使用每个需求的代码块

• 函数：

1. 封装了一段可以被重复执行调用的代码块也是引用数据（可作为数据容器）

        var fn = function(){

                 console.log(123);

             }

             fn.hqyj=666; 

             fn['name'] = 'liming';

             fn();

             console.log(fn.hqyj) //666

        2. 是特殊的对象--引用数据，typeof()检测的是字符串function

         console.log(typeof fn) //function

• 封装：把一个或着多个功能通过函数的方式封装起来，对外只是提供一个简单的函数接口

 

1.2函数的使用

1.）声明函数 （直接在作用域（写代码块的地方，如script 标签全部；函数的{}）写一个函数，遇到script就运行了）

function 函数名() {

      // 函数体

  }

调用：函数名()

1）function 声明函数的关键字

2）函数名一般是动词

3）函数不调用不执行

 

2）定义函数（直接创建一个函数，运行到函数的地方才运行）

函数表达式（匿名函数）

var 变量名 =function （）{}；//这里的变量名是函数表达式

var fun=function（）{

console.log('我是函数表达式')；

}

调用：变量名();

          fun();

1）fun是变量名，不是函数名

2）函数表达式声明方式和声明变量差不多；前者里面存的是值，后者存的是函数

3)函数表达式里面也可以传递参数

1.3行参和实参

声明中，function 函数名  (行参1，行参2，，) { }；

// 行参可以看作不用定义的变量，功能所要处理的数据

调用时，函数名（实参1，实参2，，）；

// 隐式操作：var 形参1=实参2；

函数行参实参个数匹配：

1）个数一样，正常匹配

2）实参多于行参，回取到行参的个数

不会影响程序执行逻辑但是会影响性能 

3）行参多于实参，后面没有匹配的参数为undefined，但是函数体内又使用了未匹配的参数

可能会影响程序执行逻辑：解决方案就是设计函数时提前预设

	function fn(a,b){
        // console.log(b.name); // 报错
        //解决
        if(a == undefined){a = 0};
        if(b == undefined){b = {}};
     }
     fn(100)

补充：

arguments的使用

不知道用户要传多少个实参过来，用arguments来获取。arguments是当前函数的一个内置对象。

存储了传递的所有实参

arguments是伪数组： 

                                    1.具有数组的length属性

                                     2.按照索引的方式存储，可以遍历

                                     3.没有真正数组的方法 pop（） push（）

函数的length、name（笔试题）

介绍：

•   函数的length代表的是行参的个数；fn.length
•   arguments.length 代表实参的个数
•   函数的name属性，就是函数名字

1.4函数的返回值

意义：把函数的返回值返回给调用者

function 函数名() {

      // 函数体

return 需要返回的结果；

  }

1）只要函数遇到return 就把后面的结果 返回给调用者 ，函数名() =return结果

2）不要在函数内部输出结果

3）return后面的代码不会被执行，终止函数作用

4）return只能返回一个值；返回最后一个值。没有返回值就返回undefined

5）return要返回多个值，可用数组返回

6）return 后面不写表达式；默认是一个空语句。如果后面的表达式换行，return后面必须有符号，可以加个小括号。

例子：

return(                   return                                          return a

a+2                         a+2; //返回undefined                     +2; //正确

);

1.5js的作用域

1.作用域 

代码名字在某个范围其效果,目的是为了提高程序的可靠性，减少命名冲突

1）作用域：

是在预先时，代码中的某些特定部分中的变量、函数和对象的可访问性。

也可以理解作用域是一个独立的地盘，让变量不外泄出去，不同作用域的vi案例不会有冲突

• 全局作用域（script 标签全部）、局部作用域（函数的{}）
• 对象的{}和for、if、while语句里面的{}不是作用域

2）块级作用域：es6提供，通过新增命令 let 和 const来体现

2.js的作用域

{}代表一个作用域，下面是js作用域的嵌套关系

script标签里的全部{  --》function fm1(){ ==》 function fm1{}  }  }

1）全局作用域：整个script标签；一个单独js文件；

var num =10；

2）局部作用域：在函数内部；名字只要在函数内部才起作用;

function fn（）{

//局部作用域

}

3.变量的作用域：全局变量和局部变量

1）全局变量：在全局作用域下的变量

• 函数内部的代码可以访问全局变量

• 在函数内部没有声明的变量也是全局变量

var num=10；// num 就是一个全局变量

2）局部变量L:在局部作用域下的变量，只有函数内部使用；

• 函数外部的代码不能访问局部变量

• 函数的行参也看作是局部变量

	
	           function fn(a,b){
	        // console.log(b.name); // 报错
	        //解决
	        if(a == undefined){a = 0};
	        if(b == undefined){b = {}};
	        this.fn1 = function (){
	            console.log(3)
	        }
	
	        function fn2(){
	            console.log(4)
	      
	     }
	     }
	     fn(1)
	     fn1() //不报错，因为 this 是window,fn1函数在window对象中
	     fn2() //报错，全局不能访问局部

 

注意点：在函数内部没有声明却赋值了变量的两种情况

num1会就近原则选择最近域的num1的值。那个值所对应的变量是全局变量，那num1就是全局变量；反之则是局部变量

        1.全局变量情况

                function fn（）{                                      

                var num=10；

                num1=100；//全局变量

                }

        验证：

               2.局部变量情况

                function fn(){

                       var num1 =10

                        function fm(){

                        num1 = 100; //局部变量

                }

                }

3）全局变量只有在浏览器关闭的时候才被销毁，因此比较占内存

局部变量，只有在函数内部使用，当其所在的代码块被执行时，会被初始化；结束时被销毁，节省空间