一、函数介绍
函数的作用是将特定的功能封装起来,需要使用时再进行调用,从而可以重复使用而减少冗余。
(一)函数分类
- 系统函数:window里面的所有函数都属于系统函数 (console.log() alert() prompt()...)
- 内置函数:所有的内置对象里面的函数 都叫内置函数 (Math.pow())
- 自定义函数:自己定义并编写其特定功能
二、函数的定义与调用
(一)自定义函数的分类
a. 匿名函数
1)一定义就使用( 好像使用场景很局限 )
(function () {
// 执行的代码
})()
2)在事件中触发( 比较常见 )
var btn = document.getElementById('btn')
btn.addEventListener('click',function() { //注意!此处传参会报错!!!
// 相关的代码
})
b. 具名函数
书写方式一:
// 函数的定义
function fn( 形参1,形参2 ) {
// 执行的代码
}
// 函数的调用
fn( 实参1,实参2 )
书写方式二:
// 函数的定义
var fn = function( 形参1,形参2…… ) {
// 执行的代码
}
// 函数的调用
fn( 实参1,实参2 )
ps:
第一种书写方式,它的函数调用速度更快!因为函数function 和 var 关键字在预编译阶段便声明,而赋值操作在编译后。
c. new Function函数( 不推荐 )
var 函数名 = new Function('形参,形参1','函数体')
//定义
var sayBye = new Function('console.log("bye bye!!")')
//调用
sayBye()
//传参
var sayBye = new Function('username','console.log("bye bye!!"+username)')
//调用
sayBye('李四')
(二)预编译做的那些事儿
- 他会声明对应的function和var关键词修饰的变量(开辟内存的操作)
- 对应的function的内存空间开辟以后他会将对应的代码块放到其中 等待调用
- var 修饰的关键词 只会开辟一个空间 并不会进行赋值(默认给他的一个undefined的值)
(三)关于return
- return 是函数返回值,也是函数结束的标志
- return 与 break 相似,其后面的代码不再执行
- 如果没写返回值,默认是undefined
三、函数作用域
函数作用域,便是函数体在{}内,里面的操作不会影响到外面的变量
局部变量与全部变量
局部变量在特定的区域( 可能在{}之内 ),而全局变量将在全局可被使用,取名时,最好将其区别开,同时使用 var 关键字重新定义,避免变量污染。
var num = 10
function fn() {
var num = 1
console.log(num);// 1
}
fn()
console.log(num); // 10
var num = 10
function fn() {
num = 1 // num值在这被修改成 1
console.log(num);// 1
}
fn()
console.log(num); // 1
嵌套函数
ps: !
- 避免相互调用,导致死循环
- 同级和上一级的可被调用,不可调用自己的下一级
代码示例:
// 定义一个函数A
function fnA() {
// 执行的代码
function fnA_1() { }
function fnA_2() { }
function fnA_3() { }
}
// 定义一个函数B
function fnB() {
// 执行的代码
}
示例补充:
- 函数A 可与函数B 相互调用
- 函数B无法调用函数A中的 fnA_1、fnA_2、fnA_3
- fnA_1、fnA_2、fnA_3可调用函数A
四、DOM操作和函数递归调用
简单的DOM
- getElementById() 可通过id号得到标签
- .onlick 、 .value 等属性可访问标签的一些状态
- arguments 是一个伪数组,用于当不确定传入几个参数给函数时
- arguments 中,.length表示数组长度,而argument[i] 可访问数组的元素( 第一个下标为0 )
递归思想
- 确定临界值 ( 也就是没有规律的数,通常时开头或者结尾 ),并确定退出条件
- 确定上下( n )的关系
- 重复调用自己