函数
函数介绍
函数概述
函数就是把具有相同功能、重复的代码抽取出来,让他成为程序中的一个独立实体
函数的优点
减少冗余代码
提高了代码的可维护性及可阅读性
函数的分类
- 系统函数 window里面的所有函数都属于系统函数 (console.log() alert() prompt()...)
- 内置函数 所有的内置对象里面的函数 都叫内置函数 (Math.pow())
- 自定义函数( 自己定义的函数)
自定义函数的定义以及调用
匿名函数(没有名字的函数 声明比较少 没有复用价值)
语法:
function(形参){ //可以省略的 可以有多个
函数体(代码)
}
示例:
//直接调用 让别人(事件)去调用(自动调用)
(function(){
console.log('匿名函数')
})() //匿名自执行函数不能传参
具名函数 (有名字的函数 常用)
语法:
function 函数名(形参,形参...){
函数体(代码)
}
示例:
// 声明 具体函数 (第一种)
function sayHello() {
console.log('hello');
}
sayHello()
function sayHello1(name,age) {//形参是形容的参数
console.log('hello'+name+age);
}
sayHello1('李四')//传进的是实参 根据你要的参数个数来传递对应的参数个数
// 具名函数的变种声明 (第二种)
var sayHi = function(){
console.log('hi');
}
sayHi()
//具名函数的俩种声明 调用速度来说对应的第一种更快
// function 和 var 在预编译阶段就会声明
// var 关键词修饰的变量在预编译是不会赋值的 (后面的操作)
new Function方式 (new 后面的内容首字母绝对是大写的)
语法:
var 函数名 = new Function('形参,形参1','函数体')
示例:
// 定义
var sayBye = new Function('username','console.log("bye bye!!"+username)')
//调用
sayBye('李四')
return关键词
return 返回对应的数据的 他是在函数内容进行数据返回的(当你调用了return操作后 后面的内容将不再执行)
示例:
function sum(a,b){
return a+b
console.log('不会执行的代码')
}
console.log(sum(1,2))//返回的对应的1+2的结果
如果没有return关键词 返回的一个undefined的值
function sayHi(){
console.log('hi')
}
console.log(sayHi()) //undefined
函数执行过程
1.把对应的开辟的function内存里面的代码块丢给方法栈(执行栈)去执行
2.执行栈就会自动取执行对应的方法 执行完返回对应的结果
3.当前结果返回完毕以后 对应的执行栈里面的内存空间要进行回收(GC)将这个内存空间销毁
函数中的arguments数组
- arguments是一个伪数组(有部分的数组特性)
- arguments.length 获取参数的个数 通过length属性对应的长度
- arguments[i] [] 加下标(从0开始)访问里面的元素
示例:
function sum(){ //不清楚参数个数(无参)
// arguments 可以接收里面所有的参数
//获取里面传递的所有的参数 arguments 长度length
//下标索引是从0开始的
var result = 0
//遍历对应的arguments里面的所有的参数
for(var i=0;i<arguments.length;i++){
result += arguments[i] //取出里面的参数进行求和
}
return result
}
函数作用域
作用域 当前一个变量的作用范围
- 局部作用域(在一个函数内声明的 或者是在一段代码块内声明的 他的作用范围就是当前的代码块)
- 全局作用域(在对应的全局声明的 他的作用范围就是全局的)不写关键字var也是合法的, 且是全局变量
作用域链 当前的作用域内没有找到对应的变量就会向上去寻找 而这个过程构成的链式结构称为作用域链
示例:
var a = 20
function fn(){
console.log(a);//undefined 没有var关键词就20
var a = 10
if(10>9){
console.log(a);//undefined 没有var关键词就10
var a = 30
if(5>4){
console.log(a);//undefined 没有var关键词就30
var a = 40
if(a>10){
console.log(a);//40
}
}
}
}
fn()
函数的嵌套
- 函数内部可以再包含其他函数;
- 函数之间允许相互调用,也允许向外调用, 但是不可以调用同级函数的嵌套函数;
示例:
function fn1(){
console.log('函数1');
function fn2(){
console.log('函数2');
// fn1() 没有结束就是死循环
}
function fn3(){
console.log('函数3');
//调用函数2
fn2()
}
fn2()
fn3()
}
fn1() //函数1 函数2 函数3 函数2
DOM的简单操作
1. 获取元素节点对象: document.getElementById(‘id’);
2. 获取输入框的内容: value属性 document.getElementById('input框的id').value
3. 点击事件: onclick document.getElementById('按钮的id').onclick = function(){//相关操作}
示例:(以事件做为驱动)
//通过输入框输入数值判断对应的奇偶并打印
<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>
事件驱动
因为函数不会主动执行, 只有当调用的时候才会执行函数中的代码, 在前面的dom操作示例中,我们点击了按钮才触发函数调用
递归算法
- 函数可以自己调用自己,必须要有结束条件,称为函数的递归调用
- 递归可以完成所有循环做的事情 (但是递归的效率较低)
递归三要素
- 找规律
- 找临界值(没有规律的值)return
- 自己调自己(在函数内部调用自己的函数)
“语法”
function 函数名(参量){
if(){//没规律的(一般在前面或者后面)
return //返回具体的值
}else{//有规律的
return //返回对应的规律的公式
}
}
示例:
//2 4 6 8 10 第100的值是什么
function fn(n){ //一般情况都会有参数 n表示为位数
if(n==1){//没规律的(一般在前面或者后面)
return 2 //返回具体的值
}else{ //有规律的 返回对应的规律的公式
return fn(n-1)+2
}
}
console.log(fn(100))