为什么需要函数
- 函数:function,是被设计为执行特定任务的代码块
- 说明:函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
函数使用
- 函数的声明语法:
<Script>
function 函数名() {
函数体
}
</Script>
例如:
<Script>
function sayHi() {
document.write( 'hai~~' )
}
</Script>
- 函数名命名规范
➢和变量命名基本一致
➢尽量小驼峰式命名法
➢前缀应该为动词
➢命名建议:常用动词约定
动词 | 判断是否含义某个值 |
---|---|
can | 判断是否可执行某个动作 |
has | 判断是否含义某个值 |
is | 判断是否为某个值 |
get | 获取某个值 |
set | 设置某个值 |
load | 加载某些数据 |
- 函数的调用语法
- 注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数
- 例如:
<script>
//函数次声明可以多次调用,每次函数调用函数体里面的代码会重新执行一次
sayHi( )
sayHi( )
</script>
- alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用
- 函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才
会被执行。函数的功能代码都要写在函数体当中。
函数传参
有参数的函数声明和调用
声明语法
- 声明语法:
<script>
function 函数名(参数列表){
函数体
}
</script>
- 参数列表
➢传入数据列表
➢声明这个函数需要传入几个数据
➢多个数据用逗号隔开 - 例如:
单个参数:
<script>
function getSquare (num1) {
document.write (num1 * num1 )
}
</script>
多个参数:
<script>
function getSum(num1, num2) {
document.write( num1 + num2 )
}
</script>
调用语法
- 函数名(传递的参数列表)
- 例如:getSquare(8) 、getSum( 10,20)
- 调用函数时,需要传入几个数据就写几个,用逗号隔开
<script>
function getSum(num1, num2) {
document.write(num1 + num2)
}
getSum(10,20)
//类似执行J如下代码
// num1 = 10
// num2 = 20
</script>
形参和实参
- 形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
- 实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
- 形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)实参可以理解为是给这个变量赋值
- 开发中尽量保持形参和实参个数一致
- alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参
函数返回值
用return返回数据
- 当函数需要返回数据出去时,用return关键字
- 语法:return数据
<script>
function getSum(x, y) {
return X + y
}
let num = getSum(10,30 )
document.write(num)
</script>
- 细节:
➢在函数体中使用return关键字能将内部的执行结果交给函数外部使用
➢函数内部只能出现1次return, 并且return 后面代码不会再被执行,所以return后面的数据不要换行写
➢return会立即结束当前函数
➢函数可以没有return, 这种情况函数默认返回值为undefined
作用域
作用域概述
- 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
- 作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
变量的作用域
- 在JavaScript中,根据作用域的不同,变量可以分为
变量的作用域
- 变量有一个坑, 特殊情况:
如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
但是有一种情况,函数内部的形参可以看做是局部变量。
变量访问原则-作用域链
- 只要是代码,就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
- 作用域链:采取就近原则的方式来查找变量最终的值
匿名函数
匿名函数
- 将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式
- 语法:
<script>
let fn = function ( ){
//函数体
}
</script>
- 调用:fn() // 函数名()
- 其中函数的形参和实参使用跟具名函数一致。
<body>
<button>点击我< /button>
<script>
let btn = document.querySelector('button')
btn.onclick = function() {
alert('我是匿名函数')
}
</script>
</body>
立即执行函数
- 场景介绍: 避免全局变量之间的污染
- 语法:
<script>
//方式1
(function () { console.log(11) })();
//方式2
(function () { console.log(11) }());
//不需要调用, 立即执行
</script>
- 注意:多个立即执行函数要用 ; 隔开,要不然会报错