精华内容
下载资源
问答
  • 主要介绍了JavaScript函数表达式和函数声明函数声明函数表达式的不同的相关资料,需要的朋友可以参考下
  • javascript中声明函数的方法有两种:函数声明和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,...
  • 理解javascript函数表达式和函数声明 理解javascript函数表达式和函数声明 1.函数声明 2.函数表达式 3.区别 小结 1.函数声明 函数声明指函数符号function后面带上函数名,非匿名函数。如下: // 带函数...

    理解javascript函数表达式和函数声明

    1.函数声明

    函数声明指函数符号function后面带上函数名,非匿名函数。如下:

    // 带函数名
    function count (num) {
        return num + 1
    }

    2.函数表达式

    指声明一个变量,其指针指向一个匿名函数

    // 匿名函数
    var count = function (num) {
        return num + 1
    }

    3.区别

    当浏览器中javascript解析器向执行环境中加载数据时,解析器会率先读取函数声明,使其在执行任何代码之前都可用,而函数表达式,只有解析器执行到该函数所在代码行时,才会被解释执行。

    // 函数count经过函数声明提升过程,将该函数加载到执行环境中
    alert(count(1))
    function count (num) {
        return num + 1
    }

    上面代码不会报错。

    小结

    函数声明率先被解析器读取并加载至执行环境,而函数表达式在初始化时才执行。

    展开全文
  • 本文向大家展示了javascript函数声明和函数表达式的概念及区别,介绍的非常全面,也很详尽,这里推荐给大家
  • var f1=function(){}这两者的区别在于:函数声明会在所有代码执行前进行解析,而函数表达式和声明变量一样都是执行到这里的时候才进行解析。(看例子) f1() var f1=function(){ console.log(1) } Uncaught

    1.函数

    定义函数的方法有两种 ,一种是 函数声明 ,另一种是 函数表达式 .
    //函数声明
    function f1(){}
    //函数表达式
    var f1=function(){}
    这两者的区别在于:函数声明会在所有代码执行前进行解析,而函数表达式和声明变量一样都是执行到这里的时候才进行解析。(看例子)
    f1()
    var f1=function(){
      console.log(1)
    }
    Uncaught TypeError: f1 is not a function(…)
    f1()//输出结果1
    function f1(){
      console.log(1)
    }
     
     

    2.闭包

    闭包就是能够读取其他函数作用域中的变量的函数。我们常见的闭包就是在一个函数中创建另外一个函数。(看例子)
    //例子1
    var f1=function(){
      var a=0;
      return function(){
        return a++;
      }
    }() 
    console.log(f1())   //输出0
    console.log(f1())  //输出1
    上面函数就是一个简单的闭包。 (再看一个例子)
    //例子2
    var f1=function(){
      var a=0;
      return function(){
        return a++;
      }
    }
    console.log(f1()()) //输出0
    console.log(f1()()) //输出0
    咦,是不有有点奇怪,看起来相同的两个例子会输出不同的结果?(让我们再看两个例子)
    </pre><pre name="code" class="javascript">//例子3
    var f1=function(){
      var a=0;
      console.log(123)
      return function(){
        return a++;
      }
    }() 
    console.log(f1()) 
    console.log(f1())
    //打印 123  0   1

    </pre><pre name="code" class="javascript">
    //例子4
    var f1=function(){
      var a=0;
      console.log(123)
      return function(){
        return a++;
      }
    }
    console.log(f1()())  
    console.log(f1()()) 
    //打印 123 0 123 0

     我们来解析一下:这两个例子中,例子3 因为在声明函数f1的时候已经自己执行了一次,所以我们可以把例子3看成:
     
    </pre><pre name="code" class="javascript">var f1=function(){
      return a++;   
    }
    //因为自动执行了一次,所以打印123 a是能访问外面的a,  a此时为0  
    console.log(f1()) //打印 0
    //调用的时候并没有打印 123,所以也没执行 var a=0; 此时 a=1
    console.log(f1()) //打印 1
    //我们可以看出 a一直存在局部变量中,并没有被回收 
    /*为什么没被回收呢?因为父函数在执行后子函数被赋给了一个全局变量,
     而子函数是依附父函数的,所以就算之后没执行父函数,父函数也会存在内存中,
     不会被回收
    */

    </pre><pre>
     怎么样,是不是知道这两个例子为什么打印的东西不一样了吧!!!!!是不是对闭包有点理解了~~
      



    展开全文
  • js函数表达式函数声明 科技术语系列 (Tech Jargon Series) It’s likely you already know how to write functions in both these ways. function doStuff() {} and () => {} are characters we type all day. ...

    js函数表达式与函数声明

    科技术语系列 (Tech Jargon Series)

    It’s likely you already know how to write functions in both these ways. function doStuff() {} and () => {} are characters we type all day. But how are they different and why use one over the other?

    您可能已经知道如何以这两种方式编写函数。 function doStuff() {}() => {}是我们整天键入的字符。 但是它们有何不同?为什么要在另一个之上使用?

    Note: Examples are given in JavaScript. Your Mileage May Vary with other languages.

    注意:示例在JavaScript中给出。 Ÿ我们的并购 ileage 中号 AY V进制与其他语言。

    第一个区别:名字 (The first difference: a name)

    When you create a function with a name, that is a function declaration. The name may be omitted in function expressions, making that function “anonymous”.

    使用名称创建函数时,即为函数声明 。 该名称可以在函数表达式中省略,从而使该函数“匿名”。

    Function declaration:

    函数声明:

    function doStuff() {};

    Function expression:

    函数表达式:

    const doStuff = function() {}

    We often see anonymous functions used with ES6 syntax like so:

    我们经常看到与ES6语法一起使用的匿名函数,如下所示:

    const doStuff = () => {}

    吊装 (Hoisting)

    Hoisting refers to the availability of functions and variables “at the top” of your code, as opposed to only after they are created. The objects are initialized at compile time and available anywhere in your file.

    提升是指函数和变量在代码“顶部”的可用性,而不是仅在它们创建之后。 这些对象在编译时初始化,并且可以在文件中的任何位置使用。

    Function declarations are hoisted but function expressions are not.

    函数声明被悬挂,但函数表达式未被悬挂。

    It’s easy to understand with an example:

    用一个例子很容易理解:

    doStuff();
    function doStuff() {};

    The above does not throw an error, but this would:

    上面没有抛出错误,但是会:

    doStuff();
    const doStuff = () => {};

    函数表达式的情况 (The case for function expressions)

    It might seem like function declarations, with their powerful hoisting properties, are going to edge out function expressions for usefulness. But choosing one over the other requires thinking about when and where the function is needed. Basically, who needs to know about it?

    函数声明及其强大的提升属性似乎会使函数表达式失去实用性。 但是要选择一个,则需要考虑何时何地需要该功能 。 基本上,谁需要知道?

    Function expressions are invoked to avoid polluting the global scope. Instead of your program being aware of many different functions, when you keep them anonymous, they are used and forgotten immediately.

    调用函数表达式可以避免污染全局范围 。 当您使它们保持匿名状态时,它们会立即被使用和忘记,而不是您的程序意识到许多不同的功能。

    国际教育展 (IIFE)

    The name — immediately invoked function expressions — pretty much says it all here. When a function is created at the same time it is called, you can use an IIFE, which looks like this:

    名称- 立即调用的函数表达式 -在这里几乎说明了一切。 在同时调用一个函数时,可以使用如下所示的IIFE:

    (function() => {})()

    or:

    要么:

    (() => {})()

    For an in-depth look at IIFEs, check out this comprehensive article.

    要深入了解IIFE,请查看这篇综合文章

    回呼 (Callbacks)

    A function passed to another function is often referred to as a “callback” in JavaScript. Here’s an example:

    传递给另一个函数的函数在JavaScript中通常称为“回调”。 这是一个例子:

    function mapAction(item) {
      // do stuff to an item
    }
    array.map(mapAction)
    array.map(mapAction)

    The problem here is that mapAction will be available to your entire application — there’s no need for that. If that callback is a function expression, it will not be available outside of the function that uses it:

    这里的问题是mapAction将可用于您的整个应用程序- mapAction 。 如果该回调是函数表达式,则在使用它的函数之外将无法使用它:

    array.map(item => { //do stuff to an item })

    or

    要么

    const mapAction = function(item) {
      // do stuff to an item
    }
    array.map(mapAction)
    array.map(mapAction)

    though mapAction will be available to code below its initialization.

    尽管mapAction将可用于其初始化下方的代码。

    摘要 (Summary)

    In short, use function declarations when you want to create a function on the global scope and make it available throughout your code. Use function expressions to limit where the function is available, keep your global scope light, and maintain clean syntax.

    简而言之,当您要在全局范围内创建函数并使之在整个代码中可用时,请使用函数声明。 使用函数表达式可限制该函数在何处可用,使全局作用域保持清淡并维护简洁的语法。

    参考文献 (References)

    科技术语系列 (The Tech Jargon Series)

    There are so many phrases that get thrown around at tech meetups and conferences, assuming that everyone is already down with the lingo. I’m often not down with the lingo. It’s common for developers to act astonished that I lack a piece of knowledge.

    假设每个人都已经对这种术语感到沮丧,那么在技术聚会和会议上会出现很多短语。 我常常不喜欢行话。 开发人员惊讶地发现我缺乏知识,这很常见。

    The truth is, I often just don’t know the right word for it. As humans, but especially developer humans, we love to dismiss those who don’t “talk the talk”, so this series is about getting a solid understanding of programming concepts that one “should know”.

    事实是,我常常只是不知道正确的词。 作为人类,尤其是开发人员,我们喜欢解雇那些不“谈论”的人,因此本系列文章旨在对人们“应该知道”的编程概念有扎实的理解。

    This is the second article in the series. The first was higher-order functions. Look out for more as I go to meetups and conferences and pretend to know what my fellow techies are talking about, but then have to go home and Google it.

    这是该系列的第二篇文章。 首先是高阶函数 。 当我去参加聚会和会议时要注意更多,并假装知道其他技术人员在谈论什么,但随后必须回家并使用Google。

    翻译自: https://www.freecodecamp.org/news/when-to-use-a-function-declarations-vs-a-function-expression-70f15152a0a0/

    js函数表达式与函数声明

    展开全文
  • js函数表达式函数声明 Jeff Mott对本文进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! JavaScript有两种创建函数的不同方式。 函数声明已经使用了很长时间,但是函数表达式已经...

    js函数表达式与函数声明

    Jeff Mott对本文进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态!

    JavaScript有两种创建函数的不同方式。 函数声明已经使用了很长时间,但是函数表达式已经逐渐被人们所接受。

    function funcDeclaration() {
        return 'A function declaration';
    }
    
    var funcExpression = function () {
        return 'A function expression';
    }

    声明和表达式之间的差异

    var语句类似,函数声明也悬挂在其他代码的顶部。 函数表达式不会被悬挂,这允许它们保留定义它们的作用域中局部变量的副本。

    通常,函数声明和函数表达式可以互换使用,但是有时函数表达式可以使代码更易于理解,而无需使用临时函数名。

    函数表达式的好处

    函数表达式比函数声明更有用的方式有几种。

    • 作为封闭
    • 作为其他功能的参数
    • 作为立即调用的函数表达式(IIFE)

    创建关闭

    要在执行该函数之前为该函数提供参数时,请使用闭包。 当通过NodeList循环时,这可以为您带来好处的一个很好的例子。 使用闭包可以保留其他信息,例如索引,以便在执行函数时该信息不再可用。

    function tabsHandler(index) {
        return function tabClickEvent(evt) {
            // Do stuff with tab.
            // The index variable can be accessed from within here.
        };
    }
    
    var tabs = document.querySelectorAll('.tab'),
        i;
    
    for (i = 0; i < tabs.length; i += 1) {
        tabs[i].onclick = tabsHandler(i);
    }

    附加的事件处理程序在以后的时间(在循环完成之后)执行,因此需要关闭以保留for循环的适当值。

    // Bad code, demonstrating why a closure is needed
    var i;
    
    for (i = 0; i < list.length; i += 1) {
        document.querySelector('#item' + i).onclick = function doSomething(evt) {
            // Do something with item i
            // But, by the time this function executes, the value of i is always list.length
        }
    }

    通过从for循环中提取doSomething()函数,更容易理解为什么会出现问题。

    // Bad code, demonstrating why a closure is needed
    
    var list = document.querySelectorAll('.item'),
        i,
        doSomething = function (evt) {
            // Do something with item i.
            // But, by the time this function executes, the value of i is not what it was in the loop.
        };
    
    for (i = 0; i < list.length; i += 1) {
        item[i].onclick = doSomething;
    }

    此处的解决方案是将索引作为函数参数传递给外部函数,以便它可以将该值传递给内部函数。 通常,您会看到处理程序函数用于组织内部返回函数所需的信息。

    // the following is good code, demonstrating the use of closure
    
    var list = ['item1', 'item2', 'item3'],
        i,
        doSomethingHandler = function (itemIndex) {
            return function doSomething(evt) {
                // now this doSomething function can retain knowledge of
                // the index variable via the itemIndex parameter,
                // along with other variables that may be available too.
                console.log('Doing something with ' + list[itemIndex]);
            };
        };
    
    for (i = 0; i < list.length; i += 1) {
        list[i].onclick = doSomethingHandler(i);
    }

    有关闭包的其他良好示例以及它们如何提供帮助,可以在此闭包示例FAQ中找到

    作为参数传递

    函数表达式可以直接传递给函数,而不必分配给中间临时变量。

    在jQuery中,它们经常以匿名函数的形式出现,例如:

    $(document).ready(function () {
        console.log('An anonymous function');
    });

    同样,当使用诸如forEach()方法时,将使用函数表达式来处理数组项。 它们也不必是未命名的匿名函数。 给函数表达式命名是一个好主意,以帮助表达该函数的功能并有助于调试。

    var productIds = ['12356', '13771', '15492'];
    
    productIds.forEach(function showProduct(productId) {
        ...
    });

    立即调用函数表达式(IIFE)

    IIFE用于帮助防止您的函数和变量影响全局范围。 其中的所有属性的作用域都限于匿名函数。 这是一种常见的设计模式,用于防止您的代码在其他地方产生不想要的或不想要的副作用。

    它还用作模块模式,以包含代码块,以方便维护各节。 我们将在Demystifying JavaScript闭包,回调和IIFE中更深入地介绍这些内容

    IIFE的一个简单示例是:

    (function () {
        // code in here
    }());

    当作为模块使用时,可以为您的代码带来一些易于实现的可维护性。

    var myModule = (function () {
        var privateMethod = function () {
            console.log('A private method');
        },
        someMethod = function () {
            console.log('A public method');
        },
        anotherMethod = function () {
            console.log('Another public method');
        };
    
        return {
            someMethod: someMethod,
            anotherMethod: anotherMethod
        };
    }());

    结论

    如我们所见,函数表达式所提供的功能不能提供函数声明所不能提供的很多功能,但是使用它们通常可以使代码更清晰,可读性更好。 它们的广泛使用使其成为每个开发人员工具箱的重要组成部分。 您是否以我上面没有提到的任何有趣方式在代码中使用函数表达式? 发表评论,让我知道!

    翻译自: https://www.sitepoint.com/function-expressions-vs-declarations/

    js函数表达式与函数声明

    展开全文
  • 主要介绍了浅析javascript函数声明和函数表达式区别,需要的朋友可以参考下
  • 主要介绍了JavaScript中的函数声明和函数表达式区别浅析,本文总结的浅显易懂,非常好的一篇技术文章,需要的朋友可以参考下
  • 函数声明以function关键字开头,接着是必须的函数(变量)名以逗号分隔的可选的参数列表,再接着就是以大括号封装的函数体。函数声明必须是一个单独的JavaScript语句。必须含有函数名 2.函数表达式 在任何情况下...
  • 我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐 藏”起来,外部作用域无法访问包装函数内部的任何内容。 例如: var a = 2; function foo() { // <-- 添加这一行 var a = ...
  • JavaScript中定义函数最常用的方式是函数声明和函数表达式。这两种技术非常相似,有时甚至难以区分,但在后续章节中可以看到,它们之间还是存在着微妙的区别JavaScript定义函数最基本方式是函数声明,如下图:...
  • 1 函数声明和函数表达式 函数声明 //函数的声明 function f1() { console.log("我是函数"); } f1(); 函数表达式(推荐使用) //函数表达式 var ff=function () { console.log("我也是一...
  • 还有一种函数表达式不...函数声明只能出现在程序或函数体内。 如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部...
  • 函数声明函数表达式区别 函数声明函数表达式定义函数看似相同,实际上在解析器向执行环境中加载数据时,解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到...
  • 函数表达式和函数声明 函数声明举例: function shenlu(type){  return type==="decloartion"; } 解释:在js解析时,进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。 ...
  • 显而易见的区别: 1.函数声明必须以function开头,而函数...2.函数声明和具名的函数表达式中的函数名都可以在函数自身内部被调用,区别在于具名函数表达式不能在函数自身外部(不能在父作用域中)被调用,函数声...
  • javascript中的函数声明函数表达式使用比较频繁,可能很多的朋友都不知道他们之间的区别,在此为大家详细介绍下,希望对大家有所帮助
  • 1)函数声明 //函数声明 function myFunction(type) { return type === "Declaration" } 2)函数表达式 //函数表达式 var expressFunction = function (type) { return type === "Expression" } 函数声明创建的...
  • Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装、继承等,也可以让代码得到... 有两种方式有函数声明和函数表达式函数声明 function a(){ }函数表达式var
  • js代码-函数声明 函数表达式区别
  • 主要介绍了理解 javascript 中的函数表达式函数声明,需要的朋友可以参考下
  • 详解Javascript 函数声明和函数表达式区别 Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装、继承等,也可以让代码得到复用。但事物都有两面性,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,297
精华内容 39,718
关键字:

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