从零开始前端学习[49]:js函数的初步认识

最新推荐文章于 2024-06-26 11:59:25 发布

^_^ 小小码nong

最新推荐文章于 2024-06-26 11:59:25 发布

阅读量475

点赞数

分类专栏： # 1.从零开始挑战前端文章标签： js函数函数的初步认识命名函数匿名函数自执行

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78509459

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

js函数的初步认识

函数的定义
函数作用
函数的分类与调用

提示
博主：章飞_906285288
博客地址：http://blog.csdn.net/qq_29924041

函数的定义

函数，其实更多的是针对面向过程语言的一种叫法，如C语言中，都是以函数来称谓的，对于面向对象语言来说，更对的是称为方法，在js中，则统一称谓函数，函数是什么？通俗来说，函数就好像我们的css类名一样，我们书写类里面的样式的时候，就是函数的定义，给标签添加上类名之后，则可以多次去使用，这个过程叫做函数调用
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
一般来说函数主要分为三个步骤，函数声明，函数定义，以及函数的调用这三个过长，但是js中，很多时候声明和定义都是一起的，只有在c或者C++中可以声明单独拿出来。

函数的定义过程如下所示:

    function myfirstFunction(){
        console.log("my first function");
    }
    myfirstFunction();

所以函数的定义包括了：function,函数名，形式参数，以及大括号等

    function 函数名(参数){
        函数体;
    }

注意：函数的调用的位置可以是在定义之前，也可以是在定义之后，这个过程就类似java中方法的调用，可以是之前或者之后都行。
当然函数的调用可以是直接调用，也可以是通过变量的事件来进行触发调用
如：

    function changeBackground(){
        var box =  document.getElementById("p");
        box.style.backgroundColor = "blue";
    }

    document.getElementById("p").onclick = changeBackground;

以上函数在调用的时候，需要注意的是，如果在调用的时候加上(),的话，表示的是函数的自执行，也就是自动执行的意思，这个时候会默认执行一次，之后函数就会被回收掉，单次情况下，这个时候就不会再去执行了

函数作用

一句话搞定：

函数的作用：在出现大量程序相同的时候，可以封装为一个function，这样只需要调用一次就能执行很多语句，模块化编程，让复杂的逻辑变得简单。

函数的分类与调用

首先来讲函数的分类，在js中函数分为命名函数和匿名函数，故名思议，命名函数就是有名字的函数，而匿名函数则可以理解为没有名字的函数。如下：

命名函数的定义:
function myfirstfunction(){
    console.log("myfirst");
}
上面对应的函数名字为myfirstfunction

而匿名函数则主要分为两种，一种也是先定义，但是这个时候赋值给变量，第二种就是在触发事件，或者调用的时候直接定义

第一种赋值给变量
var function_1 = function(){
    console.log("function_1");
}
第二种调用的时候直接定义:

box.onclick = function(){
    alert("box onclick");
}

对于js来说，主要函数分类也就是这两种，当然这是从有无函数名上来进行划分的，还可以从其它类型上进行划分。

其次主要是函数的调用，其实从一开始我们就用了函数的调用，即是匿名函数的调用，在函数调用上，主要可以分为函数的自执行以及被动执行。

函数的执行:
自执行:即不需要有任何触发条件的情况下，函数自己就去执行了，
var function_1 = function(){
    alert("function_1");
}
function_1();

被动执行：
box.onclick  = function_1;

从上面可以看到，他们的主要区别就在于有无括号上面。如果函数执行的时候有括号，那么，这个时候就是自执行，如果没有括号，这个时候就是被动执行。
当然还有一个奇葩点:

box.onclick = function_1();
这个时候函数function_1();会自执行，执行完毕之后box再去点击的时候是不会有任何效果的
函数栈在调用完毕之后会进行回收，所以点击是无效的。

下面上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0px red;border: 1px solid transparent}
        p{width: 100px;height: 100px;margin: 10px;background: deeppink}
  </style>
</head>
<body>
  <div class="main">
    <p id="box_p_1">box_p_1</p>
    <p id="box_p_2">box_p_2</p>
  </div>
  <script>
    var box_p_1 = document.getElementById("box_p_1");
    var box_p_2 = document.getElementById("box_p_2");
    box_p_1.onclick = function () {   //匿名函数1
        alert("沃日 你竟然弹出来了");
    }
    //匿名函数2,将函数赋值给function_2,然后调用的时候直接去调用function_2
    var function_2 = function(){
        console.log("function2");
    }
    function_2();
    function myFirstFunction() {  //命名函数
        alert("my FirstFunction and box_p_1 clicked");
    }
    myFirstFunction(); //函数名字加括号表示函数的调用过程,这个是函数的自执行，也就是自动执行。每个函数被执行完毕之后，会被回收掉
    box_p_2.onclick = myFirstFunction_2; //函数在被动调用的时候，不能够加(),如果加()的话，这个时候就会自动执行，点击后没有任何效果
    function myFirstFunction_2() {
        alert("my FirstFunction box_p_2 clicked");
    }

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

至于效果就不演示了，有兴趣的自己run一下，感受一下。

^_^ 小小码nong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[49]:js函数的初步认识

js函数的初步认识函数的定义函数作用函数的分类与调用提示博主：章飞_906285288 博客地址：http://blog.csdn.net/qq_29924041函数的定义函数，其实更多的是针对面向过程语言的一种叫法，如C语言中，都是以函数来称谓的，对于面向对象语言来说，更对的是称为方法，在js中，则统一称谓函数，函数是什么？通俗来说，函数就好像我们的css类名一样，我们书
复制链接

扫一扫

专栏目录