js函数

函数前面使用关键词 function声明，代码块包含在{ }内。

函数声明后不会立即执行，在调用才会执行。

在函数内声明的变量为局部变量，只能在函数内部使用，可在不同的函数中使用相同的变量名。

在函数外声明的变量为全局变量，在整个js代码中都可以使用。

function functionname(参数)
{
    // 执行代码
}

 

1.不带参数的函数

<p>点击按钮</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
    alert("Hello,welcome!");
}
</script>

 

2.带参数的函数，多个参数用逗号分隔，且传入参数的个数要与函数定义的参数个数一致，执行时会按照顺序一一对应

可通过arguments.length 属性返回函数调用过程接收到的参数个数。

<p >函数测试</p>
<button onclick="myFunction('Jack','teacher')">点击这里</button><br>
<p id="test1"></p>
<p id="test2"></p>
<script>
    function myFunction(name,job){
        var x='I am  '+name +' and I am a '+job;
        document.getElementById('test1').innerHTML=arguments.length;
        document.getElementById('test2').innerHTML=x;
    }
</script>

 

3.有返回值的函数，通过return返回值，没有return的函数返回值为null

函数遇到return即停止执行（不是js代码停止执行），再从调用函数的位置继续执行

<p>函数测试</p>
<p id="test"></p>
<script>
    function myFunction(a,b){
        return a*b;
    }
document.getElementById('test').innerHTML=myFunction(5,8);

 

4.函数表达式，即一个匿名函数

可将函数表达式赋值给一个变量，变量被赋值后也可以当做一个函数使用

<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

 

5.创建一个对象，并在对象中定义一个对象的方法

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "John", lastName : "Doe",id : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
    

 

6.自调用函数

函数表达式可以自调用，将整个函数表达式用括号括起来，并在表达式后面添加括号，可实现自动调用。

<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用自己的";
})();
</script>