How do I determine if this points to

This refers to whoever calls it

1. Normal function (this refers to window)

        var age=18;
        function fn(){
            console.log(this);
        }
        fn()//Window {Window: Window, self: Window, document: document, name: ", location: location,... }
Copy the code

Fn () equals window.fn(), so this refers to window

2. Arrow function

        var age=19;
        var arrow=() = >{
            var age=20;
            console.log(this.age);
        }
        arrow()/ / 19
Copy the code

The arrow function’s this depends on its parent scope, otherwise it is global (window)

3. Object function (this refers to the object to which the method belongs)

Ordinary functions in a layer of objects

        var name='Joe'
        var obj={
            name:"Bill".say:function (){
                console.log(this.name);
            }
        }
        obj.say()/ / li si
        / * * * * * * * * * * * * * * * * * * * * * * * * /
        
Copy the code

Obj calls say(), so this refers to obj

Arrow functions in a layer object

        var name='Joe'
        var obj={
            name:"Bill".say:() = >{
                console.log(this.name);
            }
        }
        obj.say()/ / zhang SAN
Copy the code

The arrow function in the first level object, the arrow function this points to depends on the parent scope, the parent here is the object, the object has no scope and is now global, so keep looking up and find global

Ordinary functions in a two-tier object

        var name='Joe'
        var obj={
            name:"Bill".say:function (){
                console.log(this.name);
            },
            secondObj: {name:"Fifty".say:function (){
                    console.log(this.name);
                }
            }
        }
        obj.say();/ / li si
        obj.secondObj.say()/ / Cathy
Copy the code

Just like a normal function on the first level, it points to whoever is called

Arrow functions in a two-tier object

        var name = 'Joe'
        var obj = {
            name: "Bill".say: () = > {
                console.log(this.name);
            },
            secondObj: {
                name: "Fifty".say: () = > {
                    console.log(this.name);
                }
            }
        }
        obj.say();/ / zhang SAN
        obj.secondObj.say()/ / zhang SAN
Copy the code

Similarly with the arrow function of the first function object, the this of the arrow function depends on the scope of the parent, which is when the object does not go any further up and finally finds the global

Object returns normal methods

        var age=18;
        var obj={
            age:"19".say:function (){
                return function (){
                    console.log(this.age);
                }
            }
        }
        obj.say()/ / ƒ () {the console. The log (enclosing age); }
        obj.say()();/ / 18
Copy the code

Obj.say () returns a method, so an additional () is executed. When executed, the method is equivalent to being called globally, so this points to the global. But it essentially returns a method from an object in order to use properties in the object.

        var age=18;
        var obj={
            age:"19".say:function (){
                var that=this
                return function (){
                    console.log(that.age);
                }
            }
        }
        obj.say()/ / ƒ () {the console. The log (that. Age); }
        obj.say()();/ / 19
Copy the code

Before the function returns, we get this to obj by that, so the result is 19 here

Object returns the arrow method

        var age=18;
        var obj={
            age:"19".say:function (){
                return  () = >{
                    console.log(this.age);
                }
            }
        }
        obj.say()/ / ƒ () {the console. The log (enclosing age); }
        obj.say()();/ / 19
Copy the code

This of the arrow function points to the parent scope, so the parent of the arrow function here is function, so function will form the scope, and this of the function scope points to obj, so the arrow function points to obj

4. Constructor

Ordinary constructor

        function Person(name,age){
            this.name=name;
            this.age=age
        }
        var zs=new Person('Joe'.18)
        console.log(zs);//Person {name: 'zhang3 ', age: 18}
        
        / * * * * * * * * * * * * * * * * * * * * * /
        function Person(name,age){
            this.name=name;
            this.age=age;
            var obj={
                age:10
            }
            return obj
        }
        var zs=new Person('Joe'.18)
        console.log(zs);//{age: 10}
Copy the code

In the absence of a return, this refers to the instantiated object, and in the absence of a return, this refers to the returned object

The method in the constructor

        var name = 'Joe'
        function Person() {
            this.name = 'bill';

            this.commonFn = function () {
                console.log(this);
            }
            this.arrowFn = () = > {
                console.log(this); }}var number = new Person()
        number.commonFn();//Person {name: '李四', commonFn: ƒ, arrowFn: ƒ}
        number.arrowFn()//Person {name: '李四', commonFn: ƒ, arrowFn: ƒ}

Copy the code

The normal method in the constructor, this, points to the instance after the constructor new. The arrow function still looks for the parent scope, which is Person(). The method has its own scope, so the arrow function points to Person