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

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）

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

巴特西

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

最新文章

热门文章