前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此。

身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟!

这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙。

函式是头等物件

这句话代表着函式与任何JS物件共存,也被当成一个物件。

函式可以被当成变量引用、用实值作声明,或是作为函式参数传递。

这个我们在前几天虽然有提到,但并没有说为什么函式可以这样作,今天就有说明到是因为头等物件所造成的,也让大家复习一下:

//实质建立

function myFun(){}

//指派给变量、数组或其他物件属性

var myFun = function(){};

var myArr = [];

myArr.push(function(){});

var myObj = {};

myObj.funA = function(){};

//作为参数传递给其他函式

function myFun(val){

val();

}

myFun(function(){});

//作为函式的回传值

function myFun(){

return function(){}

}

//动态建立和指派属性

var myFun = function(){};

myFun.data =“Hola”;

回呼函式Callback function

头等物件的其中一样特性,可以作为参数传递给函式,而在某个时间点,可能会呼叫这个被传入的函式,这就是「回呼函式」的概念。

每当我们设置一个准备在之后呼叫的函式,不论是透过浏览器的事件处理阶段或是透过其他代码,这个行为就是在设置一个回呼函式。我们可以这样解释:这个被建立的函式,会在稍候某个适当的时机点,由其他代码「回呼」(call back)。

这会或还是有点难以理解,不过你或许已经使用过回呼函式只是你不知道而已,不论是最简单的按钮按下执行程序还是从服务器接收数据,这都是回呼函式!

我们来看一个最简单的示例:

var text = 'get Text';

function unlessFun(callback){

console.log('In unlessFUn');

return callback();

}

function getText(){

console.log('In getTxt function');

return text;

}

unlessFun(getText);

执行后会得到如下图:

或许你认为我直接在unlessFun里面印出text就好了啊,为什么要用回呼函式多此一举。

那也许接下来这个示例会让你体验到回呼函式的美好:

如果我们今天有一组数字[2,1,6,12,3,77,100,4]需要做比较大小,这时候可能很多人就会开始自己写个算法的函式,像是这样:

var arr = [2,1,6,12,3,77,100,4];

function compare(val){

for(let i = 0;i<val.lenght;i++){

}

}

也许你花了好几天终于写出了这个算法,但是其实我们可以发现JS早就帮你写好了一个sort()函式,

你可以拿来用,只需要写好回呼函式:

var arr = [2,1,6,12,3,77,100,4];

arr.sort(function(a,b){

return a - b;

});

console.log(arr);//[1,2,3,4,6,12,77,100]

我们不需要考虑算法的底层细节,JS早就针对这些算法函式进行最佳化了,没有必要重复造轮子而且造出来的性能还不一定比较好,所以学好回呼函式并使用他们吧!

参考资料:

忍者Javascript开发技巧探讨

转载于:https://www.cnblogs.com/lannyQ-Q/p/9920555.html

学习JS的心路历程-函式(一)相关推荐

  1. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  2. 学JS的心路历程-函式(五)箭头函式

    箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...

  3. 学习JS的心路历程-参数传递方式(上)

    很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...

  4. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

  5. 学JS的心路历程 -非同步执行

    JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...

  6. 学JS的心路历程 -数组常见处理方法

    昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...

  7. 学JS的心路历程-Promise(一)

    今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...

  8. 学习react的心路历程(一)

    我是react小白,网上的react教程成堆成堆的,我就不在这里写什么教程,巴拉巴拉以下我的学习"心得"! 我是在"技术胖"的带领下学习的react,这个教程是 ...

  9. prince2 成功的项目管理_学员心得 | 宋文彬:学习PRINCE2的心路历程

    今天呢,我们邀请到了咱们光环PRINCE2学员宋文彬同学来为大家做本期的输出分享哦~ 初识PRINCE2 第一次听到PRINCE2这个词(以下简称P2),是我参加2019年王二乐老师和刘磊老师组织的动 ...

最新文章

  1. struts2找不到action_第一次用上Struts2框架做Web开发的体验……
  2. 问题:Excel在“xxx.xlsx”中发现不可读取的内容。是否恢复此工作薄的内容?【原创】...
  3. 如何通过“限制管理权限”来保护您的企业?
  4. Pylon5 SDK搭配OpenCV使用入门
  5. UNIX编程艺术-艾瑞克.S.理曼德
  6. VUE微信开放平台实现网站微信登陆
  7. 走近篮球运动·体育项目
  8. 微信小程序-腾讯云即时通信 IM 小程序直播(一)
  9. Python MySQLdb 模块使用方法
  10. html word 编辑表格,在Word文档中运用编辑表格的7个技巧
  11. GTS、GCK,GSR全称
  12. android 在状态栏耳机图标显示图标显示图标显示图标,Android 通知栏图标
  13. 《WEB开发-HEXO博客搭建》第3章 Hexo博客域名添加
  14. Python实现SVM的实例(包括网格调参和测试)总结综述
  15. 实验报告微型计算机拆卸顺序表,实验一线性表的顺序存储结构实验报告页.doc...
  16. 数据科普:期权的希腊字母 | 上(投资必知必会)
  17. 北京喜意来误请“熊猫烧香”骗子团伙“毒王”解决password01.txt.shs病毒(图)
  18. 基于python的股票程序化交易论文_基于Python工具的股票量化投资策略研究
  19. 周末苦逼码代码,为css3的强大所颤抖了
  20. yarn设置缓存,清除缓存

热门文章

  1. boost::hana::find用法的测试程序
  2. boost::detail模块实现二分法查找的测试程序
  3. ITK:可视化静态稀疏Whitaker 2D水平设置图层
  4. ITK:计算图像的正向FFT
  5. ITK:将网格写入vtp文件
  6. OpenCV相机使用的实例(附完整代码)
  7. C语言求两个链表的合并点的算法(附完整源码)
  8. OpenGL Tessellated Triangle镶嵌三角形的实例
  9. OpenGL 使用FDTD求解电磁波方程
  10. java 递归 堆栈_尾递归函数仍在Java吹堆栈