JS的高阶函数

原创已于 2022-11-14 13:50:08 修改 · 895 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

于 2022-01-04 17:40:24 首次发布

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

本文探讨JavaScript中的高阶函数概念，包括如何使用函数作为参数和返回值。接着，解释了JavaScript的单线程执行机制和事件循环，阐述了同步任务和异步任务的处理方式，特别是回调函数在异步编程中的作用。此外，还深入讨论了闭包的概念，它的应用场景如防抖和节流，并介绍了caller和callee属性在函数调用中的角色。

高阶函数

高阶函数是对其他函数进行操作的函数，他接收函数作为参数或将函数作为返回值输出

    function fn(callback) {
        callback && callback()
    }
    fn(function () {}) //回调函数

	function fn() {
	   return function(){} //返回函数
	}
	fn()

此时fn就是一个高阶函数，函数也是一种数据类型，传递给另一个参数使用，最典型就是回调函数

回调

JS执行机制

概念

js语言是单线程语言

线程：将进程分割成多个小内存空间，每个小内存空间可以做一件事 - 小内存空间 - 线程
进程：程序执行需要用到的内存空间
协程：更小的线程

js只有一个小一点的内存空间在执行他的代码，异步代码就是同时进行的代码

js单线程是如何处理异步代码的？

js在处理异步代码的时候，会将异步代码交给浏览器去处理 - 浏览器是多线程软件
此时：浏览器正在执行异步代码，js中的同步代码正在js线程中执行
js线程会优先执行同步代码 - 先将所有的同步代码都执行完

当浏览器中的异步代码，到了该执行的时候了，也不会立马交给js线程处理，
会将需要执行的代码，放在一个队列中等待

js线程将同步代码执行完成以后，才会去队列中，找是否有需要执行的代码，
如果有，就将第一个拿出来执行，第一个执行结束后，再看是否还有需要执行的代码

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS异步是通过回调函数实现

异步任务三种类型

1.普通事件：click，resize等

2.资源加载：load、error等

3.定时器：包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

当有异步任务时，提交给对应的异步进程处理(webAPI),处理完推入任务列表，主线程执行完毕会查询任务队列，取出一个任务，推入主线程处理。

由于主线程不断的重复获得任务、执行任务、在获取任务、再执行，这种机制称为事件循环(even loop)。

回调函数

把一个函数当成另一个函数的参数(实参) 这种写法就是回调函数

回调函数的作用：用于获取异步代码执行的结果

同步代码

从上到一条一条代码执行，想要后面的代码执行，必须等待前面的代码执行完成才能之后面代码

异步代码

异步代码需要一定时间执行，同步代码不会等待你异步代码执行的结果

闭包

闭包colsure

函数的执行空间会在函数执行完毕之后销毁，

但是，一旦函数内部返回了一个引用数据类型，并且在函数外部有变量接受的情况下那么这个函数执行空间就不会销毁了

函数外面的作用域可以访问函数内部的局部变量，但必须要时刻保持引用，导致函数执行栈不被销毁

延伸了变量的作用范围，增加了变量的生命周期，

可以把一些变量放在函数里面，不会污染全局，但要利用闭包函数才能访问，不是很方便

闭包的缺点：函数内定义的变量在函数执行完不会销毁，会一直占用内存，造成内存泄漏

重点

有一个 A 函数，再 A 函数内部返回一个 B 函数
再 A 函数外部有变量引用这个 B 函数
B 函数内部访问着 A 函数内部的私有变量
以上三个条件缺一不可

闭包应用

防抖

当js中事件触发频率太高且不需要时，可以通过限制触发来节省性能

如mousemove事件 scroll事件等，只触发一次

var timerId
window.onmousemove =function(){
  var e = window.event
  clearInterval(timerId)
  timerId = setTimeout(function(){
    var x = e.pageX
    var y = e.pageY
    console.log(x,y);
  }, 100)
}

此时因为需要删除定时器，所以需要将timerId定义到全局中，会污染全局（被全局污染）

window.onmousemove = fn(1000)

function fn(time){
  var timerId
  return function(){
    var e = window.event
    clearInterval(timerId)
    timerId = setTimeout(function(){
    var x = e.pageX
    var y = e.pageY
    console.log(x,y);
  }, time)
  }
}

将定时器定义到函数内通过局部的局部对局部进行操作

节流

当js中事件触发频率太高且需要持续进行输出时，可以通过减少事件的触发频率来节省性能

window.onmousemove = fn(2000)

function fn(time){
  var now = +new Date()
  return function(){
    var e = window.event
    var newNow = +new Date()
    if(newNow - now >= time){
      var x = e.pageX
      var y = e.pageY
      console.log(x,y);
      now = newNow
    }
  }
}

通过时间戳来限制事件触发频率，代码执行时把时间存在now中，每次鼠标移动执行return出来的函数跟now进行比较，满足条件执行函数并把新的事件赋值给now从而实现两秒输出一次

caller callee

caller是指向调用当前函数的函数，比如b函数调用a函数，那么a.caller则是b的引用

callee是arguments的一个属性，指向其函数自身，比如在a函数中，arguments.callee就是a，这个特性可以用来计算正整数的阶乘，x*arguments.callee（x-1）也可以用来比较实参和形参，arguments.length和arguments.callee.length。