JavaScript的高级函数和DOM回流

最新推荐文章于 2022-08-07 00:28:26 发布

玖商

最新推荐文章于 2022-08-07 00:28:26 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_58139900/article/details/121458033

版权

本文深入探讨JavaScript的高级函数特性，包括回调函数、自执行函数、闭包、递归和防抖节流。同时，文章还讲解了DOM回流的基本概念和优化方法，如字符串拼接、动态添加和文档碎片技术，旨在提升前端开发效率和性能。

摘要由CSDN通过智能技术生成

高级函数

回调函数

概念：将函数作为参数传递给另一个函数调用的函数（等某个动作完成后调用的函数），是解决异步操作的有效途径

字面上的理解，回调函数就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行传进去的作为参数的函数。走这个过程的参数化的函数就叫做回调函数。换个说法也就是被作为参数传递到另一个函数（主函数）的那个函数就叫做 回调函数。

栈区

主栈任务队列和等待任务队列

同步：javaScript中先执行主栈任务队列中的代码（除了以下几个异步的代码都放到主栈任务队列执行）
异步：等主栈任务队列中的代码执行完毕，再去执行等待任务队列中的代码

异步：事件,定时器, (回调函数)，Ajax请求

回调函数理解

	function title(value){//这是回调函数！！！！
			alert(value);
		}
		function main(title, value){//这个主函数:在参数列表中，title作为一个参数传递进来，也就是上文说的 参数化函数；然后value这个值正是title（）函数中所需要的。
			alert("我是主函数");
			title(value);//结果为：'我是回调函数'。——————然后在这行这个title()，它就是回调函数咯。
		}
		main(title,"我是回调函数");//title参数加上()后，就会变回一个函数，并会被执行一次。
		//PS:看清楚，调用的是main()函数，意味着先执行main()，这时已经执行了主函数，title()被main()在函数体中执行了一次，因此title()是回调函数。

 <button onClick=test()>click me</button> 
  function a(callback) {
            alert("我是parent函数a！");
            alert("调用回调函数");
            callback();
        }

        function b() {
            alert("我是回调函数b");

        }

        function c() {
            alert("我是回调函数c");

        }

        function test() {
            a(b);
            a(c);
        }

自执行函数

自执行函数自己调用自己立即执行
- 标准语法：;(function(){做的事情})();
- ;->可以有可以没有，防止前边有未执行完毕的代码

;(function(){
            console.log("哈哈");
        })();

        ~function(){
            console.log("111");
        }();

        !function(){
            console.log("222");
        }();

        +function(){
            console.log("333");
        }();

        -function(){
            console.log("444");
        }();

函数闭包

闭包的概念：一个函数嵌套另一个函数，子函数可以访问当前这个函数的局部变量，在本质上，闭包是将函数内部和函数外部连接起来的桥梁
闭包的优点和缺点：优点缓存数据，延长作用域链，优点即缺点，使用闭包需谨慎，可能导致内存泄漏
闭包的本质是形成了一个不销毁的私有作用域

全局作用域下的变量或函数只有浏览器关闭才会销毁

函数执行形成私有作用域，执行完毕自动销毁

// 闭包
function test() {
    var n = 1;
    function test1() {
        n++;
        console.log(n);
    }
    return test1;
}

var resFn = test();

resFn();//2
resFn();//3
resFn();//4
resFn();//5

闭包模拟随机数

 function test() {
            var random = Math.random();

            return function () {
                console.log(random);
            };

        }


        var resFn = test();

        resFn();
        resFn();
        resFn();