前几天有间单提到该如何声明函式及在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开发技巧探讨

学习JS的心路历程-函式(一)的更多相关文章

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

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

  2. 学JS的心路历程-函式(二)arguments

    参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...

  3. 学JS的心路历程-函式(六)其余参数及预设参数

    今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...

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

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

  5. 学JS的心路历程-函式(四)apply、call

    从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢? 当然可以.会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显 ...

  6. 学习JS的心路历程-范围Scope和提升(Hoisting)

    在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Sc ...

  7. 学习JS的心路历程-声明

    变量 在程序中将一个值指定(assign)给一个符号式的容器(symbolic container),叫做一个变量(variable). 声明在JS中目前提供了三种声明方式: var 声明一个变量,可 ...

  8. 学习JS的心路历程-参数的传递(下)

    今天我们要来探讨JS到底是透过何种参数传递方式呢? 废话不多说,上示例!! 我们先声明原始型别和物件型别来看看两者是否会有不一样的差异: var myStr = 'Hola': var myObj = ...

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

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

随机推荐

  1. CS229 7.2 应用机器学习方法的技巧,准确率,召回率与 F值

    建立模型 当使用机器学习的方法来解决问题时,比如垃圾邮件分类等,一般的步骤是这样的: 1)从一个简单的算法入手这样可以很快的实现这个算法,并且可以在交叉验证集上进行测试: 2)画学习曲线以决定是否更多 ...

  2. 数据库导入Excel

    package com.cfets.ts.s.user.rest; import java.io.File; import java.io.FileInputStream; import java.i ...

  3. 零基础学习python_with(34课)

    今天学习的with语句,with的表达形式如下:据说context必须是上下文管理器,这我就懵比了,啥玩意啊... with语句的表达形式: with context as var:    block ...

  4. [UnityShader基础]01.渲染队列

    unity中定义了5个渲染队列: 1.Background,对应索引号1000,该队列最先被渲染 2.Geometry,对应索引号2000,默认的渲染队列,大多数物体都使用该队列,不透明物体使用该队列 ...

  5. Oracle 日志归档 自动清理

    exp emis/emis@orcl file=d:\backup\oracle\oracle%date:~0,10%.dmp owner=emis log=d:\backup\oracle\orac ...

  6. FastDFS 配置 Nginx 模块,并实现分布式同步-Linux

    1.搭建虚拟机 a.复制虚拟机文件 首先复制我们之前安装好的fastdfs虚拟机,因为我们现在要设置它的IP为21,改名为CentOS-fastdfs - 21. b.设置网络 生成新的MAC地址 设 ...

  7. JAVA 中文 unicode 相互转换 文件读取

    package com.test; import org.junit.Test; public class JunitTest { @Test public void test(){ String p ...

  8. tomcat中项目后有括号

    引入他人项目时,由于报错,copy本地workspace下其他项目的 .settings和.project到该项目路径下 结果Eclipse 的 Server 中出现了  aaa(bbb)的情况 并且 ...

  9. leetcode218

    from heapq import * class Solution: def getSkyline(self, LRH): skyline = [] i, n = 0, len(LRH) liveH ...

  10. 深度学习原理与框架-卷积网络细节-经典网络架构 1.AlexNet 2.VGG

    1.AlexNet是2012年最早的第一代神经网络,整个神经网络的构架是8层的网络结构.网络刚开始使用11*11获得较大的感受野,随后使用5*5和3*3做特征的提取,最后使用3个全连接层做得分值得运算 ...