详解js函数

函数的定义:

函数是一个数据类型,作用就是把一段功能性代码放在’盒子’里面,什么时候想用,这把’盒子’里的代码拿出来用就可以了.

函数有两种创建方式:

[注]在声明函数的时候, 函数内部的代码时不会执行的,只有当你调用这个函数的时候, 里面的代码才会执行!

1. 声明式函数
语法: function 名字() {}
function: 就是一个声明函数的关键字

2. 赋值式函数
语法: var 名字 = function () {}
var: 定义变量的关键字

函数的调用:

不管哪种方式定义的函数, 他们的调用方式是一样的

1. 直接调用
当你定义好一个函数以后,如果你想让这个函数内部的代码执行一下,直接写 -> 函数名()
函数名: 你要让哪一个空间里面的代码执行

function num(a,b){
                console.log(a)
                console.log(b)
            }
num(100,'hello')  

2. 依赖行为调用
需要给一个元素绑定一个行为:在 js 里面获取一个页面元素有一个简单的办法, 就是直接使用 id 名称.在一个页面里面, 一个元素的 id 名称可以直接被当作一个 js 的变量来使用,这个 id 名表示的就是这个元素
暂时添加一个点击行为, 就是 onclick
当你点击这个 box 元素的时候, 会调用后面的这一个函数,点击多少次调用多少次

  <div id="box"></div>
  function fn() {
      console.log('123')
      console.log('hello world')
  }
  box.onclick = fn
  

调用时机上的区别:

当你调用一个函数的时候, 方式都是一样的,但是调用的时机, 取决于你使用哪种方式定义函数

1.声明式函数
(function fn() {})
可以在声明之前调用, 也可以在声明之后调用

2.赋值式函数
(var fn = function () {})
只能在声明之后调用, 声明之前调用会报错

函数的参数:

函数里面的参数分成两种

1. 形参
就是写在函数定义时候的 () 里面的,可以写多个, 多个的时候中间用 逗号(,) 分隔,就是一个只能在函数内部使用的变量,至于这个变量(形参) 的值是什么, 由函数的实参决定

2. 实参
就是写在函数调用的时候的 () 里面的,可以写多个, 多个之间使用 逗号(,) 分隔,是一个准确的数据,用来给对应的形参赋值的

function num(a,b){
  // 写在定义函数括号里面的是形参
     console.log(a)
     console.log(b)
}
num(100,'hello')  
 // 调用的时候括号里面是实参

函数参数的个数关系:

1. 形参和实参一样多
按照从左到右的顺序一一进行赋值

function fn(a, b, c) {
   console.log(a)
   console.log(b)
   console.log(c)
}
fn('hello world', true, 100)

2. 形参比实参多
前面的一一对应的关系, 多出来的形参, 没有实参进行赋值
在函数内部使用的时候, 就是一个没有赋值的变量, 就是 undefined

function fn(a, b, c) {
   console.log(a)
   console.log(b)
   console.log(c)
}
fn('hello world', true)

3. 实参比形参多
前面的一一对应的关系, 多出来的实参, 在函数内部没有形参接收
相当于你白写了多出来的实参, 在函数内部不能直接使用

function fn(a, b, c) {
   console.log(a)
   console.log(b)
   console.log(c)
}
fn('hello world', true,30,50,false,'世界')

详解 arguments:

函数内部的一个特殊的变量: arguments,在每一个函数内部, 都有一个天生的变量,不需要我们取定义, 直接就能拿来使用,这个变量叫做 arguments,表示所有实参的集合.

arguments的索引
会把所有的实参按照从左到右的顺序依次排好,给每一个实参一个编号(索引 / 下标),这个编号(索引 / 下标) 是从 0 开始的, 依次递增,当你需要获取到这里面的某一个的时候,你只要写 arguments[编号] 就能得到某一个准确的值

function fu(){
            console.log(arguments)
            //打印函数所有的实参
            console.log(arguments[0])
            //打印对应编码的实参,编号是从 0 开始的
            console.log(arguments[1])
            console.log(arguments[2])
            console.log(arguments[3])
            console.log(arguments[4])
 }
fu(100,'hello',true,88,'我很好')

arguments.length
arguments还有一个属性叫做 length,表示 arguments 这个集合的长度, 也就是里面有多少个数据,值是一个 number 数据类型的数字,如果你想得到这个属性就写 arguments.length
我们可以利用 arguments.length来循环遍历:

function fn(){
    for(i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
 }
fn(100,'hello',true,88,'我很好')

函数的返回值:

返回值: 就是一个函数的结果

在函数里面添加返回值使用 return 关键字,return 就是再函数里面使用的,你想让这个函数返回什么, 就写 return 你要返回的数据

function sum(a,b){
      var scr=a + b
       return scr
}
var result= sum(10,20)
console.log(result)