JS学习（9）----JS Functions

JS Functions

1.关于函数的定义

（1）如果只是声明了函数，在没有调用之前，函数不会执行。

函数的声明，如下：

function myFunction(p1, p2) {
    ......
}

注：参数不需要写明类型，这一点与C++不同。

（2）函数表达式

函数也可以作为表达式
如下：

var x = function(a,b) {return a+b}; // a+b后面的分号可要可不要，但是括号外边的分号是必需的。

上面表达式中的函数成为无名函数，anonymous function
存储在变量中的函数通常不需要名字，它们常常通过变量名来调用。
上面的表达式之后可以将x当成函数名使用：

var result = x(2,3);
document.getElementById("test").innerHTML = result;

（3）函数提前（hoisting）

在js中，不仅仅是变量提前，函数也提前。即在js中只有函数级变量，没有块级变量。
这一点与c++有所不同。即在函数中，变量和函数的声明总会被提到最前面，所以在写代码的时候尽管在函数声明之前调用函数也能够正常地执行。

// 在函数声明之前调用函数
document.getElementById("test").innerHTML = myFunction(3,2); 
function myFunction(a,b) {
    return a*b;
}

实际上浏览器是这样处理的：

function myFunction(a,b) {
    return a*b;
}
document.getElementById("test").innerHTML = myFunction(3,2); 

（4）self-invoking函数（自调用）

(function() {
    alert("Hello!");
})();

2.函数的参数

（1）不限制传入的参数的数目

function findMax() {
    var l = arguments.length;
    var max = -Infinity;
    for (var i = 0; i < l; ++i) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
document.getElementById("test").innerHTML = findMax(1,4,3,12,5,28); // 传入的参数的数目不定

注：js中的函数只知道参数的值是多少，不知道参数的实际内存位置，所以如果参数的值发生了改变，函数并不知道。

3.Function Invocation

（1）直接函数名调用

function myFunction(a,b) {
    return a*b;
}
myFunction(1,2);

（3）作为对象的方法进行调用

var person = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();  // fullName是对象的方法

（3）通过函数构造

function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John", "Smith");
x.firstName;

4.Function Call

var person = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var myObject = {
    firstName:"Mary",
    lastName: "Doe",
}
person.fullName.call(myObject);

在myObject对象上使用person的fullName方法。
另外有一个apply方法与call非常相近

Math.max.apply(null,[1,2,3]);

5.函数闭包（closure）

<button type="button" onclick="myFunction()">Count!</button>

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}

每次点击button，counter的值会加1
下面是相关的解释：

注：函数闭包的内容比较难，需要认真理解。