知识库

个人知识管理

用户工具

站点工具


web:js中三种函数创建方式的区别

js中三种函数创建方式的区别

创建函数的三种写法

三种方式如下:

1. 函数声明法:

function A(){}

2. 函数表达式法:

var A = function(){}

3. Function构造函数法:

var A = new Function()

第一种和第二种很相似,主要区别在于: 函数声明会在同作用域内任何表达式被解析和求值之前先被解析和求值,即函数声明提升,举例如下:

1. 函数声明法

console.log(typeof A)  //function
function A(){
  console.log("A");
}

2. 函数表达式法

console.log(typeof A)  //undefined
var A = function(){
  console.log("A");
}

由于JavaScript的变量提升函数声明提升特性,上述代码等价于

1. 函数声明法

function A(){ //函数的声明和定义被提前了
  console.log("A");
}
console.log(typeof A); //function

2. 函数表达式法

var A; //undefiend,变量的声明被提前了
console.log(typeof A);//undefiend
A = function(){ //变量的定义留在了原地
  console.log("A"):
}

从结果上看,函数声明式写法类似于写在同作用域最前面的`var A = function A(){}`

第三种和前面两种的区别是:

1. function是个关键字,而Function是个引用类型,使用function创建的变量是一个指针,指向的对象是一个Function对象。

2. 使用Function构造函数会动态创建一个新的函数对象,该函数对象的作用域为全局作用域,而前面两种方法创建的函数作用域都为当前作用域。

举例如下:

1. 局部作用域

var A = "global";
(function(){
var A = "local";
var fn = function(){
  console.log(A);
}
fn(); //local,作用域是当前作用域中的"local"
})();

2. 全局作用域

var A = "global";
(function(){
var A = "local";
var fn = new Function('console.log(A);');
fn();  //global, 作用域是全局作用域中的"global"
})();

函数声明和表达式的区别

函数声明和表达式的区别按照ECMA规范只明确一点:函数声明必须带有标识符(函数名称),即不带标识符的都是函数表达式

所以第一种写法只能function A(){}这样写,A是函数的名字。

而第二种可以写成var A = function(){}(匿名函数赋值给了变量A)也可以写成var A = function A(){}(命名函数A赋值给了变量A,函数名“恰巧”是A)或者var A = function B(){}(命名函数B赋值给了变量A,函数名是B)。

参考引用

web/js中三种函数创建方式的区别.txt · 最后更改: 2019/09/11 00:49 (外部编辑)