JavaScript的几种函数的结构形式

时间:2023-02-20 18:25:52

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

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

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() {} 两种函数声明的区别 (译)

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

  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自执行匿名函数&lpar;function&lpar;&rpar; &lbrace; &rcub;&rpar;&lpar;&rpar;的原理分析

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

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

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

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

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

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

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

随机推荐

  1. 循序渐进做项目系列(5):制作安装包,谁人都可以!——VS制作安装包简明教程

    一开始让我做安装包的时候,其实我是拒绝的.因为我根本就不会做安装包.查了资料之后,我很懵,很晕,很乱,因为不清晰,不简明,不直白.然而经过一番彷徨的挣扎,我终于发现:制作安装包,谁人都可以!故挥狼毫, ...

  2. dp 走格子问题

    问题: 一个5x8的格子,想从左下角走到右上角,求最短路径,共有多少种走法. 思路: 因为是求最短路径,所以,只会往右往上走. 我们可以把棋盘的左下角看做二维坐标的原点(0,0),把棋盘的右上角看做二 ...

  3. Docker容器时间与宿主机时间不一致的问题

    通过date命令查看时间 查看主机时间   1 2 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间   1 2 root@ ...

  4. UILabel顶端对齐

    比较一劳永逸的写法是对label添加一个分类 @interface UILabel (VerticalAlign) /** 顶端对齐 */ -(void)alignTop; /** 底部对齐 */ - ...

  5. backbone学习笔记一

    backbone是一个MVC单页面框架,针对传统的WEB开发B/S架构的缺点,即通过表现层的浏览器,功能层的WEB服务器,数据层的数据库服务器构架,而操作渲染过程太过复杂.

  6. 对于字符串拼接,string&period;format、stringbuilder、&plus;&equals;

    sring拼接经常会用到,拼接时候使用的方法,每个人的又不一样,有的是不知道哪个效率高,也有一些是为了方便不差那么一点时间! 今天百度查了查他们的区别! += 是效率最低的一个,尽量避免使用,当然,不 ...

  7. 从一个开发的角度看负载均衡和LVS(转)

    原文:http://blog.hesey.net/2013/02/introduce-to-load-balance-and-lvs-briefly.html 在大规模互联网应用中,负载均衡设备是必不 ...

  8. flume-agent实例

    flume    多种适配,多样化的数据收集    核心概念        event:一条消息        client:访问者        agent:            重要组件Sour ...

  9. ajax跨域请求的方案

    $.get("@Hosts.Default.Www/api/XXXXX/Getxxx/"+@Model.UserId, function(data) { $("#tota ...

  10. java 冒泡排序 day003

    一.冒泡排序: 利用冒泡排序对数组进行排序 二.基本概念: 依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数, ...