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

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

2024-09-10 07:45:16   222人阅读

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
  5. //比定义的参数少
  6. 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. }
  7. foo(1, 2, 3, 4, 5);
  8. // 结果:
  9. // a = 1
  10. // b = 2
  11. // Array [ 3, 4, 5 ]
  13. foo(1);
  14. // 结果:
  15. // a = 1
  16. // b = undefined
  17. // Array []
  18. //如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）

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

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


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

3、变量作用域

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

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

JS中的变量申明会“提升”到函数顶部，赋值不提升，这句话是什么意思呢？看下面的代码：
  1. ‘use strict‘;
  3. function foo() {
  4.     var x = ‘Hello, ‘ + y;
  5.     alert(x);
  6.     var y = ‘Bob‘;
  7. }
  9. 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 = {};
  4. // 其他变量:
  5. MYAPP.name = ‘myapp‘;
  6. MYAPP.version = 1.0;
  8. // 其他函数:
  9. MYAPP.foo = function () {
  10.     return ‘foo‘;
  11. };
  13. //把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能

3.2 局部作用域

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

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

3.3 常量

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


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


联系
我们