Js基础篇（函数）

为什么需要函数

函数的使用

函数的传神

函数的返回值

作用域

匿名函数

1.1为什么需要函数

目标：能说出为什么需要函数

函数：

function,是被设计为执行特定任务的代码块

说明：

函数可以把具有相同或相似逻辑的代码‘包裹’起来，通过函数调用执行这些被包裹的代码逻辑，这么做的优势是有利于精简代码方便复用。

比如我们前面使用的alert(), prompt() 和 console.log() 都是一些js函数，只不过已经封装好了，我们直接使用的。

总结：

        （1）为什么需要函数？

                 可以实现代码的复用，提高开发效率

        （2）函数是什么？

                  function执行特点任务的代码块

01函数的使用

1.2函数的使用

 函数声明语法：

function 函数名（）{
     函数体
}

例

function sayHi(){
    document.write('hai~~')
}

函数命名规范：

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数的调用语法

//函数调用，这些函数体内的代码逻辑会被执行
函数名（）

 注意：声明（定义）的函数必须调用才会真正被执行，使用（）调用函数。

//1.函数的声明
function sayHi(){
  console.log('hi~~~')
}
//2.函数调用  函数不调用，自己不执行
sayHi()

注意：函数一次可以声明多次调用，每一次函数调用函数体里面的代码会重新执行一次

           我们曾经使用的 alert(), paresInt()这种名字后面跟小括号的本质都是函数调用

函数体：

函数体是函数的构成部分，它负责将相同或相似的代码‘包裹’起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

总结：

1.函数是用哪个关键字声明的？

    function

2.函数不调用代码会执行么?如何调用函数？

   函数不调用自己不执行

   调用方式：函数名（）

3.函数的复用代码和循环重复代码有什么不同？

   循环代码写完即执行，不能很方便控制执行位置

    随时调用，随时执行，可重复调用

1.3函数的传参

   思考：这样的函数只能求10 + 20， 这个函数功能局限非常大

function getSum(){
   let num1 = 10
   let num2 = 20
   console.log(num1 + num2)
}
getSum()
getSum()
getSum()

 解决办法：把要计算的数字传到函数内

  结论：若函数完成功能需要传入数据，那么就需要用有参数的函数

             这样可以极大提高函数的灵活性

声明语法

function 函数名（参数列表）{
    函数体
}

  例

function getSum(num1){
   document.write(num1 * num2)
}

参数列表：

传入数据列表

声明这个函数需要传入几个数据

多个数据用逗号隔开

调用语法

函数名（传递的参数列表）

例子：

getSquare(8)

getSum(10,20)

 调用函数时，需要传入几个数据就写几个，用逗号隔开

求1~~50累加和：

function getSum(start,end){
  let sum = 0
  for(let i = start; i <= end; i++){
     sum += i
}
  console.log(sum)
}
getSum(1,50)

总结：

 

 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10)实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

我们之前使用的alert（‘打印') , parseInt('11') , Number('11') 本质上都是函数调用的传参

实参可以是变量：

 1.4函数的返回值

  问题1：什么是函数？

   函数是被设计为执行特定任务的代码块

 问题2：执行完特定任务之后呢“

  应该是把任务结果给我们

 我们之前写的：

 缺点：

  把计算后的结果处理方式写死了，内部处理了

解决：

把处理结果返回给调用者

需要有返回值的函数：

当调用谋个函数，这个函数会返回一个结果出来

这就是有返回值的函数

其实我们前面已经接触了很多的函数具备返回值：

let result = prompt('请你输入年龄')
let result2 = parseInt('111')

这些函数是JS底层内置的，我们直接就可以使用

当然有些函数，则没有返回值

alert('我是弹框，不需要返回值')

所以要根据需求，来设定需不需要返回值

返回值用法：

当函数需要返回数据出去时，用return关键字

语法：

return 数据

return 20

怎么使用呢？

function getSum(x,y){
  return x + y
}
let num = getSum(10 + 20)
document.write(num)

具体代码：return 把值传回给了调用者

 返回值的细节：

 在函数体中使用return关键字能将内部的执行结果交给函数外部使用

 return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

 return 函数可以没有 return，这种情况下默认返回值undefined