美文网首页
JavaScript 函数声明和函数表达式

JavaScript 函数声明和函数表达式

作者: 墨鱼随记 | 来源:发表于2019-07-14 20:14 被阅读0次

在 js 中函数被认为是第一等公民,而且对于创建函数来说这个概念是非常重要的.

不像别的语言,在 js 中,我们有三种不同的创建函数的方式.

1.函数声明

函数表达式

命名函数表达式

######函数声明

function [name](param1, param2, ...param3) {

    // Function Body & Logic

}

在这个例子里,我们把function 关键字放在函数名字前面.

一个主要的好处是这个函数会 提升

因为这个,我们可以先执行这个函数,再声明它.

当你想要将某些抽象的逻辑放到函数内部,但是实际上实现是在以后完成.

最佳实践: 定义好了函数之后立即执行它,比依赖js 的提升要好

######函数表达式

任何给某个变量赋值的语句都可以叫做表达式

var a= 100;

var b= 'hello worl'

在某些情况下,会创建没有名字的函数并赋值给某个变量

var [name] = function(param1, param2, ...param3) {

    // Function Body & Logic

}

foo(1,3,4);

**限制:**函数不能在被定义之前执行

var num1 = 10;

var num2 = 20;

var result = add(num1, num2); 

//

Uncaught TypeError: add is not a functionvar add = function(param1, param2) {

    return param1 + param2 ;

}

下面的方式会执行

var num1 = 10;

var num2 = 20;

var add = function(param1, param2) {

    return param1 + param2 ;

}

var result = add(num1, num2); // ==> 30

######命名函数表达式 - 包含两种方法

现在你已经知道函数表达式和函数声明之间的区别了,现在我们看下两者的混合吧

var num1 = 10;

var num2 = 20;

var addVariale = function addFunction(param1,param2) {

return param1+ param2

}

注意,上面的代码已经不是匿名的而是有一个addFunction 的名字,同时,它赋值给了一个变量 - addVariale .

现在你虽然加了一个名字到function 关键字后面,但是这不意味着你可以直接执行这个函数名.

var result = addFunction(num1, num2);

// ==> Uncaught ReferenceError: addFunction is not defined

相反,只有赋值变量 addVariable 可以引用和执行

var result = **addVariable**(num1, num2);

// ==> 30

#####重点

1.addFunction掩盖了调试工具调用堆栈中的addVariable。

1*CPUa1X3-O55XPPMz7MBVkA

命名函数表达式

1*QsAXJNRrrI49ZkDo3WCrnA

函数表达式

2.在命名函数表达式的情况下,调用外部抛出的addFunction()错误

未捕获错误: addFunction 没找到

但是你可以在函数内部调用,这样子会执行

var num1 = 10;

var num2 = 20;

var addVariable = function addFunction(param1, param2) {

  var res = param1 + param2;

  if (res === 30) {

        res =

addFunction(res, 10);

  }

  return res;

}

var result = addVariable(num1, num2); // ==> 40

在这个场景上,查看 res 是 30 的话,调用同样的函数,并把赋值 30 和 10,作为参数,最后会返回一个 40 作为输出结果.

3.在IE8及以下版本中使用命名函数表达式的一个严重警告是,它错误地在两个完全不同的时间创建了两个完全独立的函数对象(Double take)。

如果你需要支持 IE8,最好使用函数表达式和函数声明,避免使用命名函数表达式.

希望这个文章会给你一个的关于函数声明,函数表达式,命名函数表达式的清晰的概念

希望你可以在下面留言写下你的想法,反馈和疑虑,我们可以更深的讨论一下.

原文地址: https://medium.com/@raviroshan.talk/javascript-function-declaration-vs-expression-f5873b8c7b38

相关文章

  • 函数与作用域

    1.函数声明和函数表达式有什么区别?Javascript 中函数声明和函数表达式是存在区别的,函数声明在JS解析时...

  • level-17

    函数声明和函数表达式有什么区别 (*) 在javascript中,函数有两种定义写法,函数定义表达式和函数声明,其...

  • TS基础(七)函数

    在JavaScript中函数是一等公民。有两种常见定义函数的方式,函数声明和函数表达式。函数声明和函数表达式还是有...

  • js 任务 3

    1函数声明和函数表达式有什么区别 在javascript中,函数有两种定义写法,函数定义表达式和函数声明,其例子分...

  • JS函数与作用域

    函数声明和函数表达式有什么区别 JavaScript 中需要创建函数的话,有两种方法:函数声明、函数表达式,各自写...

  • js函数

    函数声明和函数表达式有什么区别 函数声明: 函数表达式: JavaScript 解释器中存在一种变量声明被提升的机...

  • JavaScript函数与作用域

    函数声明和函数表达式的区别 JavaScript 中创建一个函数,主要有两种方法:函数声明、函数表达式,各自写法如...

  • 深入理解:函数、匿名函数、自执行函数、闭包

    1 定义函数的方式 函数的声明函数表达式 1.1 函数声明 下面是函数声明的结构: 由于javascript具有“...

  • 详解js中常见函数及IIFE(立即执行函数)

    1. 常见函数 函数声明和函数表达式不同之处在于: Javascript引擎在解析javascript代码时会‘函...

  • JavaScript中的函数与闭包

    查阅书籍:JavaScript权威指南 函数声明与函数表达式 用函数声明定义的函数,函数可以在函数声明之前调用,而...

网友评论

      本文标题:JavaScript 函数声明和函数表达式

      本文链接:https://www.haomeiwen.com/subject/kbvikctx.html