函数的定义和调用
arguments
arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数,可以获得调用者传入的所有参数。arguments类似Array但它不是一个Array:
function foo(x) {
console.log(x); // 10
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30);
那在什么情况下才会真正用到arguments呢,下面举个栗子:
函数的重载:
有时候函数根据传入的参数个数的不同,来执行不同的处理:
// 如果用户传入一个参数,求平方
function sum(a){
console.log(a*a);
}
//如果用户传入两个参数,就求和
function sum(a,b){
console.log(a+b);
}
sum(4); //?
sum(4,5); //?
上述例子中本意是想让同名函数sum()根据参数不同输出不同结果,但是sum是函数名字,本质也是个变量,
第二个会覆盖第一个,所以上述的正确输出答案是:NaN,9.所以这样显然不可以。
如果用arguments,就简单多了。
如下:
function calc(){
//如果用户传入一个参数,求平方
if(arguments.length===1){
console.log(arguments[0]*arguments[0]);
}else if(arguments.length===2){
//如果用户传入两个参数,就求和
console.log(arguments[0]+arguments[1]);
}
}
calc(4); //16
calc(4, 5); //9
多个参数的求和:
function add(){
//arguments:[]
//遍历arguments中每个元素,并累加
for(var i=0,sum=0;i<arguments.length;sum+=arguments[i++]);
return sum;//返回和
}
console.log(add(1, 2, 3)); //6
console.log(add(1, 2, 3, 4, 5, 6)); //21
这就是JS利用arguments重载的效果,简单理解就是一个函数重复利用.
arguments.length是有实参决定,即函数调用时候里面的参数个数决定!
arguments对象中还定义了callee属性,用来引用当前正在执行的函数,例如在递归中使用:
function factorial(num) {
// 参数的callee是函数自身
console.log(arguments.callee === foo); // true
if(num <=1 ) {
return 1;
} else {
return num*arguments.callee(num-1);
}
}
console.log(factorial(5));//120
需要注意的是如果一个函数的参数有3个,传递的实参只有2个,那么arguments[2]和第三个参数是不共享的.
function foo(x, y, z) {
// 声明的函数参数数量arguments (x, y, z)
console.log(foo.length); // 3
// 真正传进来的参数个数(only x, y)
console.log(arguments.length); // 2
// 参数共享
console.log(x === arguments[0]); // true
console.log(x); // 10
arguments[0] = 20;
console.log(x); // 20
x = 30;
console.log(arguments[0]); // 30
// 不过,没有传进来的参数z,和参数的第3个索引值是不共享的
z = 40;
console.log(arguments[2]); // undefined
arguments[2] = 50;
console.log(z); // 40
}
foo(10, 20);
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)。
变量的作用域
我们知道在JavaScript中, 在函数内var一个变量,则该变量的作用域为整个函数体,在函数体外不可引用该变量;
不同的函数体声明同一个变量,相互不会影响,各自的作用域只在各自所在函数体内。也就是说不同函数内部的同名变量互相独立,互不影响;
上面描述了平行关系的函数内部变量及作用域的特点,JavaScript可以存在嵌套函数,此时的内部函数可以访问外部函数定义的变量,外部则不可访问外部;
'use strict';
function foo() {
var x = 1;
function bar() {
var y = x + 1;
}
var z = y + 1; // foo() 时这里会因为无法访问y而报错
}
如果内部函数和外部函数的变量名重名,则内部函数的变量将“屏蔽”外部函数的变量。由此说明JavaScript的函数在查找变量时从自身函数定义开始。
'use strict';
function foo() {
var i = 'a';
function fuc() {
var i = 'b';
console.log('fuc', i);
}
console.log('foo', i);
fuc();
}
foo();
// 'foo', a
// 'fuc', b
变量提升
JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:
'use strict';
function foo() {
var i = 'Hello, ' + j;
alert(i);
var j = 'Bob';
}
foo(); // Hello, undefined
JavaScript引擎自动提升了变量j的声明,但不会提升变量j的赋值;
因此,我们在函数内部定义变量时,请严格遵守“在函数内部优先申明所有变量”这一规则。
全局作用域
不在任何函数内定义的变量就具有全局作用域;
JavaScript实际上有一个默认(唯一一个)全局作用域 window;
全局作用域的变量实际上被绑定到window的一个属性:
'use strict';
var animal = 'White cat';
alert(animal); // 'White cat'
alert(window.animal); // 'White cat'
全局作用域有哪些需要注意的点
1、名字空间
全局变量会绑定到window上,如果再不同的js文件里定义了相同的全局变量(包括顶层函数,不在任何函数体内的变量等),都会引起冲突,而且在项目中很难被发现。为减少这种冲突,我们可以把所以的变量和函数绑定在一个全局变量中。
2、局部作用域
在for循环等语句块中是无法定义具有局部作用域的变量的:
'use strict';
function foo() {
for (var i=0; i<10; i++) {
//
}
i += 10; // 仍然可以引用变量i
}
ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量,用来解决以上所诉问题。
3、常量
在ES6之前,我们通常用全部大写的变量来表示一个常量,ES6标准引入了新的关键字const来定义常量,const与let都具有块级作用域。
this指针
在一个方法内部,this是一个特殊变量,它始终指向当前对象。
没有绑定在对象上的函数,它的this指针指向全局对象,也就是window。
不知道设计者在设计之初是作何考虑的,ECMA想要优化这个“特性”,在strict模式下让函数的this指向undefined。但并没有根本解决this指向的问题。
因此有时我们需要用一个变量比如 that 来提前捕获this。
参考资料:廖雪峰的官方网站:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000