04-JavaScript函数

JavaScript中函数一般都分为两类,一类是内置函数,另一类是自定义函数。

内置函数又叫系统函数,系统函数包含字符串对象、数组对象、数学对象、日期对象、正则表达式对象、逻辑对象、数字对象等。

声明函数一般包含三部分:函数名、形式参数、函数体

一、创建函数的方法及调用函数

调用函数的语法

函数名 (实参1, 实参2, .....);

使用对象方法创建

1 <script type="text/javascript">
2             // 使用new关键字,构造函数
3             var fun = new Function("a", "console.log(a)");
4             fun(1);
5             var fun2 = new Function("a", "b", "console.log(a * b)");
6             fun2(1, 2);
7     </script>

注意:

Function();   ()里面的内容只能是JS语句,如果要传递参数,形参要加上""

语法:

new Function("JS语句");

使用函数声明创建一个函数

function fun(){
        console.log("Hello World!");
    }
    fun();

语句:

function(){
  JS语句;
}

使用函数表达式创建函数

var fun = function(){
        console.log("Hello World!");
    }
    fun();

 

语法:

var 函数名 = function(){
  JS语句;
}

下面使用这三种方法,分别实现两个数字之和这个功能的函数

1.创建函数对象的方法

<script type="text/javascript">
    var num1 = parseFloat(prompt("请输入一个数字:"));
    var num2 = parseFloat(prompt("请输入另一个数字:"));
    var sum = new Function("alert(num1 + num2)");
    sum();
</script>

2.声明函数的方法

<script type="text/javascript">
    function sum(){
        var num1 = parseFloat(prompt("请输入一个数字:"));
        var num2 = parseFloat(prompt("请输入另一个数字:"));
        return num1 + num2;
    }
    resu = sum();
    alert(resu);
</script>

3.函数表达式

<script type="text/javascript">
    var sum = function(){
        var num1 = parseFloat(prompt("请输入一个数字:"));
        var num2 = parseFloat(prompt("请输入另一个数字:"));
        return num1 + num2;
    };
    alert(sum());
</script>

二、return

在一个函数中使用return语句之后,后面的代码都不会被执行。

我们执行下面这段代码,再看一下执行效果

1 <script type="text/javascript">
2     function fun(){
3         console.log("Hello World");
4         return;
5         console.log("Hello JS");
6     }
7     fun();
8 </script>


执行效果如下

javascript(%%) javascript中函数分为那两种_javascript

 

 return关键字后面可以跟上任何类型的数据,return也可以返回一个函数(函数是一种特殊的对象,具有对象的一切特征,所以返回值也可以是任意的数据类型)

1 <script type="text/javascript">
 2     
 3     function fun(){
 4         function fun2(){
 5             console.log("Hello World!");
 6         }
 7         return fun2;    // 返回fun2这个函数
 8     }
 9     console.log(fun());
10 </script>


注意区分一下下面这两个概念:

函数名;  // 返回函数对象
函数名();  // 调用函数

 retunrn后面不跟任何值或者没有return函数返回值是undefined

1 <script type="text/javascript">
2     function fun(){
3         return;
4     }
5     console.log(fun());
6 </script>


代码执行效果如下:

javascript(%%) javascript中函数分为那两种_Code_02

 

三、立即执行的函数

<script type="text/javascript">
2         (function(){
3             console.log("Hello World");
4         })();    
5    </script>

执行效果如下图所示:

javascript(%%) javascript中函数分为那两种_调用函数_03

 

 

下面我们来看一下带有参数的如何使用

1     <script type="text/javascript">
2         (function(a, b){
3             console.log(a + b);
4         })(1, 2);
5     </script>

四、对象属性值为函数

<script type="text/javascript">
        var person = {
            "name": "孙猴子",
            "age": "无穷",
            "gender": "未知",
            "addr": function(){
                console.log("花果山");
            }
        };
        person.addr();
    </script>

如何查看一个对象里面有哪些属性:

使用for....in.....语句

1     <script type="text/javascript">
 2         var person = {
 3             "name": "孙猴子",
 4             "age": 1000,
 5             "address": "花果山"
 6         }
 7         for(var n in person){
 8             console.log(n);
 9         }
10     </script>

javascript(%%) javascript中函数分为那两种_Code_04

 

 

1         for(var n in person){
2             console.log(n);
3         }