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

1、定义函数

function abs(x) { 
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
如果没有return，函数执行完毕也会返回结果，不过结果是undefined。

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

所以上面的函数定义等价于：
var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

2、调用函数

JS的函数允许任意个，也不影响调用，接以上的abs函数：
//比定义的参数多
abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

//比定义的参数少
abs(); // 返回NaN --> 此时abs(x)函数的参数x将收到undefined，计算结果为NaN

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

实际上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判断，然后重新调整参数并赋值
}

为了获得多余的参数，我们也就是利用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);
}
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参数会接收一个空数组（注意不是undefined）

拓展思维：
//用rest参数编写一个sum()函数，接收任意个参数并返回它们的和

'use strict';

function sum(...rest) {
  var result = 0;
  for(var value of rest){
    result += value;
  };
  return result;
}

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

//定义一个计算圆面积的函数area_of_circle()，它有两个参数：r: 表示圆的半径；pi: 表示π的值，如果不传，则默认3.14

'use strict';
function area_of_circle(r, pi) {
  var temp = 3.14;
  if(arguments.length > 1){
      temp = pi;
  }
  return temp*r*r;
}

// 测试:
if (area_of_circle(2) === 12.56 && area_of_circle(2, 3.1416) === 12.5664) {
    alert('测试通过');
} else {
    alert('测试失败');
}


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

3、变量作用域

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

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

JS中的变量申明会“提升”到函数顶部，赋值不提升，这句话是什么意思呢？看下面的代码：
'use strict';

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

foo();

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

实际上JavaScript引擎看到的代码相当于：
function foo() {
    var y; // 提升变量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

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

3.1 全局作用域

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

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

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

减少冲突的一个方法就是把自己的所有的全局变量和函数，全部绑定到一个全局变量中：
// 唯一的全局变量MYAPP:
var MYAPP = {};

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

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

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

3.2 局部作用域

在之前我的理解，比如在函数内定义的变量，因为作用域在函数内，所以就算是局部作用域了，而下面的代码：
'use strict';

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

即是说，实际上这种默认方式的作用域并不完全是局部的，至少在for循环语句块中的作用域，在for循环之外还可以引用（妈呀JavaScript不愧是10天写出来的函数，确实很厉害但是有些地方真的很讨厌），为了解决这个问题，ES6引入了新的关键字 let，这个可以替代var申明一个块级作用域的变量：
'use strict';

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

3.3 常量

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


posted @ 2017-03-23 22:58  Dulk  阅读(2480)  评论(0)    收藏  举报