JavaScript 函数
在 JavaScript中，函数是头等 (first-class) 对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是 Function 对象。(MDN)
1. 函数的使用
1.1 语法
// 常见的函数的定义方式
function 函数名(参数, 参数, ...) {
代码片段;
return 返回值;
}
// 调用函数 (执行函数中的代码)
var 函数的返回值 = 函数名(参数, 参数, ...);
function say() {
console.log('hello');
}
say(); // 输出："hello"
1.3 带有参数与返回值的函数
在声明函数的时候，可以对参数也做上说明
计算三角形周长则需要知道三角形三条边各自的长度，然后将他们求和。
定义函数的时候就可以将三条边作为参数进行声明。
function calcPerimeter(a, b, c) {
// a, b, c 分别代表三条边
var sum = a + b + c;
return sum;
}
// 调用函数 并将返回值赋值给perimeter
var perimeter = calcPerimeter(, , );
三个值对应到函数声明时定义的三个参数 a, b, c。
所以函数执行过程中 sum 的值为 3 + 4 + 5，即 12，随后 sum 被作为返回值进行返回。
最终变量 perimeter 也会被赋值为12。
2. 怎么运用函数
2.1 合理包装内容
比如如下代码块：
// 改写前
var num = ;
var flag = false;
var i;
var len;
for (i = , len = num - ; i <= len; i++) {
if (num % i === ) {
flag = true;
break;
}
}
console.log(flag);
// 改写后
function isPrimeNumber(num) {
var flag = false;
var i;
var len;
for (i = , len = num - ; i <= len; i++) {
if (num % i === ) {
flag = true;
break;
}
}
return flag;
}
var num = ;
var result = isPrimeNumber(num);
console.log(result);
2.2 优秀的函数名
这里提供几个函数命名的建议，具体的命名可以根据团队规范、个人成长等做调整。
2.2.1 拼写准确
准确的拼写十分重要，绝大多数情况下函数名都会是英文单词组成的。
当然许多时候手一快可能就少了一个字母，或者错将 wrap 进行乾坤大挪移拼写成了 warp。
许多情况是无法避免的，经常需要自检。
再者碰到想起的函数名但是单词拼写不出来，尽可能翻词典，日积月累能有大量的词汇沉淀。
2.2.2 尽量不使用拼音或者混用拼写
尽量不要使用拼音或者是首字母缩写。
以下函数名或许会造成困扰：
function jslsh() {}
function jsNumber() {}
以上是计算两数和函数的命名，可能只有天和地知道这个是什么意思。
当然，如果是自己写 demo 或者测试代码的时候，其实不需要考虑这么多。
2.2.3 有“状态”的函数名
// 是否登入
function isLogin() {}
2.2.4 合理使用缩写
使用词语的缩写尽量使用通用的缩写
如：
- pwd - password
- mgr - manager
- del - delete
- …
这些缩写大部分开发者是可以看的懂的缩写。
3. 函数示例
3.1 计算圆的面积
function circleArea(r) {
var pi = ;
return pi * r * r;
}
// 计算半径为10的圆的面积
var area = circleArea();
3.2 判断某个DOM元素是否含有某个类名
分析：
某个DOM和某个类名可以说明有两个未知量，可以设计成两个参数。
根据描述也可以确定一个 某个DOM 的类型是个 DOM 对象，某个类名是个字符串
只要拿到这个DOM的 class 属性，判断里面是不是含有这个类型即可得到结果
function hasClass(el, className) {
// el 是 element的缩写，表示一个dom元素
// 如果没有元素 则返回
if (!el) {
return false;
}
// 根据空格分割成数组
// 可以不使用 split 方法，使用字符串也可以用indexOf匹配
var classList = el.className.split(' ');
// 判断是否存在
if (classList.indexOf(className) >= ) {
return true;
}
return false;
}
4. 函数的其他知识
以下扩展内容可能需要一定的知识积累，遇到不懂的地方可以停下脚步，先学习下一章节
4.1 函数表达式
光看句子有点抽象，举个例子?：
var num1 = add1(, );
var num2 = add2(, );
// 函数声明
function add1(a, b) {
return a + b;
}
// 函数表达式
var add2 = function(a, b) {
return a + b;
};
具体原因可以查看执行上下文章节。
4.2 函数作用域
var a = ;
function fn() {
var b = ;
console.log(a); // 输出：1
console.log(b); // 输出：2
}
fn();
console.log(b); // ReferenceError: b is not defined
4.3 匿名函数
如：
(function() {
var num = ;
alert(num);
})();
以下这段代码会报错：
// 报错
function() {
var num = ;
alert(num);
}();
var count = function fn(num) {
if (num < ) {
return num;
}
return fn(num - ) + num;
}
count();
注：递归相关的知识可以参考相关文献进行学习
4.5 arguments
function sum() {
console.log(arguments);
}
sum(, , , );
function sum() {
var total = ;
var i;
var len;
for (i = , len = arguments.length; i < len; i++) {
total += arguments[i];
}
return total;
}
var total = sum(, , , , );
console.log(total); // 输出：25
通过循环遍历 arguments 对象，就可以得到所有参数，然后做累加就可以达到求和的目的。
4.7 JS DOC 注释
JS DOC 对函数的描述大体如下：
/**
* 这是这个求幂函数 计算 x 的 y 次方
* @param {Number} x - 底数
* @param {String} y - 指数
*/
function pow(x, y) {
// ...
}
除此之外还可以描述返回值等。
4.8 纯函数与副作用
// 纯函数
function add(a, b) {
return a + b;
}
// 非纯函数
var person = { name: '小明' };
function changeName {
person.name = '小红'; // 影响了函数外的内容，产生了副作用
}
4.9 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log('我是' + this.name);
};
var person = new Person('阿梅', );
person.say();
console.log(person);
事实上构造函数的执行有一定流程：
理解这个流程，就能理解构造函数的返回值。
5. 小结
函数特性相对较多，也是 JavaScript 的核心之一。