[第三讲] JavaScript 中函数的浅析与思考

什么是函数? 可以把函数理解成一个可以执行的代码块. 函数在 JavaScript 中本身就是引用类型. 利用函数, 可以对一些代码语句进行封装也可以对一些数据进行隐藏(闭包)

1. 函数的创建

1.1 构造方式:

函数创建的方式有:

• 使用Function 构造方法来进行创建

  var funcName = new Function([argument1,[... argumentN]] body);
var add = new Function("x","y", "return (x+y)"); // 执行结果 add(2,4) = 6

• 通过字面量来创建函数

function add(x,y){
    return x+y;
}

等价于:

var add = function(x,y){
    return x+y;
}

1.2 函数的参数:

JavaScript 中函数的概念没有限制参数的传入个数, 实际传入的参数会保存在 函数 的属性 arguments中, 然后以 index 的方式访问每个参数. 如果方法调用时传入的参数少于实际声明的参数,则会以 null 填充:

function printStudentInfo(name, age, sex){
    var argAge = age || 18;
    var sex = sex || "boy";

    console.log("name: " + name + ", age = " + age + ", sex = " + sex); 
    if(arguments.length == 4){
        console.log("hide argument : " + arguments[3]);
    }
}

方法printStudentInfo各种调用情况:

printStudentInfo方法各种调用情况

2 函数作用域:

我们先看一个示例:

var str = 'global';
function funScrope(){
    console.log("str = " + str);
    var str = 'local'

    console.log("str = " + str);
}
function funScropeForOther(){
    console.log("str = " + str);
    var strOther = 'local'

    console.log("strOther = " + strOther);
}

执行结果:

出现这种执行结果的原因:

• 函数是在局部作用域上运行的, 在局部作用域内运行的函数体可以访问外部的变量和函数, 所以 funScropeForOther 的 str 能读取到外部变量 "global" 值
• JavaScript的作用域是词法作用域, 所以funScrope 在进行词法分析的时候, 就已经定义了 str 变量, 只不过在 执行 *var str = "local" * 的时候才进行变量赋值.

var index = 0;
function forEach(){
    for(var i = 0; i < 3; i++){
        console.log(i);
        setTimeout(function(){
            console.log((index++) + " current item " + i  + "\n"); 
        }, 0);
    }
}

执行结果:

函数中使用到的 i 都为 for 执行完后的最后一个值

3 函数的 Context 上下文 (this)

JavaScript 的函数并非一定要依附于对象, 其可以作为 一个对象的方法也可以作为另一个对象的方法. 可以通过 call 或 apply 方法来修改函数的上下文, 函数中的 this 指针则为 call 或 apply 方法的第一个参数

var Tom = {name : "Tom"};
var Jerry = {name : "Jerry"};

function printName(){
    console.log(this.name);
}

通过 call 和 apply 调用 printName 的执行结果为:

其中 call 和 apply 的差别为, call 方法在 this对象后面需要跟若干个方法调用所需要的参数, 而 apply 第二个参数为一个 array 数组, 需要的参数则全放到数组里.

4 函数的使用

函数使用的范围:

• 将函数赋值给一个变量, 变量可以作为函数的引用
• 将函数赋值给一个对象的属性, 函数就具有当前对象的上下文 this
• 作为参数传入别的函数中, 可以通过 () 直接调用, 或者通过 call 和 apply进行调用
• 作为其他函数执行的结果返回. (闭包的概念)

作为其他函数执行的结果的示例:

function outerFunction(){
    this.hideName = "hide name";

    return function(){
        return this.hideName;
    };
}

执行结果: