匿名函数,普通函数,变量函数,基于对象的方法

介绍它们的优劣点(性能,执行条件,可维护性,适合大型还是小型)

Javascript有着灵活多变的函数方法,具体选用何种形式,都会极大地影响应用程序的编写方式及性能。考虑到项目的多样化,应该在各种情况下选用最为适用的方案。

普通函数

我们使用的Salad()就是这样的一个标准函数,它以function关键字开头,其后是函数名、参数列表以及函数内容本身。此函数也会返回一个通过计算而得出的数值。

 //这是一个普通函数

 function Salad(totalSlices,peopleCount){    

     "use strict";

     var fairness = totalSlices * peopleCount;

     return fairness;

 }

如果你正在开发一个规模相对较小的javascript应用程序库,并且需要不止一次地通过复用Salad()函数进行计算,那么就可以使用这种风格的函数打包。对于这种函数执行并调用它所花的处理时间要比直接执行其中的代码更多。

匿名函数

匿名函数中没有可以复用的东西,如果只限于函数作用域内,当然可引用内部变量。

如果将Salad()写成一个大的匿名函数,而不是一个小的匿名函数或者普通函数,那么这段代码会变成这种形式。该函数定义好以后会从上而下自动执行。

用一个大的匿名函数来实现Salad()功能:

  //这是一个匿名函数
function () { "use strict"; var body = document.getElementsByTagName("body")[0],
//不要在意这些变量
partyStarter = "starlen", peopleCount = 18,
Salad = 6,
sliceCount = Salad * 3; }

如果我们不打算多次调用原来那个Salad普通函数,那么将它写成一个单独的匿名函数的一部分,起执行速度更快,省去了查找并调用函数的时间。这种写法确实能提升函数的性能,但是它不能被提取反复复用。如果要重复执行这段代码,则需要进行打包。

以变量的形式编写函数

函数也可以声明为变量,它与第一个普通函数在功能上没有太大的区别,两者都能产生相同的运行效果,调用方式也一样。区别只是风格上不同,这种形式更符合面向对象/方法的开发思路。

 //这是一个以变量形式出现的普通函数
var fair = function Salad(totalSlices,peopleCount){ "use strict"; var fairness = totalSlices * peopleCount; return fairness;
}

需要注意的是,它虽然与普通函数有着相同的调用方式,但是在风格上有着明显的差别,因此在同一份源文件中两种风格的函数不能并存。

以方法形式出现的函数

我们实现在针对水果JSON搜索表单的自动完成功能时,就是使用这种结构来组织应用程序中的函数方法的。以此形态存在的函数也能产生于普通函数相同的结果,只是两者的执行路径不同而已。

如果将一个函数写成方法,那么语法与嵌套的形式将是它与普通函数之间最为显著的区别。我们把原来的函数拆分成一个salad对象和一个fruit方法,这样一来以后就可以把另外一些方法加入到salad对象中来。这样形式的应用程序中各个功能的划分与归组更加明晰。

 //salad函数被转写成了一个对象
var party = { pizza : function Salad(totalSlices,peopleCount){ "use strict"; var fairness = totalSlices * peopleCount; return fairness;
} };

如果应用程序规模比较大,而且其中存在着各类功能,那么以对象与方法的形式来组织函数就显得很有用了。将功能相似的方法归入同一个对象中,有助于我们更好地调整代码结构。我的这个函数代码根本就不值得用嵌套在对象中的函数来做(因为太小)。

这是我的一些常用的开发经验,基础且重要,欢迎交流

JavaScript的几种函数的结构形式的更多相关文章

  1. js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别

    js中有两种声明函数的方法,分别为: var functionOne = function() { // Some code }; function functionTwo() { // Some c ...

  2. js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别 (译)

    stackOverflow中看到了很久以前问的一个关于函数声明的问题,问题对函数剖析的特别深.这里翻译了一下组织成一篇小博文,加深一下对这两种声明方式的印象.虽是老调重弹,但是只要能帮助理解问题,不管 ...

  3. javascript立即调用的函数表达式N种写法(第二篇)

    原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...

  4. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  5. 2018.8.17 关于JavaScript的几种常见的全局函数

    JavaScript常见的全局函数 <!doctype html> <html lang="en"> <head> <meta chars ...

  6. Javascript自执行匿名函数(function() { })()的原理分析

    匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function() { alert('hell ...

  7. JavaScript的三种工业化调试方法

    JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...

  8. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  9. 02.JavaScript 面向对象精要--函数

    在JavaScript中,函数其实也是对象.是函数不同于其他对象的特点是:函数存在一个被称为[[Call]]的内部属性.[[Call]]属性是函数独有的,表明该对象可以被执行.ECMAScript 定 ...

随机推荐

  1. csharp: InvokeHelper

    Entity Framework https://entityframework.codeplex.com/ Enterprise Library https://entlib.codeplex.co ...

  2. XLConnect:一个用R处理Excel文件的高效平台

    code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...

  3. ASP.NET WebAPI 15 CORS

    同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 对于同源必须要求URL在如下几个方面相同: 网络协议(http与 ...

  4. WebForm(ASP开发方式,IIS服务器、WebForm开发基础)

    一.B/S和C/S 1.C/S C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据 ...

  5. 【GOF23设计模式】命令模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_命令模式.数据库事务机制底层架构实现.撤销和回复 package com.test.command; public cla ...

  6. 初识python(1)

    1.python简介 Python是一种面向对象.直译式计算机程序语言.也是一种功能强大而完善的通用型语言,已经具有十多年的发展历史,成熟且稳定. Python语法简捷而清晰,具有丰富和强大的类库.它 ...

  7. 精简CSS代码

    精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...

  8. Atitit.jsou html转换纯文本 java c# php

    Atitit.jsou html转换纯文本 java c# php 1. 原理<p> <h> <li><div> 等lable转换为回车1 2. 调用2 ...

  9. SharePoint中Event Handler的触发

    一直以来对于Event Handler的感觉就是:添加.编辑和删除动作之前和动作之后,我们在SharePoint系统中可以做的一些事情 不过在最近处理的一个问题中,发现它在触发时机上出了一点问题   ...

  10. 递归练习(C语言)

    本文地址:http://www.cnblogs.com/archimedes/p/recursive-practice.html,转载请注明源地址. 1.炮弹一样的球状物体,能够堆积成一个金字塔,在顶 ...