JS 函数

Joker_ZzzZ_

于 2022-08-30 00:31:22 发布

阅读量1.3k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Joker_ZzzZ_/article/details/126595209

版权

概念

函数(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()

函数声明及使用

代码复用封装的声明
- 普通声明
- 表达式声明
普通声明和使用

声明:function 函数名(){ 代码块 }
使用:函数名()

表达式声明和使用

声明 var 变量名 = function(){ 代码块 }
使用变量名()

声明和使用代码示例

// 2.表达式声明
var change1 = function(){
console.log("切换图片1");
}
// 使用
change1();//"切换图片1"
console.log(change1);// "function(){console.log("切换图片1")}"

</script>

==函数使用注意==

函数只有调用的时候才会执行里面的代码调用一定要在函数名后面加()
在打印的时候如果只写函数名将整个函数作为字符串打印输出

函数参数

什么需要参数:函数中出现不确定的值，传递不同的参数实现不同的功能
参数的分类
- 形参(形式参数):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 实参和形参个数相同

多个参数: 多个参数之间用逗号隔开

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

作用域

作用域:变量或者函数的有效使用范围
作用域分类:局部作用域全局作用域
全局变量/函数局部变量/函数
- 全局变量/函数:在函数外声明变量/函数，可以在代码中的任何地方访问和修改，会一直存储在计算机的内存中，直到页面关闭
- 局部变量/函数：在函数内部声明的变量/函数，只能在函数内部使用出了函数就会被销毁

 var a = 10;
        function fn1(){
            var x = 10;
            var y = 20;
            console.log(x,y);
            function fn2(){
                console.log("这是函数2")
            }
        }
        fn1();
        //全局变量和函数  a全局变量   fn1全局函数  x y是局部变量  fn2是局部函数

全局变量

在函数外声明变量/函数，可以在代码中的任何地方访问和修改，会一直存储在计算机的内存中，直到页面关闭

     /* 
          全局变量/函数 ：在函数外声明变量/函数，可以在代码中的任何地方访问和修改，会一直存储在计算机的内存中，直到页面关闭
        */
        var a = "我是变量a";
        function fn1(){
            console.log(a);//"我是变量a"
            a = "我改变了a";
            var x = 10;
            var y = 20;
            console.log(x,y);
            function fn2(){
                console.log(a);//"我是变量a"
              
                console.log("这是函数2")
            }
        }
        fn1();
        console.log(a);//"我改变了"
        //全局变量和函数  a全局变量   fn1全局函数  x y是局部变量  fn2是局部函数

4.2 局部变量

在函数内部声明的变量/函数，只能在函数内部使用出了函数就会被销毁

fn1();
</script>

==注意==
- 声明变量不带var 也可以使用但是声明出来是全局变量
- 只要是在函数内部声明的东西都是局部变量

作用域链

作用域链:是js的一种查找机制，先找自身作用域范围内，再依次往父级作用域查找，直到找到全局变量如果全局变量范围也找不到就是is not defined

}
fn1();
console.log(b);//20

//2
var y = 100;
function fn2() {
console.log(y);//100
}
fn2();

//3
function fn3() {
// console.log(a);//a is not defined
}
fn3();

//4
function outer() {
function inner() {
console.log("我是内部的inner")
}
inner();//我是内部的inner
}
outer();
// inner();// inner is not defined

</script>

预解析

fn1();//"ahahahha"
function fn1(){
console.log("ahahahha");
}
fn1();// "ahahahha"
</script>

通过以上代码,代码不是单纯的从上往下执行计算机在解析的时候从上往下执行会经过很多步骤，至少掌握住两种步骤

1.预解析(变量提升)
- 找var关键字提前声明变量(只看等号左边的内容)，如果变量重名在内存中只会声明一次
- 找function关键字提前声明整个函数如果重名会多次声明
2.逐行执行
- 逐行执行的时候会忽略funtion函数声明和var 变量声明

// 2.

var a = 10;
var a = 20; //只在内存中存储一次 var a
console.log(a);//20

function fn1(){
console.log("吃饭睡觉打豆豆")
}

function fn1(){
console.log("为什么要打豆豆")
}
//两个fn1都内存中存储了但是在内存中也会出现同名会被覆盖
fn1();

预解析练习

==变量和函数重名也会被覆盖==

函数返回值

什么时候需要函数返回值
- 函数外侧需要函数内部的值
语法: return 返回值

//1.return 返回值的基础用法
function add(a,b){
var s = a+b;
console.log(s);// 300
return s;//将结果返出去
}
//在外侧获取到300
// console.log(s);// s is not defined
var res = add(100,200);// 调用并接受返回值
console.log(res);// 300

==注意事项==
- 注意1：return一次只能返回一个值如果连续写多个返回的是最后一个值
- 注意2： return不仅有返回值的作用还有结束函数执行的作用（遇到return就结束）

//注意1 return一次只能返回一个值如果连续写多个返回的是最后一个值

function fn1(a, b) {
var sum1 = a + b;
var sum2 = a - b;
// return sum1,sum2;

//如果想一次返回多个数据可以返回一个数组或者object类型
// return [sum1,sum2];
return {
"he":sum1,
"cha":sum2
}
}

var a = fn1(100, 200);
console.log(a);// [300, -100] {"he":300,'cha';-100}

// 注意2： return不仅有返回值的作用还有结束函数执行的作用（遇到return就结束）
function fn2(a,b){
var sum1 = a*b;
var sum2 = a/b;
return [sum1,sum2];
// console.log("你说我还会执行吗？")

//函数中不能写两个return 因为遇到第一个return的时候就已经返回并结束函数
// return sum1;
// return sum2;
}

var c = fn2(200,50);
console.log(c);// [10000,4]