javascript笔记之函数定义

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 979 字 | 阅读时长 ≈ 3 分钟

在 JavaScript中，函数是头等(first-class)对象，一等公民，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。

函数的定义

在javascript中，函数是由事件驱动的或者当它被调用时执行的可重复使用的代码快。当今任何一个javascript框架或者库，都是由成千上万个函数组成，比如jquery、react、vue等。通过使用函数可以更加合理的组织代码，不仅提高了代码的可读性，也为程序扩展提供了可能。通常根据定义函数的方式不同，将函数分为声明式函数和表达式函数。

声明式函数

声明式函数相对于表达式函数而言又被称作具名函数，定义格式如下：

1
2
3
function funcname([arg1[,arg2……]]){
    // statements
}

funcname是一个标识符，是定义的函数名，不是字符串也不是变量。紧跟后面的括号中是函数的参数，大括号中是函数体。当函数被调用时，传入参数并执行函数体中的代码。

1
2
3
4
5
6
function add(x,y){
  console.log(x+y);
}
add(2, 3); //显示 5
// 可以通过name属性获得函数的名字
console.log(add.name);// add

表达式函数

表达式函数可以定义一个匿名函数(表达式函数可以带函数名，但是函数名只能在函数内部使用，相对于全局来说是匿名的)

  • 示例1(没有函数名)
1
2
3
4
5
6
7
8
// add指向存储匿名函数的地址
let add = function(x,y){
    console.log(x+y);
};
let sum = add;
// 匿名函数的name用最初赋值的变量字符串表示
console.log(add.name); //add
console.log(sum.name); //add
  • 示例2(提供函数名的时候，函数名只可以在函数内部使用来代指函数本身)
1
2
3
4
5
6

var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};

console.log(factorial(3)); // 6
console.log(factorial.name); //factorial
console.log(fac.name); //fac is not defined
  • 需要注意的是，使用Function构造函数也可以定义表达式，使用该方式定义函数允许我们动态的来定义和编译一个函数，而不是限定在function预编译的函数体中。但同时也会带来负面影响，因为每次调用都要对它进行编译并生成新的函数对象，尤其是在循环体中，效率相对较低。不推荐使用，了解即可
1
2
3
4
5
6
// 使用new Function创建一个函数
var add = new Function ('x', 'y', 'console.log(x+y)');
// 下面的代码和上面的代码是等价的
function add(x,y){
  console.log(x+y);
}
  • Function()构造函数定义的函数是全局作用域的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var y = "global";
function a(){
  var y = "local a";
  console.log(y);
}
var b = function(){
  var y = "local b";
  console.log(y);
};
function c(){
  var y = "local c";
  return new Function("console.log(y)");
}
a();//local a
b();//local b
c()();//local

c()()打印global，因为Function()返回的是全局变量y，而不是函数体内的局部变量。

声明式函数和表达式函数的区别

最主要的区别是加载顺序有所不同，声明式函数是在 JavaScript 编译的时候就加载到作用域中,而表达式函数则是在代码执行的时候加载，如果在定义之前调用表达式函数，则会返回 undefined；这就是通常说的函数声明提升

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(typeof f);//function
console.log(typeof c);//undefined,因为 c 还没有定义
console.log(typeof d);//undefined,因为 d 还没有定义
console.log(typeof a);//undefined,因为 d 还没有定义
function f(){
  return true
}
var a = ()=>"Hello ES6";
var c = function(){
  return true;
};
console.log(typeof c);//function, 因为上面已经定义
console.log(typeof a);//function, 因为上面已经定义
var d = new Function("return true");
console.log(typeof d);//function，上面已经定义

参考链接

MDN
IBM Developer