JavaScript中的函数

函数概述

函数 实际就是多行代码的抽取（多行代码会构成特定的功能）（方法）

函数的优点

减少冗余代码（重复的代码放在函数里面 在需要的时候调用）函数封装（特定的一些代码使用函数来包
起来），
提高了代码的可维护性及可阅读性

函数的分类

• 系统函数 window里面的所有函数都属于系统函数 (console.log() alert() prompt()...)
• 内置函数 所有的内置对象里面的函数 都叫内置函数 （Math.pow()）
• 自定义函数（ 自己定义的函数）
• 内置函数和系统函数我们更关注于他的使用 自定义函数（定义以及使用）

定义函数

function 函数名(){

函数体;

}

说明：

function 定义函数关键字，

“函数名” 是你给函数取的名字，

“函数体” 是为完成特定功能的代码。

函数名 必须是唯一的

函数定义好后，不能自动执行，需要调用它，直接在需要的位置写函数名。

函数调用

函数定义好后，不能自动执行，需要调用它，直接在需要的位置写函数名。
定义函数方法：

1. 第一种情况,在<script>标签内调用

function 函数名(){

函数体;

}

函数名 ();// 函数调用，直接写函数名
2. 在 HTML 文件中调用，例如通过点击按钮后用定义好的函数
如：<input type=“button” value=“click” οnclick=“add() ”/>

函数调用

创建函数
function 函数名( )

{

语句;

}

调用函数
函数调用一般和表单元素的事件一起使用，调用格式为：
事件名＝“函数名” ;

四.匿名函数
没有名字的函数就是匿名函数
function() {

函数体；

}

var sing = function(){

函数体;

}

作用域

在函数内部声明的变量（局部变量），在函数外部并不能访问
function demo() { var a="外面不能访问我！"; }

//alert(a);//出错，没有声明变量a

demo();//执行函数

alert(a);//仍然出错

函数外部声明的变量（全局变量），在函数内部是可以访问的

function demo() {

//在一个脚本中，使用function关键字声明的具有名称的函数在脚本中出现的次序是任意的，并不存在先后之分

alert(globalVar);

}

//demo();//出错，执行时变量globalVar还没有声明

var globalVar="Hello!";

demo();//输出Hello!

return关键词

return 返回对应的数据的 他是在函数内容进行数据返回的（当你调用了return操作后 后面的内容将不
再执行）
如果没有return关键词 返回的一个undefined的值

function sum(a,b){
return a+b
console.log('不会执行的代码')
}
console.log(sum(1,2))//返回的对应的1+2的结果
function sayHi(){
console.log('hi')
}
console.log(sayHi()) //undefined

函数的arguments（参数数组 参数的集合）

如果函数里面套了一个函数，而且有return。那么有两种方法调用里面嵌套的函数

function f1() {
    var n = 99;
    function f2() {
        alert(n);
    }
    return f2;
    //因为返回了f2，所以调用f1()时,返回的是函数f2
}

1，把函数赋值f1给变量，那么调用变量时相当于调用f1的返回值——函数f2

function f1() {
    var n = 99;
    function f2() {
        alert(n);
    }
    return f2;
    //因为返回了f2，所以调用f1()时,返回的是函数f2
}

2，在f1()后面加个()，表示再一次调用返回值

function f1() {
    var n = 99;
    function f2() {
        alert(n);
    }
    return f2;
    //因为返回了f2，所以调用f1()时,返回的是函数f2
}

Dom的简单操作

//通过输入框输入数值判断对应的奇偶并打印
<input id="number" type="text">
<button id="btn">判断奇偶</button>
<script>
function handlerClick(){
//拿到input框里面的内容 获取到input框
var inputValue = document.getElementById('number').value //string类型
// console.log(typeof inputValue); 如果是+法操作必须要先转类型
//判断奇偶的操作
if(inputValue%2==0){
console.log('当前为偶数');
}else{
console.log('当前为奇数');
}
}
//首先需要点击按钮 获取按键 加点击事件
//事件触发自动调用对应的函数 （事件驱动）
document.getElementById('btn').onclick = handlerClick
</script>

递归算法

递归可以完成所有循环做的事情 （但是递归的效率较低）
递归三要素

• 找规律
• 找临界值（没有规律的值）return
• 自己调自己（在函数内部调用自己的函数）

//通过输入框输入数值判断对应的奇偶并打印
<input id="number" type="text">
<button id="btn">判断奇偶</button>
<script>
function handlerClick(){
//拿到input框里面的内容 获取到input框
var inputValue = document.getElementById('number').value //string类型
// console.log(typeof inputValue); 如果是+法操作必须要先转类型
//判断奇偶的操作
if(inputValue%2==0){
console.log('当前为偶数');
}else{
console.log('当前为奇数');
}
}
//首先需要点击按钮 获取按键 加点击事件
//事件触发自动调用对应的函数 （事件驱动）
document.getElementById('btn').onclick = handlerClick
</script>