JavaScript（三）函数

函数的定义和调用

定义函数

在JavaScript中，定义函数的方式如下：

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

 

上述abs()函数的定义如下：

  • function指出这是一个函数定义；
  • abs是函数的名称；
  • (x)括号内列出函数的参数，多个参数以,分隔；
  • { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。

如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

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

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

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

在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。

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

调用函数

调用函数时，按顺序传入参数即可：

abs(10); // 返回10
abs(-9); // 返回9

 

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

 

传入的参数比定义的少也没有问题：

abs(); // 返回NaN

 

此时abs(x)函数的参数x将收到undefined，计算结果为NaN。

要避免收到undefined，可以对参数进行检查：

复制代码
function abs(x) {
    if (typeof x !== 'number') {
        throw 'Not a number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
复制代码

 

arguments

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

复制代码
'use strict'
function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);



/*
x = 10
arg 0 = 10
arg 1 = 20
arg 2 = 30
*/
复制代码

利用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
复制代码

 

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：

复制代码
// 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判断，然后重新调整参数并赋值。

 

rest参数

由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：

复制代码
function foo(a, b) {
    var i, rest = [];
    if (arguments.length > 2) {
        for (i = 2; i<arguments.length; i++) {
            rest.push(arguments[i]);
        }
    }
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}
复制代码

 

为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？

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参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

因为rest参数是ES6新标准，所以你需要测试一下浏览器是否支持。请用rest参数编写一个sum()函数，接收任意个参数并返回它们的和：

复制代码
'use strict';
function sum(...rest) {
   var sum = 0;
   for(i=0;i<rest.length;i++){
       sum =sum+rest[i]
  }
  return sum;
}


//测试
var i, args = [];
for (i=1; i<=100; i++) {
    args.push(i);
}
if (sum() !== 0) {
    console.log('测试失败: sum() = ' + sum());
} else if (sum(1) !== 1) {
    console.log('测试失败: sum(1) = ' + sum(1));
} else if (sum(2, 3) !== 5) {
    console.log('测试失败: sum(2, 3) = ' + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
    console.log('测试失败: sum(1, 2, 3, ..., 100) = ' + sum.apply(null, args));
} else {
    console.log('测试通过!');
}
复制代码




小心你的return语句


前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的一个大坑：


复制代码


function foo() {
    return { name: 'foo' };
}

foo(); // { name: 'foo' }
如果把return语句拆成两行：

function foo() {
    return
        { name: 'foo' };
}

foo(); // undefined


复制代码


 


要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：




function foo() {
    return; // 自动添加了分号，相当于return undefined;
        { name: 'foo' }; // 这行语句已经没法执行到了
}




 


所以正确的多行写法是：




function foo() {
    return { // 这里不会自动加分号，因为{表示语句尚未结束
        name: 'foo'
    };
}




 


练习


定义一个计算圆面积的函数area_of_circle()，它有两个参数：


    

  • r: 表示圆的半径；
    • 

  • pi: 表示π的值，如果不传，则默认3.14
    • 





复制代码


'use strict';

function area_of_circle(r, pi) {
   return pi?pi*r*r:3.14*r*r;
}
// 测试:
if (area_of_circle(2) === 12.56 && area_of_circle(2, 3.1416) === 12.5664) {
    console.log('测试通过');
} else {
    console.log('测试失败');
}


复制代码


 




小明是一个JavaScript新手，他写了一个max()函数，返回两个数中较大的那个：


复制代码


'use strict';

function max(a, b) {
   if (a > b) {
        return a;
    } else {
        return b;
    }
}
console.log(max(15, 20));


复制代码


 


 


 


变量作用域与解构赋值


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


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




'use strict';

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

x = x + 2; // ReferenceError! 无法在函数体外引用变量x




 


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


复制代码


'use strict';

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

function bar() {
    var x = 'A';
    x = x + 'B';
}


复制代码


 


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


复制代码


'use strict';

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}


复制代码


JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。


 


变量提升


JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：


复制代码


'use strict';

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

foo();


复制代码


虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。


对于上述foo()函数，JavaScript引擎看到的代码相当于：




function foo() {
    var y; // 提升变量y的申明，此时y为undefined
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}




由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：


复制代码


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


复制代码


 


全局作用域


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




'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'




因此，直接访问全局变量course和访问window.course是完全一样的。


你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：




'use strict';

function foo() {
    alert('foo');
}

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




 


进一步大胆地猜测，我们每次直接调用的alert()函数其实也是window的一个变量：


这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。


名字空间


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


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


复制代码


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

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

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


复制代码


把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。


许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。


局部作用域


由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：




'use strict';

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
}




 


为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：


复制代码


'use strict';

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    // SyntaxError:
    i += 1;
}


复制代码


常量


由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：




var PI = 3.14;




ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：




'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14




解构赋值


从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。


什么是解构赋值？我们先看看传统的做法，如何把一个数组的元素分别赋值给几个变量：




var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];




 


现在，在ES6中，可以使用解构赋值，直接对多个变量同时赋值：






'use strict';

// 如果浏览器支持解构赋值就不会报错:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];




 




注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。


如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：




let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'




 


解构赋值还可以忽略某些元素：




let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'




如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：




复制代码


'use strict';

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;


// name, age, passport分别被赋值为对应属性:
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);


 


//运行结果


//name = 小明, age = 20, passport = G-12345678



复制代码





对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的：


复制代码


var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
var {name, address: {city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined


复制代码


 


使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：


复制代码


var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};

// 把passport属性赋值给变量id:
let {name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性:
passport; // Uncaught ReferenceError: passport is not defined


复制代码


 


解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：


复制代码


var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678'
};

// 如果person对象没有single属性，默认赋值为true:
var {name, single=true} = person;
name; // '小明'
single; // true


复制代码


 


有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：




// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =




这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：




({x, y} = { name: '小明', x: 100, y: 200});




 


使用场景


什么情况下 会用到解构赋值呢？


数据多的时候，多个数据合并的时候，或者修改某个对象里面的个别属性的时候


 


解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：




var x=1, y=2;
[x, y] = [y, x]




快速获取当前页面的域名和路径：




var {hostname:domain, pathname:path} = location;




如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。例如，下面的函数可以快速创建一个Date对象：




function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
}




它的方便之处在于传入的对象只需要year、month和day这三个属性：




buildDate({ year: 2017, month: 1, day: 1 });
// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)




也可以传入hour、minute和second属性：




buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
// Sun Jan 01 2017 20:15:00 GMT+0800 (CST)




使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。


 


方法


在一个对象中绑定函数，称为这个对象的方法。


在JavaScript中，对象的定义是这样的：




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




但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：


复制代码


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


xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了


复制代码


绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？


在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。


让我们拆开写：


复制代码


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

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

xiaoming.age(); // 25, 正常结果
getAge(); // NaN


复制代码


 


单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。


JavaScript的函数内部如果调用了this，那么这个this到底指向谁？


答案是，视情况而定！


如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。


如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。


坑爹啊！


更坑爹的是，如果这么写：




var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN




也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！


由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：


复制代码


'use strict';

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应该指向的正确位置。


有些时候，喜欢重构的你把方法重构了一下：


复制代码


'use strict';

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：


复制代码


'use strict';

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


复制代码


 


用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。


apply


虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！


要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。


用apply修复getAge()调用：


复制代码


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()实现如下：




Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5




 


对普通函数调用，我们通常把this绑定为null。


装饰器


利用apply()，我们还可以动态改变函数的行为。


JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。


现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：




复制代码


'use strict';

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};


// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
console.log('count = ' + count); // 3


复制代码






 


看了很多遍，我的理解是，用apply的意义在于使函数正确接收参数


试了一下四种return：


①return oldParseInt(arguments[0]);


②return oldParseInt.apply(null,arguments);


③return oldParseInt(arguments);


④return oldParseInt;


调用parseInt('10')时，①和②都能正确返回10这个数值，而③返回的是NaN，④返回的是函数parseInt。④很好理解，肯定是不对的。


arguments相当于接收了一个传入的参数组成的数组，而parseInt函数是不接受数组的，所以③不能返回正确的值，要能正确传入参数，要么是①，要么是②利用apply函数把数组参数传递进去，注意这里传进去的不是数组了所以parseInt可以正确接收到参数


 


 


闭包


函数作为返回值


高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。


我们来实现一个对Array的求和。通常情况下，求和的函数是这样定义的：




function sum(arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum([1, 2, 3, 4, 5]); // 15




但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！




function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}




当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：




var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()




调用函数f时，才真正计算求和的结果：




f(); // 15




 


在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。


请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：




var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false




f1()和f2()的调用结果互不影响。


 


闭包


注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。


另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：


复制代码


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];


复制代码


 


在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。


你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：




f1(); // 16
f2(); // 16
f3(); // 16




 


全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量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


复制代码


 


注意这里用了一个“创建一个匿名函数并立刻执行”的语法：




(function (x) {
    return x * x;
})(3); // 9




 


理论上讲，创建一个匿名函数并立刻执行可以这么写：




function (x) { return x * x } (3);




 


但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：




(function (x) { return x * x }) (3);




 


通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：




(function (x) {
    return x * x;
})(3);




 


说了这么多，难道闭包就是为了返回一个函数然后延迟执行吗？


当然不是！闭包有非常强大的功能。举个栗子：


在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。


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


复制代码


'use strict';

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。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。


闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：


复制代码


'use strict';

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}


// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);




console.log(pow2(5)); // 25
console.log(pow3(7)); // 343



复制代码


 











箭头函数


ES6标准新增了一种新的函数：Arrow Function（箭头函数）。


为什么叫Arrow Function？因为它的定义用的就是一个箭头：




x => x * x




上面的箭头函数相当于：




function (x) {
    return x * x;
}




在继续学习箭头函数之前，请测试你的浏览器是否支持ES6的Arrow Function：






'use strict';
var fn = x => x * x;
console.log(fn(3))









箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和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<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}


复制代码


 


如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：




// SyntaxError:
x => { foo: x }




 


因为和函数体的{ ... }有语法冲突，所以要改为：




// ok:
x => ({ foo: x })




this


箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。


回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：


复制代码


var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};


复制代码


 


现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：


复制代码


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


复制代码


 


如果使用箭头函数，以前的那种hack写法：




var that = this;




 


就不再需要了。


由于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


复制代码


 


练习


请使用箭头函数简化排序时传入的函数：




复制代码


'use strict'
var arr = [10, 20, 1, 2];
arr.sort((x, y) => {
  return x-y;//如果x>y，返回1，即x-y为ture；如果x=y，x-y=0；
  /*对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1。*/

});

console.log(arr); // [1, 2, 10, 20]


复制代码


 


 


generator


generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。


ES6定义generator标准的哥们借鉴了Python的generator的概念和语法，如果你对Python的generator很熟悉，那么ES6的generator就是小菜一碟了。如果你对Python还不熟，赶快恶补Python教程！。


我们先复习函数的概念。一个函数是一段完整的代码，调用一个函数就是传入参数，然后返回结果：




function foo(x) {
    return x + x;
}

var r = foo(1); // 调用foo函数




 


函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），控制权无法交回被调用的代码。


generator跟函数很像，定义如下：




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




 


generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。


大多数同学立刻就晕了，generator就是能够返回多次的“函数”？返回多次有啥用？


还是举个栗子吧。


我们以一个著名的斐波那契数列为例，它由0，1开头：


0 1 1 2 3 5 8 13 21 34 ...



要编写一个产生斐波那契数列的函数，可以这么写：


复制代码


function fib(max) {
    var
        t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while (arr.length < max) {
        [a, b] = [b, a + b];
        arr.push(b);
    }
    return arr;
}

// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]


复制代码


 


函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：


复制代码


function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}


复制代码


 


直接调用试试：




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: false}
f.next(); // {value: undefined, done: true}




 


next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。


当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。


第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：




复制代码


'use strict'

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}


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


 


复制代码




generator和普通函数相比，有什么用？


因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：


复制代码


var fib = {
    a: 0,
    b: 1,
    n: 0,
    max: 5,
    next: function () {
        var
            r = this.a,
            t = this.a + this.b;
        this.a = this.b;
        this.b = t;
        if (this.n < this.max) {
            this.n ++;
            return r;
        } else {
            return undefined;
        }
    }
};



复制代码


用对象的属性来保存状态，相当繁琐。


generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。


没有generator之前的黑暗时代，用AJAX时需要这么写代码：


复制代码


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);
        });
    });
});


复制代码


 


回调越多，代码越难看。


有了generator的美好时代，用AJAX时可以这么写：


复制代码


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);
}


复制代码


 


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


练习


要生成一个自增的ID，可以编写一个next_id()函数：




var current_id = 0;

function next_id() {
    current_id ++;
    return current_id;
}




 


由于函数无法保存状态，故需要一个全局变量current_id来保存数字。


不用闭包，试用generator改写：




function* next_id() {
    current_id++
    while (true) {
        yield current_id++
    }
}




我的理解是yield语句只在调用next()方法时才会执行，所以如果while(true)条件下只有这一条语句的话应该是不会进入死循环的。


 


 













            

            
posted @ 
 
陈晓猛 
阅读(81) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· SQL Server 2025 AI相关能力初探
    

· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    



    

    阅读排行：
    

 ·          阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
        

 ·          Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
        

 ·          开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
        

 ·          被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
        

 ·          AI技术革命，工作效率10个最佳AI工具
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae
目录导航