[JavaScript Advanced Tutorial] Function definition call and this pointing to the problem

This article starts the advanced chapter of our functions, and has a lot of expansions with the functions of our JavaScript basics. In this article, first of all, we will make a summary from the definition, call, and this point of the function. 

Article directory:

One: the definition of the function 

1.1 Named functions 

1.2 Anonymous functions 

1.3 Declare a function with new Function()

1.4 Important conclusions

 Two: function call

2.1 Ordinary function call

2.2 Immediately execute function calls

2.3 Method calls within objects

2.4 Constructor call

2.5 Calling the event function

2.6 Calling the timer function

 Three: The internal this of each function points to the problem

---

One: the definition of the function 

There are three ways to define functions: 1. Named functions, 2. Anonymous functions, and 3. Created using new Function().

1.1 Named functions 

Named functions are our most common way of declaring functions, also known as custom functions

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

 

---

1.2 Anonymous functions 

An anonymous function is a function without a name. The call of the anonymous function needs to use the immediate execution function , and the anonymous function is also used when binding the event.

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

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

---

1.3 Declare a function with new Function()

Another uncommon method of function declaration is new Function(), which we know is a constructor. However, because this method is cumbersome and cumbersome, and if the execution function also needs to convert the language format into a recognizable scripting language, so instead of declaring functions in this way, you only need to know that  all functions are instantiated objects of the Function constructor ( The conclusion will be said later)

---

The parameter format is:

• new Function('parameter 1', 'parameter 2', 'parameter 3', ... , 'function body)

(Note that the parameters are all in the form of strings)

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

---

1.4 Important conclusions

Through the declaration method of the third function just now, it is a constructor, what will we think of, why does the function also have a constructor, is the function also an object? Yes, let's check next

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

 

in conclusion:

      In this regard, we know that functions are also objects, and we can get the following relationship

• functions belong to objects
• All functions are instantiated objects of the Function constructor

---

 Two: function call

Function calls are divided into the following six cases:

• normal function call
• execute function call immediately
• In-object method call
• constructor call
• event function call
• timer function call

---

2.1  Ordinary function call

Ordinary function calls can be called directly by writing the function name, or by using the call() method.

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

---

2.2  Immediately execute the function call

Immediately executed functions are usually used for anonymous function calls. Immediately executed functions are automatically called

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

---

2.3  Method calls within objects

In- object method calls only need : instantiated object name. method name

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

---

2.4  Constructor call

The invocation of the constructor only requires the new instantiated object to be invoked

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

---

2.5 Calling the event function

The event object call needs to trigger the event to call

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

---

2.6 Calling the timer function

The function in the timer is automatically called after the time expires

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

---

 Three: The internal this of various functions points to the problem

We only know who this inside the function points to when we call it. Generally speaking, it points to the caller of the function. The following is the this pointer of several functions that appeared in the previous section.

function type	the pointer to this
normal function call	window
execute function call immediately	window
In-object method call	The object to which the method belongs
constructor call	instantiated objects created through constructors
event function call	The object to which the event is bound
timer function call	window

 The above is the content of the first section of advanced function, it is not easy to create, please support it! !