首页 > 代码库 > 02函数-01-函数的定义和调用

02函数-01-函数的定义和调用

1、定义函数

  1. function abs(x) {
  2. if (x >= 0) {
  3. return x;
  4. } else {
  5. return -x;
  6. }
  7. }
如果没有return,函数执行完毕也会返回结果,不过结果是undefined。

由于在JS的世界中,函数也是一个对象,所以上述定义的函数实际上也是一个对象,而函数名则可视为指向该函数的变量

所以上面的函数定义等价于:
  1. var abs = function (x) {
  2. if (x >= 0) {
  3. return x;
  4. } else {
  5. return -x;
  6. }
  7. };

2、调用函数

JS的函数允许任意个,也不影响调用,接以上的abs函数:
  1. //比定义的参数多
  2. abs(10, ‘blablabla‘); // 返回10
  3. abs(-9, ‘haha‘, ‘hehe‘, null); // 返回9
  4. //比定义的参数少
  5. abs(); // 返回NaN --> 此时abs(x)函数的参数x将收到undefined,计算结果为NaN

JS中有个关键字 arguments,只在函数内部起作用,永远指向当前函数的调用者传入的所有参数,类似Array但不是Array:

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法:
  1. // foo(a[, b], c)
  2. // 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:
  3. function foo(a, b, c) {
  4. if (arguments.length === 2) {
  5. // 实际拿到的参数是a和b,c为undefined
  6. c = b; // 把b赋给c
  7. b = null; // b变为默认值
  8. }
  9. // ...
  10. //要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值
  11. }

为了获得多余的参数,我们也就是利用arguments,但是稍微有点不方便:
  1. function foo(a, b) {
  2. var i, rest = [];
  3. if (arguments.length > 2) {
  4. for (i = 2; i<arguments.length; i++) {
  5. rest.push(arguments[i]);
  6. }
  7. }
  8. console.log(‘a = ‘ + a);
  9. console.log(‘b = ‘ + b);
  10. console.log(rest);
  11. }
ES6标准引入了rest参数,上面的函数可以改写为:
  1. function foo(a, b, ...rest) {
  2. console.log(‘a = ‘ + a);
  3. console.log(‘b = ‘ + b);
  4. console.log(rest);
  5. }
  6. foo(1, 2, 3, 4, 5);
  7. // 结果:
  8. // a = 1
  9. // b = 2
  10. // Array [ 3, 4, 5 ]
  11. foo(1);
  12. // 结果:
  13. // a = 1
  14. // b = undefined
  15. // Array []
  16. //如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)

拓展思维:
  1. //用rest参数编写一个sum()函数,接收任意个参数并返回它们的和
  2. ‘use strict‘;
  3. function sum(...rest) {
  4. var result = 0;
  5. for(var value of rest){
  6. result += value;
  7. };
  8. return result;
  9. }
  10. // 测试:
  11. var i, args = [];
  12. for (i=1; i<=100; i++) {
  13. args.push(i);
  14. }
  15. if (sum() !== 0) {
  16. alert(‘测试失败: sum() = ‘ + sum());
  17. } else if (sum(1) !== 1) {
  18. alert(‘测试失败: sum(1) = ‘ + sum(1));
  19. } else if (sum(2, 3) !== 5) {
  20. alert(‘测试失败: sum(2, 3) = ‘ + sum(2, 3));
  21. } else if (sum.apply(null, args) !== 5050) {
  22. alert(‘测试失败: sum(1, 2, 3, ..., 100) = ‘ + sum.apply(null, args));
  23. } else {
  24. alert(‘测试通过!‘);
  25. }

  1. //定义一个计算圆面积的函数area_of_circle(),它有两个参数:r: 表示圆的半径;pi: 表示π的值,如果不传,则默认3.14
  2. ‘use strict‘;
  3. function area_of_circle(r, pi) {
  4. var temp = 3.14;
  5. if(arguments.length > 1){
  6. temp = pi;
  7. }
  8. return temp*r*r;
  9. }
  10. // 测试:
  11. if (area_of_circle(2) === 12.56 && area_of_circle(2, 3.1416) === 12.5664) {
  12. alert(‘测试通过‘);
  13. } else {
  14. alert(‘测试失败‘);
  15. }


  16. //网友答约:pi=pi?pi:3.14; return pi*r*r;

3、变量作用域

在JavaScript中,我们说如果一个变量不用var申明,那么默认作为全局变量。而我们使用了var申明的变量,实际上也是有作用域的。

  • 如果函数内申明,则函数体外不可引用
  • 函数可以嵌套,内部函数的变量可以访问外部函数的变量,反之不可
  • 内部与外部变量重名的话,查找变量从内往外,则屏蔽外部函数变量

JS中的变量申明会“提升”到函数顶部,赋值不提升,这句话是什么意思呢?看下面的代码:
  1. ‘use strict‘;
  2. function foo() {
  3. var x = ‘Hello, ‘ + y;
  4. alert(x);
  5. var y = ‘Bob‘;
  6. }
  7. foo();

y虽然申明在x之后,但是 var x = ‘Hello,‘ + y 并不会报错(这就是变量申明的提升),但是alert出来的是 Hello, undefined,即y的值还是undefined(这就是赋值不提升)。

实际上JavaScript引擎看到的代码相当于:
  1. function foo() {
  2. var y; // 提升变量y的申明
  3. var x = ‘Hello, ‘ + y;
  4. alert(x);
  5. y = ‘Bob‘;
  6. }

这个特性其实并没有什么好处,反而容易让人犯错,所以按像Java语言中一样的变量申明习惯就好了,需要用的变量先申明,再使用。

3.1 全局作用域

JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性,因此,假如你定义了一个全局作用域的变量 test,那么是直接访问test和访问window.test是一样的

由于函数定义也有两种方式,其中以变量方式定义的函数实际上也是一个全局变量,被绑定在window对象,你可以通过 window.test() 类似的方法调用,事实上,alert()方法也是window的一个变量!

全局变量会绑定在window上,那么当你引入不同的文件,文件之间如果用到了相同的全局变量或同名函数,就会造成命名冲突,并且很难被发现。

减少冲突的一个方法就是把自己的所有的全局变量和函数,全部绑定到一个全局变量中:
  1. // 唯一的全局变量MYAPP:
  2. var MYAPP = {};
  3. // 其他变量:
  4. MYAPP.name = ‘myapp‘;
  5. MYAPP.version = 1.0;
  6. // 其他函数:
  7. MYAPP.foo = function () {
  8. return ‘foo‘;
  9. };
  10. //把自己的代码全部放入唯一的名字空间MYAPP中,会大大减少全局变量冲突的可能

3.2 局部作用域

在之前我的理解,比如在函数内定义的变量,因为作用域在函数内,所以就算是局部作用域了,而下面的代码:
  1. ‘use strict‘;
  2. function foo() {
  3. for (var i=0; i<100; i++) {
  4. //
  5. }
  6. i += 100; // 仍然可以引用变量i
  7. }

即是说,实际上这种默认方式的作用域并不完全是局部的,至少在for循环语句块中的作用域,在for循环之外还可以引用(妈呀JavaScript不愧是10天写出来的函数,确实很厉害但是有些地方真的很讨厌),为了解决这个问题,ES6引入了新的关键字 let,这个可以替代var申明一个块级作用域的变量
  1. ‘use strict‘;
  2. function foo() {
  3. var sum = 0;
  4. for (let i=0; i<100; i++) {
  5. sum += i;
  6. }
  7. i += 1; // SyntaxError
  8. }

3.3 常量

在ES6标准之前,我们表示常量通常都使用全部大写的方式来“告诉“使用者,不要修改它的值,但实际上这个值是可以被修改了,是存在风险的。在ES6标准中引入了新的关键字const,可以申明不可改变的常量,且同let一样具有块级作用域


02函数-01-函数的定义和调用