本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、JS的函数

1.JS函数介绍

JS 的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法。

2.JS函数特性

在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值给变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法。

3.JS匿名函数和有名函数

有名函数：有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行
匿名函数：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数。
具体使用方法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>按钮</button>

<script>
  var obtn = document.getElementsByTagName("button")[0]
  //1.匿名函数：没有名字
  obtn.onclick = function(){
      console.log(1);
  }

  // 2.有名函数:需要调用才可以打印
  function func(){
      console.log(2);
  }
  func()
  

</script>



</body>
</html>

4.函数参数：形参、实参、不定参

5.函数返回值

第4点和第5点的具体使用方法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>



<script>
  // 1.函数参数：形参 实参 不定参
  // 1)x，y：形参是定义函数时传入的参数
  function func(x,y){
      console.log(x);
      console.log(y);//实参少于形参，不会被复制，undefined
      // console.log(x + y);
      // 3）不定长参 调用时传的实参比形参多不会报错，形参比实参多也不会报错
      console.log(arguments);  //arguments返回数组
  }
  // 2）调用时传入的参数是实参
  func(5)

  // 2.函数返回值
  function func1(x,y){
      // console.log(x+y);
      // 用变量定义了x+y之后，x才有具体的值，不然是undefined
      var p = x+y;
      return p //return返回函数里面的值 同时结束函数，后面的语句不会运行
  }
  var x = func1(5,6)
  console.log(x);

</script>
</body>
</html>

6.函数自调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  // 1.自调用函数:函数后面要多加一对小括号，前面可以用~或者+ -表示
  // 1）方法一
  ~function(){
      console.log(1);
  }();
  // 2）方法二
  (function(){
      console.log(2);
  }());
  // 3)方法三
  (function(){
      console.log(3);

  })();
</script>

</body>
</html>

7.JS函数作用域

函数作用域分为局部作用域、全局作用域，其具体使用方法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var a = 200;// 2.全局变量
  function func(){//1.局部作用域
      // var a = 100; //函数里面 用var定义的 是局部变量 函数外面无法调用
      a = 100;//没用定义 直接赋值的是全局变量 会影响最外面的全局变量
  }
  func()
  console.log(a);

  var x = 100;//全局 x = 100
  function obtn(){
      var x = 200; //var x =300
      function obs(){
          x = 300;

      }
      obs()
      // var x = 200;
      console.log(x);//300
  }
  obtn()
  console.log(x); //100

  //1. JS里面只有局部作用域和全局作用域
  // 局部变量：在程序执行完毕时候销毁
  // 全局变量：在关闭浏览器的时候才会销毁 比较占资源

  // 2.块级作用域：es6中有  if  for {}
  {
      var u=100 //var 不具备块级作用域特性 可以在作用域外面进行调用
  }
  console.log(u);
  {
      let o =100 //let定义的变量只在块级作用域里面才能使用 不能在作用域外面进行调用
  }
  // console.log(o);

  if(1){
      var j=2
  }
  console.log(j);

  // 3.递归函数的调用 1+2+3+4+5
  function sum(x){
      if(x ==1){
          return 1
      }
      // 在函数里面调用自己
      return x+sum(x-1)

  }

  console.log(sum(5));


</script>



</body>
</html>

二、JS异常

try ~ catch ~ finally

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
// 1.JS处理异常的方法：try catch
//   function func(){
//       try{
//           // var a =100;
//           console.log(a);//执行程序
//       }catch(e){//e捕获报错信息,代码正确就不会执行
//           alert("错误信息"+e.message)
//
//       }finally{//不管程序对错都会执行
//           alert("执行完毕")
//       }
//   }
//   func()

  // 2.自定义异常
  function sum(){
      var a = 100
      try{
          if(a == 100) throw "a的值太小了"//throw 声明报错信息
          if(a > 100) throw "a的值太大了"

      }catch(e){
          alert(e)
          // console.log(e);
      }
  }
  sum()


</script>




</body>
</html>

14 JavaScript进阶（2）