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一下,感受一下。