谈谈javascript的函数表达式及其应用

lixiang 发布于2019-08-20 12:04 / 2869人阅读

摘要：函数表达式语法如下函数体如上所示当我们输出函数名时返回了空字符串，因为关键字后面没有标识符，这种情况下创建的函数为匿名函数。接下来我们就谈谈利用函数表达式所创建的匿名函数有什么应用。操作方法声明匿名函数，立马调用。

我们都知道定义函数的方式有两种，一种是函数声明，另外一种就是函数表达式。

函数声明

语法为：function关键字后跟函数名。例如：

function functionName(arg0) {
    //函数体
}
alert(functionName.name)  // "functionName"

函数声明最主要的特征就是函数声明的提升，所以我们可以把函数声明放在调用它的语句的后面，因为执行代码前会先读取函数声明。比如：

hello();
function hello(){
    alert("hello");
}

上面的代码可以在浏览器正常运行。

函数表达式

语法如下：

var functionName = function(arg0){
    //函数体
};
alert(functionName.name)  // ""

如上所示当我们输出函数名时返回了空字符串，因为function关键字后面没有标识符，这种情况下创建的函数为匿名函数。接下来我们就谈谈利用函数表达式所创建的匿名函数有什么应用。

应用

函数表达式最典型的应用就是模仿块级作用域，我们都知道JavaScript没有块级作用域，不过我们可以用函数表达式模仿块级作用域。形成独立作用域，从而避免全局污染。
操作方法：声明匿名函数，立马调用。
最经典的例子：

function createFunctions(){
    var result = [];
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
createFunctions();

乍一看每个函数都应该返回自己的索引值，即位置0的函数返回0,1的返回1，以此类推。实际上每个函数都将返回10，因为这里的i是贯穿整个作用域的，我们把上面代码修改一下：

//写法1
(function(){
    //这里是块级作用域
    var result = [];
    for(var i=0;i<10;i++){
        result[i] = (function(num){
            return function(){
                return num;
            };
        }(i))();
    }
    return result;
})();   //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//写法2
var hasfunction = function(){
    var result = [];
        for(var i=0;i<10;i++){
            result[i] = (function(num){
                return function(){
                    return num;
            };
        }(i))();
    }
    return result;
}
hasfunction();

在立即执行函数执行的时候，i的值被赋值给num，同时创建返回num的闭包，从而result数组每个函数都有一个num变量的副本。

完。

云服务器 GPU云服务器及其应用 javascript的函数云计算及其应用图像识别及其应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80782.html

谈谈 <script> 标签以及其加载顺序问题，包含 defer & async

摘要：标签加载顺序如果要谈标签加载顺序问题，首先要谈的就是标签的位置，因为标签的位置对于加载顺序来说有着很重要的影响。例如标签在以上代码中，可能由于下载时间比较长，由于两个标签都是异步执行，互不干扰，因此可能就会先于执行。谈谈标签加载顺序的问题这篇文章比较长，如果你耐心读完了，我会感谢你愿意在这篇文章上花费时间，也希望你有收获。其实说起，几乎搞前端的都知道他的作用：引入 JavaS...

alexnevsky 2019-08-22 15:13 评论0 收藏0
谈谈JavaScript中function多重理解

摘要：中的有多重意义。它可能是一个构造器，承担起对象模板的作用可能是对象的方法，负责向对象发送消息。语义匿名函数处理某些特殊效果如处理一些数据又不想暴露过多的变量判断版本的方式最终只要一个结果，匿名函数内部用到了一些局部变量全部可以隔离开。 JavaScript 中的 function 有多重意义。它可能是一个构造器（constructor），承担起对象模板的作用；可能是对象的方法（met...

muzhuyu 2019-08-23 16:50 评论0 收藏0
从html,css,javascript三方面谈谈“浏览器兼容性”的问题

摘要：可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度，但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这时候我们就会面临这个兼容性问题。 javaScript 在IE、FireFox、Netscape等不同的浏览器里，对于document.body的clientHeight、offsetHeig...

William_Sang 2019-08-02 11:37 评论0 收藏0
从html,css,javascript三方面谈谈“浏览器兼容性”的问题

摘要：可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度，但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这时候我们就会面临这个兼容性问题。 javaScript 在IE、FireFox、Netscape等不同的浏览器里，对于document.body的clientHeight、offsetHeig...

Kaede 2019-08-30 15:54 评论0 收藏0