目录
十四、函数表达式（Function Expressions）
一、JavaScript函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// stackover flow: 程序问答网站
var foo = "xxxxxx"
function bar() {
}
var baz = {
}
</script>
</body>
</html>
二、认识函数
三、函数使用的步骤
四、声明和调用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明一个函数
// 制作好一个工具, 但是这个工具默认情况下是没有被使用
function sayHello() {
console.log("Hello!")
console.log("My name is Coderwhy!")
console.log("how do you do!")
}
// 调用一个函数
sayHello()
// 函数可以在任何你想要使用的时候, 进行调用
sayHello()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 练习一: 定义一个函数, 打印自己的个人信息
function printInfo() {
console.log("my name is why")
console.log("age is 18")
console.log("height is 1.88")
}
printInfo()
printInfo()
// 练习二: 定义一个函数, 在内部计算10和20的和
function sum() {
var num1 = 10
var num2 = 20
var result = num1 + num2
console.log("result:", result)
}
sum()
</script>
</body>
</html>五、函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// name/age/height称之为函数的参数(形参, 形式参数, parmaters)
function printInfo(name, age, height) {
console.log(`my name is ${name}`)
console.log(`age is ${age}`)
console.log(`height is ${height}`)
}
// why/18/1.88称之为函数的参数(实参, 实际参数, arguments)
printInfo("why", 18, 1.88)
printInfo("kobe", 30, 1.98)
// 另外一个案例也做一个重构
function sum(num1, num2) {
var result = num1 + num2
console.log("result:", result)
}
sum(20, 30)
sum(123, 321)
</script>
</body>
</html>
六、有参数的函数练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 练习一: 和某人打招呼
function sayHello(name) {
console.log(`Hello ${name}`)
}
sayHello("Kobe")
sayHello("James")
sayHello("Curry")
// 练习二: 给某人唱生日歌
function singBirthdaySong(name) {
console.log("happy birthday to you")
console.log("happy birthday to you")
console.log(`happy birthday to ${name}`)
console.log("happy birthday to you")
}
singBirthdaySong("Kobe")
singBirthdaySong("Why")
</script>
</body>
</html>
七、函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var result = prompt("请输入一个数字:")
// 1.理解函数的返回值
// function sayHello(name) {
// console.log(`Hi ${name}`)
// }
// var foo = sayHello("Kobe")
// console.log("foo:", foo)
// 2.返回值的注意事项
// 注意事项一: 所有的函数, 如果没有写返回值, 那么默认返回undefined
// function foo() {
// console.log("foo函数被执行~")
// }
// var result = foo()
// console.log("foo的返回值:", result)
// 注意事项二: 我们也可以明确的写上return
// 写上return关键字, 但是后面什么内容都没有的时候, 也是返回undefined
// function bar() {
// console.log("bar函数被执行~")
// return
// }
// var result = bar()
// console.log("bar的返回值:", result)
// 注意事项三: 如果在函数执行到return关键字时, 函数会立即停止执行, 退出函数
// function baz() {
// console.log("Hello Baz")
// return
// console.log("Hello World")
// console.log("Hello Why")
// }
// baz()
// 函数的具体返回值
function sum(num1, num2) {
var result = num1 + num2
return result
}
var total = sum(20, 30)
console.log("total:", total)
</script>
</body>
</html>八、函数的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 练习二: 传入宽高, 返回面积
function getRectangleArea(width, height) {
// var area = width * height
// return area
return width * height
}
var area1 = getRectangleArea(20, 30)
var area2 = getRectangleArea(50, 66)
console.log("area1:", area1)
console.log("area2:", area2)
// 练习三: 传入半径radius, 计算圆形的面积
function getCircleArea(radius) {
return Math.PI * radius * radius
}
var area3 = getCircleArea(10)
var area4 = getCircleArea(25)
console.log("area3:", area3)
console.log("area4:", area4)
// 练习四: 传入一个数字n, 计算1~n的数字和
function sumN(n) {
// 1.加对n的判断
if (n <= 0) {
console.log(`您传入的${n}是有问题的`)
return
}
// 2.真正对1~n的数字进行计算
// 1~n的数字和
// 1~5 1 2 3 4 5
var total = 0
for (var i = 1; i <= n; i++) {
total += i
}
return total
}
var result1 = sumN(5)
var result2 = sumN(10)
console.log(`result1: ${result1}, result2: ${result2}`)
var result3 = sumN(-10)
console.log("result3:", result3)
</script>
</body>
</html>九、arguments参数（JS高级再学习）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.arguments的认识
function foo(name, age) {
console.log("传入的参数", name, age)
// 在函数中都存在一个变量, 叫arguments
console.log(arguments)
// arguments是一个对象
console.log(typeof arguments)
// 对象内部包含了所有传入的参数
// console.log(arguments[0])
// console.log(arguments[1])
// console.log(arguments[2])
// console.log(arguments[3])
// 对arguments来进行遍历
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
}
foo("why", 18, 1.88, "广州市")
// 2.arguments的案例
function sum() {
var total = 0
for (var i = 0; i < arguments.length; i++) {
var num = arguments[i]
total += num
}
return total
}
console.log(sum(10, 20))
console.log(sum(10, 20, 30))
console.log(sum(10, 20, 30, 40))
</script>
</body>
</html>
十、函数中调用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function bar() {
console.log("bar函数被执行了~")
console.log("----------")
}
function foo() {
// 浏览器默认提供给我们的其他函数
console.log("foo函数执行")
console.log("Hello World")
// alert("Hello Coderwhy")
// 调用自己定义的函数
bar()
// 其他代码
console.log("other coding")
}
foo()
</script>
</body>
</html>
十一、函数的递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function bar() {
}
// 递归调用
// 默认情况下会产生无限调用的情况
function foo() {
console.log("foo函数被执行了")
foo()
}
foo()
</script>
</body>
</html>
十二、递归的实现思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 需求: 封装一个函数, 函数可以实现x的n次方法
function pow1(x, n) {
return x ** n
}
// console.log(pow1(2, 3))
// console.log(pow1(3, 3))
// console.log(Math.pow(2, 3))
// console.log(Math.pow(3, 3))
// 一. for循环实现方式
// x² = x * x
// x³ = x * x * x
function pow2(x, n) {
var result = 1
for (var i = 0; i < n; i++) {
result *= x
}
return result
}
console.log(pow2(2, 3))
console.log(pow2(3, 3))
// 二. 递归实现方式(必须有一个结束条件)
// 缺点: 性能是比较低(占用过多的栈内存)
// 优点: 写出来的代码非常简洁
function pow(x, n) {
return x * pow(x, n-1)
}
console.log(pow(2, 3))
console.log(pow(3, 3))
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 什么是斐波那契数列
// 数列: 1 1 2 3 5 8 13 21 34 55 ... x
// 位置: 1 2 3 4 5 6 7 8 9 10 ... n
// 1.斐波那契的递归实现
function fibonacci(n) {
if (n === 1 || n === 2) return 1
return fibonacci(n-1) + fibonacci(n-2)
}
// 2.斐波那契的for循环实现
function fibonacci(n) {
// 特殊的情况(前两个数字)
if (n === 1 || n === 2) return 1
// for循环的实现
var n1 = 1
var n2 = 1
var result = 0
for (var i = 3; i <= n; i++) {
result = n1 + n2
n1 = n2
n2 = result
}
return result
}
console.log(fibonacci(5))
console.log(fibonacci(10))
console.log(fibonacci(20))
</script>
</body>
</html>十三、局部变量和外部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.作用域的理解:message在哪一个范围内可以被使用, 称之为message的作用域(scope)
// 全局变量: 全局作用域
var message = "Hello World"
if (true) {
console.log(message)
}
function foo() {
console.log("在foo中访问", message)
}
foo()
// 2.ES5之前是没有块级作用域(var定义的变量是没有块级作用域)
{
var count = 100
console.log("在代码块中访问count:", count)
}
console.log("在代码块外面访问count:", count)
// for循环的代码块也是没有自己的作用域
for (var i = 0; i < 3; i++) {
var foo = "foo"
}
console.log("for循环外面访问foo:", foo)
console.log("for循环外面访问i:", i) // 3
// 3.ES5之前函数代码块是会形成自己的作用域
// 意味着在函数内部定义的变量外面是访问不到的
function test() {
var bar = "bar"
}
test()
// console.log("test函数外面访问bar:", bar)
// 函数有自己的作用域: 函数内部定义的变量只有函数内部能访问到
function sayHello() {
var nickname = "kobe"
console.log("sayHello函数的内部:", nickname)
function hi() {
console.log("hi function~")
console.log("在hi函数中访问nickname:", nickname)
}
hi()
}
sayHello()
// console.log("sayHello外面访问nickname:", nickname)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.全局变量(global variable): 在全局(script元素中)定义一个变量, 那么这个变量是可以在定义之后的任何范围内被访问到的, 那么这个变量就称之为是一个全局变量.
var message = "Hello World"
// 在函数中访问message
function sayHello() {
// 外部变量(outer variable): 在函数内部去访问函数之外的变量, 访问的变量称之为外部变量
console.log("sayHello中访问message:", message)
// 2.局部变量(local variable): 在函数内部定义的变量, 只有在函数内部才能进行访问, 称之为局部变量
var nickname = "coderwhy"
function hi() {
console.log("hi function~")
// message也是一个外部变量
console.log("hi中访问message:", message)
// nickname也是一个外部变量
console.log("hi中访问nickname:", nickname)
}
hi()
}
sayHello()
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var message = "Hello World"
function sayHello() {
// var message = "Hello Coderwhy"
function hi() {
// var message = "Hi Kobe"
console.log(message)
}
hi()
}
sayHello()
</script>
</body>
</html>
十四、函数表达式（Function Expressions）
十五、函数声明 vs 函数表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数的声明(声明语句)
foo()
function foo() {
console.log("foo函数被执行了~")
}
// 函数的表达式
// console.log(message) // undefined
// var message = "why"
// console.log(bar)
bar()
var bar = function() {
console.log("bar函数被执行了~")
}
</script>
</body>
</html> 
十六、JavaScript头等函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数作为一等(头等)公民
// 1.函数可以被赋值给变量(函数表达式写法)
var foo1 = function() {
console.log("foo1函数被执行~")
}
// foo1()
// 2.让函数在变量之间来回传递
// var foo2 = foo1
// foo2()
// 3.函数可以另外一个函数的参数
// function bar(fn) {
// console.log("fn:", fn)
// fn()
// }
// bar(foo1)
// 4.函数作为另外一个函数的返回值
// function sayHello() {
// function hi() {
// console.log("hi kobe")
// }
// return hi
// }
// var fn = sayHello()
// fn()
// 5.将函数存储在另外一个数据结构中
var obj = {
name: "why",
eating: function() {
console.log("eating")
}
}
obj.eating()
function bar1() {
console.log("bar1函数被执行~")
}
function bar2() {
console.log("bar2函数被执行~")
}
function bar3() {
console.log("bar3函数被执行~")
}
// 事件总线的封装
var fns = [bar1, bar2, bar3]
// 函数式编程: 使用函数来作为头等公民使用函数, 这种编程方式(范式).
// JavaScript支持函数式编程.
</script>
</body>
</html>
十七、回调函数（Callback Function）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.函数回调的概念理解
// function foo(fn) {
// // 通过fn去调用bar函数的过程, 称之为函数的回调
// fn()
// }
// function bar() {
// console.log("bar函数被执行了~")
// }
// foo(bar)
// 2.函数回调的案例
// function request(url, callback) {
// console.log("根据URL向服务器发送网络请求")
// console.log("需要花费比较长的时间拿到对应的结果")
// var list = ["javascript", "javascript学习", "JavaScript高级编程"]
// callback(list)
// }
// function handleResult(res) {
// console.log("在handleResult中拿到结果:", res)
// }
// request("url", handleResult)
// 3.函数回调的案例重构
function request(url, callback) {
console.log("根据URL向服务器发送网络请求")
console.log("需要花费比较长的时间拿到对应的结果")
var list = ["javascript", "javascript学习", "JavaScript高级编程"]
callback(list)
}
// 传入的函数是没有名字, 匿名函数
request("url", function(res) {
console.log("在handleResult中拿到结果:", res)
})
</script>
</body>
</html>概念一：函数作为一等公民
-
函数可以赋值给变量
-
函数也可以传递给另外一个函数
-
函数也可以作为另外一个函数的返回值
-
函数也可以存储在别的数据结构中
概念二：函数式编程
-
函数可以作为头等公民的编程语言，叫做函数式编程的语言；
-
JavaScript就是一种函数式编程语言；
后面三个概念在后续的学习中，我会经常提到和使用：
概念三：函数的回调
-
将一个作为另外一个函数的参数传入到另外一个函数中；
-
在另外一个函数中，对于传入的函数进行调用的过程，就叫做函数的回调
概念四：匿名函数
-
传入一个函数时，如果没有给函数名，也没有定义对应的变量的函数，就叫做匿名函数
概念五：高阶函数
-
foo可以接受另外一个函数参数，那么foo就称之为是一个高阶函数；
-
如果一个函数有返回另外一个函数，那么这个函数也叫做高阶函数；
function foo(fn) {
fn()
}
foo(function() {
})十八、立即执行函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.普通函数的使用过程
// function foo() {
// console.log("foo函数被执行~")
// }
// foo()
// foo(); // ()[]{}
// 2.定义函数, 定义完这个函数之后, 会要求这个函数立即被执行
// {} 代码块/对象类型
// () 控制优先级(2+3)*5/函数的调用/函数的参数
// [] 定义数组/从数组-对象中取值/对象的计算属性
// 立即执行函数(常用的写法)
(function() {
console.log("立即执行函数被调用~")
})()
// 3.立即执行函数的参数和返回值
var result = (function(name) {
console.log("函数立刻被执行~", name)
return "Hello World"
})("why")
console.log(result)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/xiaoming.js"></script>
<script src="./js/lilei.js"></script>
<script src="./js/xm_util.js"></script>
<script>
// 应用场景一: 防止全局变量的命名冲突
// 立即执行函数和普通的代码有什么区别?
// 在立即执行函数中定义的变量是有自己的作用域的
(function() {
var message = "Hello World"
// console.log(message)
})()
// console.log(message)
// var message = "Hello World"
// console.log(message)
</script>
</body>
</html>lilei.js
(function(){
var message = "Hello LiLei"
console.log(message)
})()
xiaoming.js
// esmodule -> import/export -> es5中立即执行函数
var xmModule = (function() {
var xmModule = {}
var message = "Hello XiaoMing"
console.log(message)
console.log(message.length)
xmModule.message = message
return xmModule
})()
xm_utils.js
(function() {
console.log(xmModule.message)
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
<script>
// 慢慢来, 反而是快的
// 1.获取一个按钮监听点击
// 1.拿到html元素
// var btnEl = document.querySelector(".btn")
// console.log(btnEl)
// // 2.监听对应按钮的点击
// btnEl.onclick = function() {
// console.log("点击了按钮1")
// }
// 2.获取所有的按钮监听点击
// 没有使用立即执行函数
debugger
// var btnEls = document.querySelectorAll(".btn")
// for (var i = 0; i < btnEls.length; i++) {
// var btn = btnEls[i];
// btn.onclick = function() {
// console.log(`按钮${i+1}发生了点击`)
// }
// }
// 使用立即执行函数
var btnEls = document.querySelectorAll(".btn")
for (var i = 0; i < btnEls.length; i++) {
var btn = btnEls[i];
(function(m) {
btn.onclick = function() {
console.log(`按钮${m+1}发生了点击`)
}
})(i)
}
console.log(i)
</script>
</body>
</html>
十九、立即执行函数的其他写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.常见的写法
// (function() {
// console.log("立即执行函数被调用~")
// })()
// 2.错误的写法
// () -> 优先级的()
// function foo() {
// }()
// 3.其他写法
// 匿名函数
(function(fn) {
console.log("立即执行函数被调用")
}());
// +(正号)-(符号)!(取反) - 了解
+function foo() {}()
</script>
</body>
</html>
二十、代码风格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.foo和()之间不需要有空格
// 2.多参数,后面加上一个空格
// 3.()和{之间有一个空格
// 4.{和其他函数定义在同一行中
function foo(m, n) {
}
foo(20, 30)
if (true) {
} else {
}
for (var i = 0; i < 10; i++) {
}
// 模板字符串(可以换行)
var message = `
哈哈哈哈哈${100}
`
// 图里面建议:
function sum(num1, num2) {
return num1 + num2
}
</script>
</body>
</html>
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
