java script 基础总结（函数）

9.函数function

9-1为什么要用函数

1.概念：

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

2.说明：

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

9-2函数使用

1.声明：

function 函数名() {
	函数体
}
函数名(); //调用函数

2.命名规范：

• 和变量命名基本一致

• 尽量小驼峰式命名法

• 前缀应该为动词

• 命名建议：常用动词约定

  

3.缺点：

• 封装的函数不够灵活 无法复用

9-3函数传参

1.优点：

• 可以极大的提高了函数的灵活性

2.声明和调用：

​ 声明语法：

• function 函数名（参数列表）{

​ 函数体

​ }

3.类型：

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

9-4函数返回值

1.概念

• 提问：是什么是函数？

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

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

  把任务的结果给我们

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

• 优点：对执行结果的扩展性更高,可以让其他的程序使用这个结果

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

• 有返回值函数的概念：

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

  • 这就是有返回值的函数

2.使用：

​ 

3.注意：

• return后面不接数据或者函数内不写return，函数的返回值是undefined
• return能立即结束当前函数, 所以 return 后面的数据不要换行写

9-5作用域

1.概念：

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

2.全局作用域

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

3.局部作用域

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

4.块级作用域

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

5.变量的作用域

• 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
• 函数内部的形参可以看做是局部变量，所以形参相当于函数内部定义的局部变量，只有在函数内部可以使用

9-6匿名函数

1.具名函数

• 语法：function fn() {}

• 调用：fn()

2.匿名函数

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

• 语法：let btn=function() {}

• 调用：()()

<script>
      // 在script标签下直接声明的变量，就是全局变量
      //   let num = 10 // 全局变量
      // function test() {
      //   // 在函数内部声明的变量只有在函数内部才能使用
      //   let age = 20
      //   console.log('里面的打印', age)
      // }
      //   test()
      //   console.log(age)
      //   if (true) {
      //     // var age = 20
      //     // 块 就是指  ｛｝
      //     // 块级作用域：一个变量从定义开始，到它所在的｛｝结构的 ｝结束
      //     let age = 20
      //     console.log(age)
      //   }
      //   console.log(age) // age is not defined
      //   console.log(num)

      //   function test() {
      //     // 在函数内部声明的变量只有在函数内部才能使用

      //     // 这是真正意义的全局变量，它会挂载到全局window
      //     age = 20
      //   }
      //   test()
      //   console.log(window)

      console.log(length)
</script>

3.立即执行函数

<script>
	  let btn = document.querySelector('button') // 取按钮元素
      // 为按钮绑定一个事件
      // let fn =
      // btn.addEventListener('click',单击之后如何处理)
      btn.addEventListener('click', function() {
        console.log('fn')
      })
      // 通过function声明的函数是全局函数，全局不要释放，造成全局污染
      // function fn() {
      //   console.log('fn')
      // }

      // 将函数做为一个变量进行定义，它不会全局的，也就没有全局污染
      // 匿名不能单独的存在，它一般
      // 1.做为变量的值--函数表达式
      // 2.做为参数传递--回调函数
      // let fn = function() {
      //   console.log('fn')
      // }
      // fn()

      // 我要写一个函数，根据  数据渲染出动态结构，但是，我没有数据
      // 1.如果有数据，我知道如何渲染，但是我没有数据
      // 2.我知道谁有数据，但是他不知道数据应该如何渲染

      //data:就是一个用户名称--具体的渲染处理函数：可以根据数据进行渲染
      // let render = function(data) {
      //   let htmlStr = `<h1>${data}</h1>`
      //   document.write(htmlStr)
      // }
      // 我不能直接调用这个函数，因为我没有数据
      // render(data)

      // fn就是当前数据的处理方式
      // function handler(fn) {
      //   let data = 'admin'
      //   // 调用函数时传递了data实参
      //   fn(data)
      // }

      // handler(function(data) {
      //   let htmlStr = `<h1>${data}</h1>`
      //   document.write(htmlStr)
      // })
</script>