[JavaScript] (Day-08) - 函数定义和调用

Progress is the activity of today and the assurance of tomorrow. 进步是今天的活动，明天的保证。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

定义函数

语法

function funcName(x) {
    ... // 函数体
}

解释：

function 指出这是一个函数定义；
JavaScript 对大小写敏感。关键词 function 必须是小写的;
funcName 是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

==注意：== 函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回；如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

实例

// 求绝对值
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

// 求和
function sum(x, y) {
    return x + y;
}

由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。

因此，第二种定义函数的方式如下：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

function (x) { ... }是一个匿名函数，它没有函数名

通过变量abs就可以调用该函数

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束

调用函数

abs(10); // 返回10
abs(-9); // 返回9
abs(); // 返回NaN
sum(10, 20); // 返回 30

变量作用域

局部作用域

在JavaScript中，用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

function foo(x) {
    var y = 1; // 此变量 `y` 只能在 foo {...} 大括号内部使用 
    return x + y;
}

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

function foo() {
    var x = 1;
    var y = 2;
    return x + y;
}

function bar() {
    var x = 1;
    var z = 2;
    return x + z;
}

两个函数内部的变量 x 互不影响

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：


function foo() {
    var a = 0;
    
    function bar() {
        var b = a + 3; // bar 可以访问foo的变量 a
    }
    var c = b - 1; // error: foo 不可以访问bar的变量 y
}

全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

// 全局变量
var welcome = "Hello JavaScript";
alert(welcome); // "Hello JavaScript"
alert(window.welcome); // "Hello JavaScript"

全局函数
function foo() {
    alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

命名空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

JavaScript 类似于Swift 也支持命名空间

// 唯一的全局变量MAZY:
var MAZY = {};

// 其他变量:
MAZY.name = 'myName';
MAZY.age = 21;

// 其他函数:
MAZY.foo = function () {
    return 'foo';
};