现代 CSS

函数表达式和函数声明

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

JavaScript中创建函数有两种不同的方式。函数声明这种方式已经使用很久了,但慢慢的被函数表达式这种方式在替代。

//函数声明式
function funcDeclaration() {
    return 'A function declaration';
}

//函数表达式
var funcExpression = function () {
    return 'A function expression';
}

声明和表达式之间的差异

类似于var声明,函数声明可以提升到其他代码之前,但函数表达式不能提到其他代码之前,但它允许保留在本地变量范围内。

通常函数声明和函数表达式是可以相互互换使用,但有时函数表达式结果理解代码不需要一个临时的函数名。

扩展阅读

函数表达式的好处

函数表达式比函数声明式有几个更加有用的地方:

  • 是一个闭包
  • 可以作为其他函数的参数
  • 可以立即调用函数表达式(IIFE)

创建闭包

闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。

function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // 制作tab
        // 可以从内部访问index变量.
    };
}

var tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[index].onclick = tabsHandler(i);
}

附加事件在循环后处理程序,所以一个闭包需要记住for中一个适当的值。

// 不好的代码,说明doSomething为什么需要闭包
var i;

for (i = 0; i < list.length; i += 1) {
    document.querySelector('#item' + i).onclick = function doSomething(evt) {
        // #item(i)做什么
        // 但是,这个函数执行时,i总是得到list.length的值
    }
}

很容易理解,通过for执行doSomething()函数会发生什么问题。

// 不好的代码,说明doSomething为什么需要闭包

var list = document.querySelectorAll('.item'),
    i,
    doSomething = function (evt) {
        // #item(i)做什么
        // 但是,这个函数执行时,i的值不在循环内
    };

for (i = 0; i < list.length; i += 1) {
    item[i].onclick = doSomething;
}

这里的解决方案是通过index作为函数参数传递给一个外部函数,以便将该值传递给一个内部函数。你通常会看到通过return一个函数来处理:

// 以下代码展示了一个闭包

var list = ['item1', 'item2', 'item3'],
    i,
    doSomethingHandler = function (itemIndex) {
        return function doSomething(evt) {
            // 现在doSomething函数可以通过 index变量来访问itemIndex参数
            // 以及其他变理也是可用的
            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()方法,使用一个处理数组项的函数表达式传给forEach()。它们也不是匿名函数。给函数表达式命名是为了更好的知道表达函数应该做什么,也更好的帮助调试代码:

var productIds = ['12356', '13771', '15492'];

productIds.forEach(function showProduct(productId) {
    ...
});

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

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
    };
}());

扩展阅读

总结

正如我们所看到的,在代码中更多的使用函数表达式来实现函数声明式功能,这样使用你的代码更简洁,更易维护。函数表达多被广大的开发人员使用,也是开发中的一个重要组成部分。如果你在开发中碰到有关于函数表达式一些有意思的东西,欢迎在评论里与我们一起分享。

本文根据@Paul Wilkins的《》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.sitepoint.com/function-expressions-vs-declarations/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/javascript/function-expressions-vs-declarations.htmlView products by sport

返回顶部