0
点赞
收藏
分享

微信扫一扫

【JavaScript 进阶教程】函数的定义 调用 及 this指向问题

罗子僧 2022-09-22 阅读 216

文章目录:

一:函数的定义 

1.1 命名函数 

1.2 匿名函数 

1.3 利用 new Function() 声明函数

1.4 重要结论

 二:函数的调用

2.1 普通函数调用

2.2 立即执行函数调用

2.3 对象内方法调用

2.4 构造函数调用

2.5 事件函数的调用

2.6 定时器函数的调用

 三:各个函数的内部this指向问题


一:函数的定义 

1.1 命名函数 

    <script>
        function fn(){
            console.log('我是命名函数');
        }
        fn()
    </script>

 


1.2 匿名函数 

    <script>
    //立即执行函数来调用匿名函数
       (function(a,b){     
           console.log(a+b);
       })(1,2)

    //绑定事件来使用匿名函数
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('我是绑定事件使用的匿名函数');
       })
    </script>


1.3 利用 new Function() 声明函数

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(2,3)
    </script>


1.4 重要结论

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(1,3)
         console.dir(fn instanceof Object)
    </script>

 


 二:函数的调用


2.1 普通函数调用

    <script>
        function fn(){
            console.log('我是一个普通函数的调用');
        }
        fn()
        fn.call()
    </script>


2.2 立即执行函数调用

    <script>
        (function(){
            console.log('立即执行函数调用了');
        })()
    </script>


2.3 对象内方法调用

    <script>
        var obj={
            fn:function(){
                console.log('对象内的方法调用了');
            }
        }
        obj.fn()
    </script>


2.4 构造函数调用

    <script>
        function Animal(){}
        new Animal()
    </script>

2.5 事件函数的调用

    <script>
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('事件对象调用了');
       })
    </script>

2.6 定时器函数的调用

    <script>
      window.setInterval(function(){
        console.log('定时器函数触发了');
      },1000)
    </script>


 三:各类函数的内部this指向问题

函数类型this 的指向

普通函数调用

window

立即执行函数调用

window

对象内方法调用

该方法的所属对象

构造函数调用

通过构造函数创建的实例化对象

事件函数调用

绑定事件的对象

定时器函数调用

window
举报

相关推荐

0 条评论