Javascript学习笔记-函数

JS中定义函数的方式与其他语言一样没什么差别,但是要知道JS允许传入任意个数参数,如果传入的参数比定义的参数多也没有问题,函数内部并不会调用这些参数:

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

传入的参数比定义的少也没有问题:
abs(); // 返回NaN

JS关键字argument在函数内部指向当前函数传入的所有参数,arguments类似Array但它不是Array:

function foo(x) {
    alert(x); // 10
    for (var i=0; i

利用arguments可以获得调用者传入的所有参数,也就是说,即使函数不定义任何参数也可以拿到参数的值,而实际上arguments最常用于判断传入参数的个数:

function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

// foo(a[, b], c)
// 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是a和b,c为undefined
        c = b; // 把b赋给c
        b = null; // b变为默认值
    }
    // ...
}

要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值。
为了获得额外的参数,ES6标准引入了rest参数:

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数写在最后,前面用...标识,多余的参数以数组形式交给变量rest;如果传入的参数连正常定义的参数都没填满,rest参数会接收一个空数组(注意不是undefined)。

变量作用域

JS的函数可以嵌套,内部函数可以访问外部函数定义的变量,如果内部函数和外部函数的变量名重名怎么办?

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        alert('x in bar() = ' + x); // 'A'
    }
    alert('x in foo() = ' + x); // 1
    bar();
}

这说明JS的函数在查找变量时从自身函数定义开始,由“内”向“外”查找,如果变量重名则内部变量将“屏蔽”外部变量。
JS的函数在定义时会先扫描整个函数语句,把所有申明的变量“提升”到函数顶部:

function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
}

foo();

虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在后面声明了。但虽然JS引擎自动提升了变量y的声明,却不会提升变量y的赋值,所以在赋值前y为undefined。基于此我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则,最常见的做法是用一个var申明函数内部用到的所有变量:

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

不在任何函数内定义的变量具有全局作用域,实际上JS默认有一个全局对象window
,全局作用域的变量实际上被作为的一个属性绑定到window。不同的JS文件如果使用了相同的全局变量或者定义了相同名字的函数,都会造成命名冲突,并且很难被发现。
减少冲突的一个方法是把所有变量和函数全部绑定到一个全局变量中例如:

// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

许多著名的JS库都是这么做的如Query,YUI,underscore等等。此外,ES6标准引入了新的关键字const和let,用let替代var可以申明一个块级作用域的变量,而const
用来声明常量,const与let都具有块级作用域。

方法

JS的函数内部如果调用了this,那么这个this到底指向谁?答案是视情况而定!如果以对象的方法形式调用,该函数的this指向被调用的对象;如果单独调用函数,此时该函数的this指向全局对象,也就是window。因此ECMA决定,在strict模式下让函数的this指向undefined:

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来,并没有解决this应该指向的正确位置,这时把方法重构了一下:

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了!原因是this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了(在非strict模式下,它重新指向全局对window)!那么如何修改呢?我们用一个that变量替换this,就可以放心地在方法内部定义其他函数,而不是把所有语句都堆到一个方法中:

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

其实我们还是可以控制this指向哪个对象的,这里要用到函数本身的apply方法,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数:

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

另一个与apply()类似的方法是call(),唯一区别是:

  • apply()把参数打包成Array再传入;
  • call()把参数按顺序传入。

比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下:

// 通常把this绑定为null
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

利用apply(),我们还可以动态改变函数的行为。因为JS的所有对象都是动态的,即使内置的函数,我们也可以重新指向新的函数:

var count = 0;
var oldParseInt = parseInt; // 保存原函数
window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};
// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3

高阶函数

map()/reduce()

map()接收一个函数并将函数作用在Array的每一个元素并把结果生成一个新的Array。而reduce()是把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
比方说对一个Array求和,就可以用reduce()实现:

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25
filter()

filter()用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,filter()也接收一个函数,但不同的是filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。例如,在一个Array中,删掉偶数只保留奇数,可以这么写:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
sort()

Array的sort()方法默认把所有元素先转换为String再排序,而字符串根据ASCII码进行排序。同时sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序,要按数字大小排序,我们可以这么写:

// 正序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

// 倒序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

sort()方法会直接对Array进行修改,它返回的结果仍是当前Array。

闭包

高阶函数除了可以接受函数作为参数外,还可以把函数作为返回值。注意到返回的函数在其内部引用了局部变量,当一个函数返回了一个函数后,其内部的局部变量还被新函数引用,所以闭包实现起来可不容易。另一个需要注意的问题是,返回的函数并没有立刻执行,而是直到调用时才执行。我们来看一个例子:

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中,每次循环都创建了一个新的函数,然后把创建的函数都添加到Array中返回。返回的函数引用了变量i,但它并非立刻执行,函数都返回时所引用的变量i已经变成了4,因此最终结果为16。所以返回闭包时牢记:返回函数不要引用任何循环变量或者后续会发生变化的变量,也可以创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变:

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9

JS中,创建一个匿名函数并立刻执行可以这么写:
(function (x) { return x * x }) (3);

在没有class机制,只有函数的语言里,借助闭包可以封装一个私有变量。我们用JS创建一个计数器:

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在返回的对象中实现了一个闭包,该闭包携带了局部变量x,并且从外部根本无法访问到变量x。换句话说,闭包就是携带状态的函数,并且它的状态可以完全对外隐藏起
来。闭包还可以把多参数的函数变成单参数的函数:

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}
// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(5); // 25
pow3(7); // 343

箭头函数

箭头函数相当于匿名函数,并且简化了函数定义。它有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了;还有一种可以包含多条语句,这时候就不能省略{ ... }和return:

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

// 两个参数:
(x, y) => x * x + y * y
// 无参数:
() => 3.14
// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i

如果要返回一个对象,因为和函数体的{ ... }有语法冲突,要这么写:
x => ({ foo: x })
箭头函数内部的this是词法作用域,总是指向外层调用者,由上下文确定:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

由于this在箭头函数中已经按照词法作用域绑定了,所以用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

Generator(生成器)

generator是ES6标准引入的新的数据类型,一个generator看上去像一个函数,但可以返回多次。generator定义如下:

function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

generator和函数不同的是,generator由function定义(注意多出的号),并且,除了return语句,还可以用yield返回多次。要编写一个产生斐波那契数列的函数,可以这么写:

function fib(max) {
    var
        t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while (arr.length < max) {
        t = a + b;
        a = b;
        b = t;
        arr.push(t);
    }
    return arr;
}
// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

函数只能返回一次,但是如果换成generator,就可以一次返回一个数,不断返回多次:

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 1;
    while (n < max) {
        yield a;
        t = a + b;
        a = b;
        b = t;
        n ++;
    }
    return a;
}
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

调用generator和调用函数不一样,fib(5)仅仅是创建了一个generator对象,还没有去执行它。调用generator对象有两个方法:
一是不断地调用generator对象的next()方法;

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: true}

next()方法会执行generator的代码,每次遇到yield就返回一个对象{value: x, done: true/false}并“暂停”,返回的value就是yield的返回值,done表示这个generator是否已经执行结束了。
二是直接用for ... of循环迭代generator对象:

for (var x of fib(5)) {
    console.log(x); // 依次输出0, 1, 1, 2, 3
}

generator在执行过程中多次返回,所以它可以记住执行状态。generator还有另一个巨大的好处,就是把异步回调变成“同步”:

ajax('http://url-1', data1, function (err, result) {
    if (err) {
        return handle(err);
    }
    ajax('http://url-2', data2, function (err, result) {
        if (err) {
            return handle(err);
        }
        ajax('http://url-3', data3, function (err, result) {
            if (err) {
                return handle(err);
            }
            return success(result);
        });
    });
});

try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}

看上去是同步的代码,实际上是异步执行。

你可能感兴趣的:(Javascript学习笔记-函数)