1.函数就是一个方法，或者一个功能体，函数就是把实现某个功能的代码放到一起进行封装，以后想要操作实现这个功能，只需要把函数直接调用即可，减少页面重复代码，提高代码重复使用率

2.洗衣机就是一个函数，生产洗衣机就是封装一个函数，（把实现某些功能的代码封装进来），生产的适合，不知道用户洗衣服的适合放什么水，衣服，洗衣液，我们需要提供一个入口（提供入口的适合在函数叫形参，执行的时候具体东西函数叫做实参，）洗完衣服拿出来，，洗衣机回提供一个出口（在函数中叫返回值 return 把函数处理的结果拿出来给外面用

  1.   function sum(num1, num2) {
  2.             return num1 + num2
  3.         }
  4.         var c = sum(1, 2)
  5.         console.log(c); //3

image.png

return

函数执行的时候，函数内部创建的变量我们是无法获取和操作的，如果想要获取内部的信息，我们需要基于return返回值机制，把信息返回才可以
image.png

函数底层运行机制

无标题.png

案例重看

  1.  <button>按钮1</button>
  2.     <button>按钮2</button>
  3.     <button>按钮3</button>
  4.     <button>按钮4</button>
  5.     <button>按钮5</button>
  6.     <script>
  7.         var btns = document.getElementsByTagName('button');
  8.         for (var i = 0; i < btn.length; i++) {
  9.             btns[i].onclick = function() {
  10.                 console.log(i); //5
  11.             }
  12.         }
  13.     </script>

1.png
从图可以看到，当我们获取所有的button时，我们拿到了1个对象的集合（被一个大的堆内存包裹），然后每一个对象各自自己的堆内存，里面包含各种属性，还有等待的执行的函数，而这个函数由于创建会自动重新开辟一个私有堆内存（此时里面存储的可是字符串的i）
等待for循环结束完毕后，就创建了5个包含字符串的函数堆内存，此时我们点击（记住，这个时候for循环已经结束了，i为5）
所以无论我们点击哪个按钮，打印的值都为5

那我们如果想打印每个button的索引就可以在每个点击函数前在每一个button对象中设置一个自定义的index属性，里面存的就是当前的i，因为还没执行函数，所以i就i是对应button的索引，等到循环结束后，我们点击每个button的index属性，得到的就是当前索引的值

函数作用域

image.png