【JS基础】1.函数、匿名函数、回调函数、IIFE(立即执行函数)
1. 认识函数
- 函数到底是什么？
- 函数其实就是某段代码的封装，这段代码帮助我们完成某一下功能
- JS引擎中有一些已经提供的函数
- 我们也可以编写属于自己的函数
- 函数使用的步骤
- 声明函数：封装成独立的功能快
- 调用函数：享受封装的成果
2. 声明函数和调用函数
- 使用function关键字
function foo() {
console.log('这是函数声明')
}
- 函数的返回值
- 使用return来返回结果
- 如果函数没有返回语句，会有默认的返回值undefined
- 如果有return语句，但没有返回任何东西，返回值为undefined
- return语句后面的代码不会执行
- arguments参数
- 默认情况下，arguments对象是所有（非箭头）函数中可用的局部变量
- arguments是一个object类型（array-like）伪数组
function bar() {
console.log(arguments)
// [Arguments] { '0': 1, '1': 2, '2': '测试', '3': { name: '张三' } }
}
bar(1, 2, '测试', { name: '张三' })
3. 函数表达式
- 函数表达式的写法
// 函数表达式的写法
var baz = function () {
console.log('这是用函数表达式创建的函数')
}
-
在JS中函数只是一种特殊的值
-
无论函数是怎么创建的，都是一种特殊的值
-
函数表达式和函数声明的区别
- 函数表达式是在代码到达执行的时候创建
- 函数声明在被定义之前就可以使用
4. JavaScript头等函数
- 头等函数，指函数可以作为函数的参数、返回值、赋值给变量、或者存储在数据结构中
- 通常对头等公民的变成方式，称之为函数式变成
// 定义一个函数
function foo() {
console.log('这是函数foo内部')
function fooSon() {
console.log('这是foo的子函数')
}
return fooSon
}
var bar = function (fn) {
console.log(`这是函数bar`)
return fn()
}
// 函数可以赋值给变量
var baz = foo
// 将函数baz已参数的形式传递给bar
bar(baz)
// 这是函数bar
// 这是函数foo内部
// 调用foo函数
console.log('调用foo')
var returnFun = foo()
returnFun()
// 函数可以存储在数据结构中
var obj = {
name: '张三',
age: 18,
goBack: function (params) {
console.log('我能返回')
}
}
5. 回调函数
- 我们可以将一个函数传递给函数
function foo(type, callback) {
console.log(`这是传递的参数${type}`)
setTimeout(function () {
console.log('foo函数处理type中')
type++
callback(type)
}, 2000)
}
// 显然 foo是一个异步函数，如果我们需要获取最后的type值
// 获取foo处理过的type
function getFooType(type) {
console.log(`获取到了type${type}`)
}
foo(66, getFooType)
// 这是传递的参数66
// foo函数处理type中
// 获取到了type67
- 当然，我们也可以改造成匿名函数更方便使用
function foo(type, callback) {
console.log(`这是传递的参数${type}`)
setTimeout(function () {
console.log('foo函数处理type中')
type++
callback(type)
}, 2000)
}
// 显然 foo是一个异步函数，如果我们需要获取最后的type值
foo(66, function (res) {
console.log(`获取的返回值${res}`)
})
// 这是传递的参数66
// foo函数处理type中
// 获取的返回值67
6 立即执行函数
- 立即执行函数IIFE立即调用函数表达式
- 立即执行函数会创建一个独立的上下文，避免外界访问和修改内部的变量
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log(`点击了第${i}个button`)
})
}
</script>
显然，在上面的代码中，由于使用var来声明的i，每次点击后得到的i都是4，我们利用立即执行函数改造一下
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
;(function (i) {
btns[i].addEventListener('click', function () {
console.log(`点击了第${i + 1}个button`)
})
})(i)
}
立即执行函数，可以有入参，返回值
- 立即执行函数的其他写法
// 常规写法
var result = (function (text) {
var result = {
name: '张三',
age: 18,
action: foo
}
function foo() {
console.log(`匿名函数里面的函数`)
}
console.log(`这是定义的匿名函数`)
console.log(`接收到的参数${text}`)
return result
})('这是形参')
result.action()
// 表达式写法 + -都是表达式，函数也是一个特殊的值
+function foo(){}()
