JS函数高级1.回调函数2.自执行函数3.函数闭包4.全局污染5.函数递归6.防抖7.节流8.call和apply

1.回调函数

所谓回调函数，就是一个基本函数执行完成后，回头再去调用其他函数

function move() {
	setTimeout(function() {
		console.log('元素移动')
	},1000)
}
function fn() {
	console.log(1)
}
move()
fn()
//运行结果 1 元素移动

回调函数

function move(fn) {
	setTimeout(function() {
		console.log('元素移动')
		fn()
	},1000)
}
function fn() {
	console.log(1)
}
move(fn)

为什么需要回调函数：函数执行过程中，出现了延迟操作，按照代码的前后顺序执行函数并不能得到想要的结果，此时可以通过回调函数的方式，规范执行顺序

2.自执行函数

自执行函数就是在声明函数的同时直接执行函数内部代码的一种特殊的函数，即函数的声明和执行同步进行
由于自执行函数的特殊性，多以一般在网页加载的时候需要执行的函数或者只执行一次的函数都可以使用自执行函数，主要用于初始化数据/顺被数据（特效、事件等）

自执行函数标准语法
注：自执行函数标准语法中，使用了一对（）包含了函数的声明，所以在自执行函数的上一行代码的末尾必须使用分号显式的结束上一行代码，否则自执行函数会被当成是上一行代码中未结束的代码解释，容易出现语法错误

(function fn(){
	conlose.log('函数执行了')
})()

自执行函数扩展语法

(function(){
	console.log('函数执行了')
}())
+(function(){
	console.log('函数执行了')
})()
~(function(){
	console.log('函数执行了')
})()
-(function(){
	console.log('函数执行了')
})()
！(function(){
	console.log('函数执行了')
})()
true && (function(){
	console.log('函数执行了')
})()

3.函数闭包

一个函数的内部，声明了另一个函数，内部函数使用了外部函数中的变量，称为函数的闭包
基本语法

function outer() {
	var a = 'outer'
	function inner() {
		console.log(a)
	}
	return inner
}
var res = outer()
res()

注：没有必要的情况下，尽量不要使用闭包，因为闭包函数会导致函数常驻内存，如果非要使用闭包一定要注意，在使用后将闭包相关的变量等数据及时销毁

4.全局污染

在全局作用域中，不同业务流程中出现了相同名称的变量或者函数，导致变量和函数中出现了覆盖的情况，使用变量和函数时，失去了原有的数据，这种数据冲突称为全局污染

不同功能的代码，封装在不同的js文件中，多个js文件引入到了一个html文件中
不同的功能，在一个js文件中，由于代码量过大，导致可能出现相同名称的变量或者函数

5.函数递归

所谓递归，就是函数自己调用自己
区分为两个步骤（传递、调用/返回）

递归调用，就是函数层面的循环，比循环更加消耗内存空间

function fn() {
	return fn()
}

案例：计某个数据的阶乘

function fn（n）{
	if(n<=1) return 1
	return n * fn(n-1)
}
fn(6)

案例：计算n位斐波那契数列值

function feibo(n) {
	if(n<=2) {
		return 1
	}
	return fiebo(n-1) + feibo(n-2)
}

6.防抖

网页中经常出现一些让用户频繁操作的事件，这种频繁的事件操作称为抖动，抖动会造成服务器压力骤升

阻止页面中事件抖动的操作方式，称为防抖
让用户再一个间隔时间段内，只发生一次有效操作
如果用户在间隔时间范围内频繁操作，后续所有操作全部失效

防抖的实现
延迟触发事件的防抖效果

var btn = document.querySelector('button')

        function fangdou(fn, wait) {
            var timer;
            return function() {
                timer && clearTimeout(timer)
                timer = setTimeout(function() {
                    fn()
                    timer = null
                }, wait)
            }
        }
        btn.onclick = fangdou(function() {
            console.log('用户点了按钮')
        }, 1000)

立即触发事件的防抖效果

    function fangdou(fn, wait) {
           var timer, flag = true
           return function() {
               timer && clearTimeout(timer)
               flag = !timer
               timer = setTimeout(function() {
                   timer = null
               }, wait)
               flag && fn()
           }
       }

7.节流

用户在页面上过于频繁的操作某个事件，导致服务器压力过大，页面中需要通过脚本的形式让用户的操作间隔一定的事件生效一次

节流的实现

基于时间戳的是实现方式，立即执行

  function jieliu(fn, wait) {
           var a = 0;
           return function() {
               var now = new Date()
               if (now - a > wait) {
                   fn()
                   a = now
               }
           }
       }

使用延时函数实现的节流：延迟执行

    function jieliu(fn,wait) {
           var timer;
           return function() {
               if(!timer) {
                   timer = setTimeout(function(){
                       fn()
                       timer = null
                   },wait)
               }
           }
       }

8.call和apply

Javascript语法中，提供了两个特殊的函数，可以改变函数中调用时this的指向

基本语法

fn.call(对象,...参数)
fn.apply(对象,[...参数])

最后

以上就是喜悦流沙为你收集整理的JS函数高级1.回调函数2.自执行函数3.函数闭包4.全局污染5.函数递归6.防抖7.节流8.call和apply的全部内容，希望文章能够帮你解决JS函数高级1.回调函数2.自执行函数3.函数闭包4.全局污染5.函数递归6.防抖7.节流8.call和apply所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。