Preface

JavaScript has been used for a long time, but it has been used too much in the past, never to understand its principles, just to piece together. This kind of development has been done for two years. It's amazing that the use of JavaScript in the project hasn't met an insurmountable obstacle. It's incredible to think about it, thanks to the dependence on frameworks, which has contributed to my laziness in learning JavaScript. Only recently did I find myself hollowed out in the framework, unfamiliar with native JavaScript, and unable to answer basic questions. It's really the embarrassing situation of being out of work. I won't say much about it. After all, it's timely to find out the problem, so I'm determined to really start learning JavaScript from scratch. Tamping a good foundation is the most basic requirement for a developer, if you want to go further. This is a long march.

Let's take a look at the use and role of this in JavaScript. Previously, the understanding of this in JavaScript was simple and crude: whoever calls it points to. The principle is just like this, but it is still difficult to get a thorough understanding. In a written examination, it was very confused.

Next I'll explain the use and functionality of this by writing code snippets

this under the first common condition

        var num1 = 11;
        var num2 = 66;
        function fn1(num,num1){
            var funmber = 'I am fn1 Children! You can't control me!!'
            num = 100;
            num1 = 200;
            num2 = 300;
            console.log(funmber)// I'm a fn1 kid! You can't control me!!
            
            console.log(this.funmber)// Why did you return undefined?
                                // The reason is that when a function calls a globally undefined variable internally,
                               // this customizes a funmu variable as a global variable.
                              // The default is undefined.
            
            
            console.log('num1')
            console.log(num1)// At 200, num1 is equal to the value of num1 in the function.
            console.log(this.num1)// 11 (num1 is passed in as a parameter,
                                 // The initial value var num1 = 11 covers num1 = 200

            console.log('num2')
            console.log(num2)//300
            console.log(this.num2)// 300 (Variables in a function are not defined as global variables without var.
                                 // So this is equivalent to reassigning num2 300 to cover 66)
            
            console.log('num')
            console.log(num)//The current value of num at 100 is itself
            console.log(this.num)// Why did you return undefined?
                                // The reason is that when a function calls a globally undefined variable internally,
                               // this privately customizes a num variable as a global variable.
                              // The default is undefined.
        }
        fn1();
        console.log(num2)// 300 (Variables in a function are not defined as global variables without var.
                        //    So this time 300 covers 66)
                        
        console.log(this.num2)// 300
    
        console.log(this.num)// undefined
        
        console.log(funmber) // Because of the scope relationship, the internal can access the external, and the external can not access the internal under normal circumstances to form a closure.
                            // The definition of funmu has not been found outside.
                           // Print funmu is not defined.
                         
        console.log(num)// The definition of num is not found outside, and num is not defined

This object under the second normal condition and this under the new object

        var age = 27;
        var obj = {
            age:30,
            say: function(){
                console.log(this.age)
            }
        }
        obj.say();//30 (this.age at this point points to find in the obj object ao, so the value is 30)
        var func = obj.say;//(The obj.say method is proposed to pay func.
                          //func is a global function, so this points to global variables.
                          
        func();//27 (The method body in obj.say was paid to func after executing this method.
              // func cannot access ao inside obj. So he looks up for the global variable var age = 27)
    

        var foo = '123'
        function aa(){
            var foo = '321'
            this.foo = '456'
            console.log(foo)//The foo in console refers to the foo in aa(){} itself.
                            //this.foo refers to the variable var foo = 123. If you print this.foo, you output'456'
                            //The reason is that the initialization values are overwritten.
        }
        aa()
            
        var foo = '321'
        function pints(){
            this.foo = '123'
            console.log(foo)//The foo in console is the global variable var foo = 321.
                            //There is no variable foo in pints (), because there is no declaration.
                            //this.foo refers to var foo=321 
                            //The current value 123 covers the value 321 of the original foo declaration, so print 123
        }
        pints()
        
        var foo = '123'
        function test(){
            this.foo = '654'
            console.log(foo)
        }
        new test()//After a new test (), you can't read foo in the previous test (), only the global foo.

This object under the third normal condition and this under the new object

//    The leading function in the arrow function points to the upper scope
        var age = 26;
        var obj = {
            age:32,
            say:()=> {//The arrow function points to the upper scope
                console.log(this.age)
                console.log(age)
            }
        }
        obj.say()//All 26

//Methodology of the method
        var age = 26;
        function Person(){
            this.age = 22;
//            var age = 18;
            let say = () => {
//                var age = 19;
                console.log(this.age) // At this time, this.age points to varage = 26 in the upper scope.
                                     // The value of this.age after precompilation of the execution function covers the initial value of age
                function fu(){
                    console.log(age) // At this point, the initial value of the global variable is printed, and age is not found in Person.
                                    //  It searches up again, so it finds age=26.
                }
                fu();
            }
            say();
        }
        var x = new Person() //22 new is equivalent to Person () command

Almost all of these cases, I hope these examples can help you understand this object. If there is something wrong in the example, I would like to comment on it!!!