理解JavaScript中函数方法
- 2019 年 10 月 6 日
- 筆記
1.函数声明和函数表达式
通过字面量创建函数的方式有两种函数声明和函数表达式:
函数声明:
function sum(x, y) { var result = x + y; return result; }
函数表达式:
var sum = function (x, y) { var result = x + y; return result; };
函数声明和函数表达式除了在语法上有一些差异外,作用都是一样的。
函数声明被提升到上下文的顶部(函数所在的作用域)。也就是说我们可以在函数声明之前使用它,并且不会产生错误。例如:
var result = sum(3, 5); console.log(result); function sum(x, y) { var result = x + y; return result; }
但是,函数表达式不能被提升,下面的代码会报错:
var result = sum(3, 5); console.log(result); var sum = function (x, y) { var result = x + y; return result; };
建议大家无论在使用哪种字面量的方式创建Function类型的对象时,一定要先声明后使用。
2.将函数作为值
我可以像其他对象那样使用函数,比如,可以将它们赋值给另一个变量,可以将将它们作为对象的属性值,可以作为参数传递给其他函数,还可以作为其他函数的返回值。
1.可以将它们赋值给另一个变量
function sayHi() { console.log('Hi!'); } sayHi(); var sayHi2 = sayHi; sayHi2();
2.可以将将它们作为对象的属性值
function sayHi() { console.log('Hi!'); } var person = { name: '张三', greeting: sayHi }; person.greeting();
3.可以作为参数传递给其他函数
var numbers = [1, 25, 18, 4, 7, 10, 2, 6]; var result1 = numbers.sort(); console.log(result1); var result2 = numbers.sort(function(a, b){ return a - b; }); console.log(result2);
4.可以作为其他函数的返回值
function parent(){ var i = 0; function child(){ i++; console.log(i); } return child; } var func = parent(); func();
3.函数的参数
形参:创建函数时,指定的参数。 实参:调用函数时,实际传递给函数的参数。
函数另一独特之处是无论我们传递给它多少个参数它都不会报错。这是因为我们传递给函数的实参实际上被保存到了一个类似于数组的对象中,arguments
,数组可以包含任意数量的元素,所以可以我们向函数传递任意数量的实参。我们在访问这些参数的时候可以通过数组下表的方式访问。
function sum (x, y){ return x + y; } var result1 = sum(2, 3); console.log(result1); var result2 = sum(2, 3, 5, 6); console.log(result2); var result3 = sum(); console.log(result3); var result4 = sum(2); console.log(result4);
由于函数没有形参,我们必须阅读函数体内的代码才能知道函数需要几个形参,所以很多开发人员愿意使用arguments
对象。例如:
function sum(){ return arguments[0] + arguments[1]; }
然而,有些时候使用arguments
比使用形参更高效。比如,我们要创建一个用来求和的函数,它可以接受任意数量的参数,并返回它们的和。这个时候我们就不能形参,因为我们不知道会传递过来多少个实参,因此,使用arguments
是最好的选择。
function sum() { var result = 0, i = 0, len = arguments.length; while(i < len){ result += arguments[i]; i++; } return result; } console.log(sum(2, 5, 7, 5, 5 ,90));