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

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

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. Asp.net生成静态网页的实现代码

    现在做程序都要将动态的页面转换成静态页面,今天教大家在ASP.NET 中实现静态页面的生成方法. using System;  using System.Data;  using System.Con ...

  2. platform总线globalfifo驱动

    功能是使用内存的4k单元,实现读,写,偏移,清除. /************************************************************************* ...

  3. 原型 prototype

    原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...

  4. 自定义SharePoint 2013 元数据选择控件

    元数据在Sharepoint中是一个很常用的功能,他提供一个方法来管理企业中常用的关键词,可以更加统一的使用和更新.默认情况下,绑定在列表或库中的元数据字段可以设置是否允许为多个值.但是无法控制在弹出 ...

  5. Ieditor

    Interfaces Description IActiveViewEvents (esriCarto) Provides access to events that occur when the s ...

  6. 得到设备是何种iPhone设备 + 怎么获得启动页面图片

    一.前言 今天做一个功能,需要动态的获得启动页,然后根据不同设备去使用不用的启动页图片. 二.正文 常规来说,我们直接判断是何种设备,然后通过name去获得图片选择性加载即可.但是实际上遇到的两个问题 ...

  7. iOS 工厂方法模式

    iOS工厂方法模式 什么是工厂方法模式? 工厂方法模式和简单工厂模式十分类似,大致结构是基本类似的.不同在于工厂方法模式对工厂类进行了进一步的抽象,将之前的一个工厂类抽象成了抽象工厂和工厂子类,抽象工 ...

  8. javascript对象模型和function对象

    javascript中,函数就是对象 <html> <head> <script type="text/javascript"> functio ...

  9. linux把EDT时间修改为CST格式

    初始时间:2012年 09月 14日 星期五 18:15:33 EDT [root@test ~]# mv /etc/localtime /etc/localtime.bak [root@test ~ ...

  10. Effective Java 37 Use marker interfaces to define types

    Marker interface is an interface that contains no method declarations, but merely designates (or &qu ...