前端小课堂 js：what is the function？

function.png

js 函数：

概念：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

说白了就是响应用户操作所执行的代码，通过js事件触发，然后调用执行函数里代码的操作。
比如常见的用户点击事件，用户点击了按钮，如果这个按钮绑定了点击事件的话就会触发点击事件，触发了点击事件干什么呢，这时候就需要给这个点击事件绑定一个函数了，这样用户点击以后就可以触发函数，然后执行函数里面的操作。如：

<script>
function myFunction()
{
alert("Hello World!");
}
</script>
<button onclick="myFunction()">点击这里</button>

---

语法

用的时候直接 function funname(){} 需要记住的是 function 是 js 关键字，注意只能是小写，在调用函数时会执行函数{}里的代码块。如：

<button class="btn" onclick="fun1()">点击</button>  
<script>
    function fun1(){
        alert(num);
        alert(type);
    }
</script>

---

参数和变量

在调用函数的时候可以传递参数，在调用的函数里面多个参数用“，”分开。然后在定义函数的时候需要在小括号里将参数使用变量代替，这里需要注意的是变量的位置要和调用那里的参数一一对应,变量名可以随便写。

<button class="btn" onclick="fun1(index,type)">点击</button>  
    <script>
        function fun1(i,t){
            alert(i);
            alert(t);
        }
  </script> 

通过参数的传递可以使函数变得更灵活，比如有三个地方需要调用这个函数，每个调用的地方参数有不一样，这样也是没问题的。

<button class="btn" onclick="fun1("1")">点击</button>  
<button class="btn" onclick="fun1("2",type)">点击</button>  
<button class="btn" onclick="fun1("3")">点击</button>  
    <script>
        function fun1(i,t){
            type = type?"type":"";
            alert(num);
            alert(type);
        }
  </script>

---

扩展：

return
一个函数生来就是为了输出处理过的返回值的时候，需要将返回值抛出，这时候就需要return了，看例子：

<script>
        function fun1(i,t){
            type = type?"type":"";
            if(i ==1){
              return "ok"; 
            }else{
              return "no";
            }
        }
  </script>

这里随便写了个函数，根据用户调用函数时传的参数进行判断，然后输出不同的值。

局部变量：
局部变量说白了就是函数内部定义的变量，这个变量的作用域只在这个函数内部（需要注意的是必须是通过var定义的变量），在函数外部访问变量的话是underfind。例子：

 <script>
        function fun1(i,t){

            var type1 = type?"type":"";
            if(i ==1){
              return "ok"; 
            }else{
              return "no";
            }

        }
        alert(type1);

  </script>

这里一定会 alert（underfind）

© 著作权归作者所有

文／wbg（简书作者）

原文链接：http://www.jianshu.com/p/d0228f054bd8

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。