07.JavaScript函数

168 阅读6分钟

1.什么是函数

1.函数:function,是被设计为执行特定任务的代码块

2.函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势 是有利于精简代码方便复用。

3.在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。

2.函数的使用

1.代码

functinon 函数名() {
    函数值
}

2.案列

 function name (){
     document.write('张三')
 }

3.函数的命名规范

1.和变量命名基本一致

2.尽量小驼峰式命名法

3.前缀应该为动词

4.命名建议:常用动词约定

function getName(){}
function addSquares(){}
动词含义
can判断是否可执行某个动作
has判断是否含义某个值
is判断是否为某个值
get获取某个值
set设置某个值
load加载某些数据

4.函数的调用语法

1.语法规范

1.注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数

//函数调用 ,这些函数体内的代码逻辑会被执行
函数名()

2.案列

1.我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

//函数一次声明可以多使用, 每一次函数调用函数体里面的代码会重新执行一次
name()
name()

5.函数体

函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才 会被执行。函数的功能代码都要写在函数体当中。

//名字
function name() {
    console.log('张三'); //函数体
}
name()

3.函数传参

1.函数的声明

1.若函数完成功能需要调用者传入数据,那么就需要用有参数的函数

2.这样可以极大提高函数的灵活性

3.代码


 function sum() {
     let name1='张三'
     let name2='李四'
       document.write(num1+num2)
 }
        sum()

4.参数列表

1.传入数据列表

2.声明这个函数需要传入几个数据

3.多个数据用逗号隔开

5.声明语法

function 函数名(参数列表){
    函数体
}

6.单个函数

 function getSquare(num){
     document.write(num * num)
 }

6.多个参数

 function getSquare(num1+num2){
     document.write(num1 + num2)
 }

2.函数的调用

1.声明语法

function 函数名(参数列表){
    函数体
}
函数名()

2.单个调用

 function getSquare(num){
     document.write(num * num)
 }
getSquare()

3.多个调用

 function getSquare(num1+num2){
     document.write(num1 + num2)
 }
num1()
num2()

3.形参和实参

1.形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

2.实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

3.形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)实参可以理解为是给这个变量赋值

4.开发中尽量保持形参和实参个数一致

5.我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

4.函数的返回值

1.什么是返回值

1.当调用某个函数,这个函数会返回一个结果出来

2.这就是有返回值的函数

 function getSquare(num1+num2){
     document.write(num1 + num2)//厨子
 }
num1()  //点餐人
num2()	//点餐人

let name = prompt('请输入你的名字')
let name1 = parseInt('张三')
alert('我是流氓弹窗,我不需要返回值')

2.return 返回数据

1.当函数需要返回数据出去时,用return关键字
2.语法
return 数据
return 20 
3.使用
 function getSum(x,y) {
        return x+y;
      }
  let num1 = getSum(10,30); // num1 =40

      console.log(num1);
4.细节:

1.在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

2.函数内部只能出现 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写

3.return会立即结束当前函数

4.函数可以没有 return,这种情况函数默认返回值为 undefined

5.函数的作用域

1.通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这 个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

1.全局作用域: 全局有效

1.作用于所有代码执行的 环境(整个 script 标签 内部)或者一个独立的 js 文件

2.函数外部let 的变量

3.全局变量在任何区域都 可以访问和修改

2.局部作用域: 局部有效

1.作用于函数内的代码环 境,就是局部作用域。 因为跟函数有关系,所 以也称为函数作用域。

2.函数内部let的变量

2.局部变量只能在当前函 数内部访问和修改

3.块级作用域: {}类有效

1.块作用域由 { } 包括,if语 句和for语句里面的{ }等

2.{} 内部的let变量

3.let定义的变量,只能在 块作用域里访问,不能跨 块访问,也不能跨函数访 问

4.变量的作用域

变量有一个坑, 特殊情况:

如果函数内部或者块级作用域内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐 但是有一种情况,函数内部的形参可以看做是局部变量。

5.变量访问原则-作用域链

作用域链:采取就近原则的方式来查找变量最终的值

1.只要是代码,就至少有一个作用域

2.写在函数内部的局部作用域

3.如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

4.根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访 问,就称作作用域链

6.匿名函数

1.具名函数

1.声明 : function fn() {}

2.调用: fn()

2.匿名函数: function() {}

1.将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式

2.语法

let fn = function () {
    函数体
}

3.调用

<button>点我</button>
<script>
    let btn = document.querySelector('buttom')
    .btn.addEventlistener(function)(){
		alert('弹出')
    })
</script>

3.立即执行函数

1.场景介绍: 避免全局变量之间的污染

2.语法

//方式一
( function() { console.log( 11)})();
//方式二
( function( { console.log(11)}());
//不需要调用,立即执行
(function () {(   )}) ()

3.注意: 多个立即执行函数要用 ; 隔开,要不然会报错