JavaScript高级(含ES6)-Day03 函数进阶

最新推荐文章于 2025-10-16 10:21:09 发布

原创最新推荐文章于 2025-10-16 10:21:09 发布 · 185 阅读

0 ·

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

收录于

笔记

js高级

本文详细介绍了JavaScript中定义函数的三种方法，包括命名函数、匿名函数表达式和new Function构造函数，并探讨了它们的执行效率和使用场景。此外，文章讲解了函数的六种调用方式，包括普通函数、对象方法、构造函数、事件绑定、定时器函数和立即执行函数，以及在不同场景下this的指向问题。同时，文章还讨论了如何通过call、apply和bind来改变this的指向。最后，提到了高阶函数、闭包和递归等概念，以及浅拷贝和深拷贝的区别。

函数定义方法

		//自定义函数，又称命名函数
		function one(){
            console.log("第一种定义方法");
        }
        one();
		//函数表达式，又称匿名函数
        var two = function(){
            console.log("第二种定义方法");
        }
        two();
		//利用new function（）
        var three = new Function('a','b','console.log("第三种定义方法");console.log(a+b)')
        three(1,2);

        //查看__proto__
        console.dir(three);
        console.log(three instanceof Object);

注意

第三种方法执行效率低，不怎么使用
所有的函数都是function的实例对象
函数也是对象

函数调用，6种方法

		//1.普通函数
        function one(){
            console.log("普通函数");
        }
        one();
        one.call();

        //2.对象的方法
        var two = {
            say:function(){
                console.log("对象的方法 say");
            }
        }
        two.say();
        // 3.构造函数
        function Three(){
            console.log("构造函数");
        }
        new Three();
        // 4.绑定事件函数
        var four = document.querySelector("button");
        four.onclick = function(){
            console.log("绑定事件");
        }
        // 5.定时器函数
        var five = setInterval(function(){
            console.log("定时器函数");
        },1000)
        clearInterval(five);
        // 6.立即执行函数
        var six = (function(){
            console.log("立即执行函数");
        })()

this指向问题

		//1.普通函数
        //this指向window
        function one(){
            console.log("普通函数");
        }
        one();
        one.call();

        //2.对象的方法
        //this指向调用它的对象 two
        var two = {
            say:function(){
                console.log("对象的方法 say");
            }
        }
        two.say();

        // 3.构造函数
        //指向实例对象 ldh
        //原型对象里面的this指向也是实例对象 ldh
        function Three(){
            console.log("构造函数");
        }
        var ldh = new Three();

        // 4.绑定事件函数
        //this指向绑定者，four
        var four = document.querySelector("button");
        four.onclick = function(){
            console.log("绑定事件");
            console.log(this);
        }

        // 5.定时器函数
        //this指向绑定者，five；也可以指向window
        var five = setInterval(function(){
            console.log("定时器函数");
        },1000)
        clearInterval(five);

        // 6.立即执行函数
        //此刻this指向window
        (function(){
            console.log("立即执行函数");
        })()

改变this指向的方法

	<button>bind</button>
    <script>
        // 1.call() 既可以调用函数，又可以改变函数内的this，主要作用靠继承

        //2.bind() 不回调用函数，可以改变this指向      使用较多
        //返回的是原函数改变this的新函数
        var bind={
            name:"andy"
        }
        function dnib(){
            console.log(this)
        }
        var b = dnib.bind(bind);
        b();
        //举例，当有些函数不需要立即调用，但是又需要改变内部this指向，就可以使用bind()
        var btn = document.querySelector('button');
        btn.onclick = function(){
            this.disabled = true;
            // 不使用bind
            // var that = this;
            // setInterval(function(){
            //     that.disabled = false;
            // },3000)
            // 使用bind
            var that = this;
            setInterval(function(){
                this.disabled = false;
            }.bind(this),3000)//这里的this指向的btn这个对象
        }
    </script>

区别

call()和apply()相似，但是传参不一样；
call()传递参数arg1、arg2，而apply()必须以数组形式；
bind()不会直接调用函数；
call做继承，apply用在数组类函数，bind用在不调用但是需要改变this指向。

高阶函数

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

function fn(callback){
	callback&&callback();
}

闭包（closure）指有权访问两一个函数作用域中变量的函数。
闭包的作用：延伸了变量的作用范围
递归：在内部调用自身的函数

浅拷贝：碰到深层的数据，只复制它的地址
es6新增了浅拷贝方法：Object.assign(new,old)
深拷贝：直接复制全部内容，新老函数互不影响。

标签

#javascript