一个月掌握 JavaScript入门知识[4]

学习目标

1.掌握函数的基本使用，让代码具备复用能力

2.理解封装的意义，能够具备封装函数的能力

---

目录

学习目标

一、函数

1.为什么需要函数

2.函数使用

 函数的声明语法

函数的调用语法

函数体

3.函数传参 

声明语法

参数列表

调用语法

形参实参

参数默认值

4.函数返回值

语法

细节：

5.作用域

​编辑

变量的访问原则

6.匿名函数

具名函数

匿名函数

立即执行函数

---

一、函数

1.为什么需要函数

函数：

function，是被设计为执行特定任务的代码块

说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于

精简代码方便复用 。

比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数 ，只不过已经封装好了，我们直接使用的。

2.函数使用

目标：掌握函数语法，把代码封装起来

 函数的声明语法

function 函数名() {
    函数体
}

//例
function sayhi() {
   document.write('hai~~')
}

函数名命名规范:

  和变量命名基本一致

  尽量小驼峰式命名法

  前缀应该为动词

  命名建议：常用动词约定

函数的调用语法

 

function sayhi() {
   document.write('hai~~')
}

sayhi()
sayhi()        //函数的调用,可以多次调用

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

函数体

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

3.函数传参 

函数传参可以极大提高函数的灵活性

声明语法

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

//单个参数

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


//多个参数
function getSum(num1,num2) {
       document.write(num1+num2)
}

参数列表

  传入数据列表

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

  多个数据用逗号隔开

调用语法

 

//单个参数

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

getSquare(8)    //单个参数的调用

//多个参数
function getSum(num1,num2) {
       document.write(num1+num2)
}

getSum(15,20)      //多个参数的调用

 调用函数时，需要传入几个数据就写几个，用逗号隔开

形参实参

 

 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

  实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

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

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

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

参数默认值

形参： 可以看做变量，但是如果一个变量不给值，默认是什么？

  undefined

但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？

  NaN

我们可以改进下，用户不输入实参，可以给 形参默认值 ，可以默认为 0, 这样程序更严谨，可以如下操作：

function getSum(x = 0, y = 0) {
      document.write(x + y)
}

getSum()          //结果是0
getSum(1,2)                 //结果是3

说明：这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined

4.函数返回值

提问：什么是函数？

函数是被设计为 执行特定任务 的代码块

  缺点：把计算后的结果处理方式写死了，内部处理了

  解决：把处理结果返回给调用者

  有返回值函数的概念：

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

  这就是有 返回值 的函数

  提问：执行完特定任务之后，然后呢？

把任务的结果给我们

function getSum(num1,num2){   
   document.write(num1 + num2)            //厨子
}

getSum(10,25)    //点餐人

点餐之后需要让厨子将菜拿给你,否则厨子就把你的菜偷吃掉了,那么怎么叫厨子把菜端过来呢,这就要用到return返回值了

当函数需要返回数据出去时，用return关键字

语法

return 数据

return 20

function getSum(num1,num2){
     retun num1 + num2
}

let num = getSum(12,25)     //返回值需要声明变量接收
document.write(num)

return返回值返回之后,需要声明变量接受(点菜之后,厨子将菜送过来,需要自己拿走)

细节：

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

  return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

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

厨子

函数细节补充

两个相同的函数后面的会覆盖前面的函数

  在Javascript中 实参的个数和形参的个数可以不一致

  如果形参过多 会自动填上undefined (了解即可)

  如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

  函数一旦碰到return就不会在往下执行了 函数的结束用return

5.作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的 可用性的代码范围 就是这个名

字的 作用域 。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

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

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

   全局变量在任何区域都 可以访问和修改                 局部变量只能在当前函 数内部访问和修改

 特殊情况：

如果函数内部，变量没有声明，直接赋值，也当 全局变量 看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

let a

function fn() {
    a = 20
}

fn()
console.log(a)

//推荐做法：在全局作用域 先声明这个变量 在函数里面 再使用全局变量 给变量赋值

变量的访问原则

只要是代码，就至少有一个作用域

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

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

  访问原则： 在能够访问到的情况下 先局部， 局部没有在找全局

变量返回原则: 采取 就近原则 的方式来查找变量最终的值

6.匿名函数

具名函数

声明:function fn() {}

调用:fn{}

匿名函数

声明:function () {}

调用:fn{}

匿名函数

没有名字的函数, 无法直接使用。

使用方式：

  函数表达式

  立即执行函数

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

//语法

let fn = function() {
       //函数体
}


fn()    //函数名  调用

立即执行函数

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

语法：

//方式1

(function () { console.log(11) } )()


//方式2

(function () { console.log(11) }())

//不需要调用,立即执行

                               注意： 多个立即执行函数要用 ; 隔开，要不然会报错

---