.函数
3.1 概念
-
函数(function):函数就是将具有独立功能的代码块 整合在一起并命名 需要的时候调用即可
-
好处:提高代码的复用率
左箭头.onclick = function(){ change } 右箭头.onclick = function(){ change } 指示点.onclick = function(){ change} //切换图片 function change(){ 切换图片 }
-
函数使用场景
-
事件处理函数
标签.事件类型 = function(){}
-
代码复用封装
左箭头.onclick = function(){ change } 右箭头.onclick = function(){ change } 指示点.onclick = function(){ change} //切换图片 function change(){ 切换图片 }
-
对象的方法
var obj = { "name":"张三", "age":10, "isOn":true "a":undefined, "b":null, "c":[1,2,3,4], "d":{}, "f":function(){ } 函数在对象中叫方法 } //获取对象中的属性 obj.属性名 //调用对象中的方法 obj.对象名() obj.f()
-
3.2 函数声明及使用
-
代码复用封装的声明
-
普通声明
-
表达式声明
-
-
普通声明和使用
声明:function 函数名(){ 代码块 } 使用:函数名()
-
表达式声明和使用
声明 var 变量名 = function(){ 代码块 } 使用 变量名()
-
声明和使用代码示例
<script> // 1.普通声明 function change(){ console.log("切换图片") } // 函数只有调用的时候 才会执行里面的代码 调用一定要在函数名后面加() change();//切换图片 // 在打印的时候 如果只写函数名 将整个函数打印输出 console.log(change) // “function change(){ console.log("切换图片") }" // 2.表达式声明 var change1 = function(){ console.log("切换图片1"); } // 使用 change1();//"切换图片1" console.log(change1);// "function(){console.log("切换图片1")}" </script>
==函数使用注意==
-
函数只有调用的时候 才会执行里面的代码 调用一定要在函数名后面加()
-
在打印的时候 如果只写函数名 将整个函数作为字符串打印输出
3.3 函数参数
-
什么需要参数:函数中出现不确定的值,传递不同的参数 实现不同的功能
-
参数的分类
-
形参(形式参数):function 函数名(a,b){ }------a和b就是形参
-
实参(实际参数):函数名(100,200)-----100和200就是实参 实参是将值赋值给形参
-
-
当形参和实参的个数不匹配的时候
-
==形参和实参是一一对应的==
-
//4.当形参和实参个数不对应的时候 function add3(a,b){//var a; var b; console.log(a,b); console.log(arguments);//参数的集合 arguments[0] = 100;//arrguments[0] 和 a是一样的 修改arrgument[0]的值 a也会跟着改变 console.log(a);// 100 } // add3(10);//10 undefined 实参比形参个数少 // add3(10,20,30);//10,20 实参比形参个数多 add3(10,20);//10,20 实参和形参个数相同
-
多个参数: 多个参数之间用逗号隔开
<script> // 1.普通的声明 两个值相加 function add(a, b) {// var a; a=100 var b; b=200 // console.log(a,b); console.log(a + b); } //使用 10/20 20/30 40/100 200/300 add(100, 200); add(10, 20); // 30 add(20, 30);// 50 add(40, 100);// 140 add(200, 300)// 500 //2.表达式声明 var add1 = function(a,b){//var a; var b; console.log(a*b); } add1(10,20);//200 </script>
-
参数不确定 arguments参数的集合
//3.当参数个数不确定的时候:arguments参数集合 你传几个值 我就累加几个值 function add2(){ // console.log(arguments);//实参的集合 console.log(arguments.length);//实参的集合的长度 console.log(arguments[0])//10 arguments[下标] 获取下标对应的参数 var s = 0// for(var i = 0;i<arguments.length;i++){ s+=arguments[i] } console.log(s); } add2(10,20,40);//3个参数 add2(10,20,30,40,50);// 5个参数 add2(100,200);//2个参数
-
==函数的注意问题==
-
函数名重名会被覆盖
-
实参比形参少,没有被赋值的形参值为undefined
-
function add(){ console.log("快吃饭了") } function add(){ console.log("中午吃什么") } add();// 中午吃什么 function add1(a,b){ console.log(a,b); } add1(10);//10 undefined