Preface

Let's do a little test first. If all the answers are right, congratulations, you don't have to look down.

Topic 1

<script>
    var str = 'zhangsan';

    function demo() {
        var str = 'lisi';
        alert(this.str);
    }
    window.demo(); // ??

    var obj = {
        str: "wangwu",
        say: function() {
            alert(this.str);
        }
    }
    obj.say(); // ??

    var fun = obj.say;
    window.fun(); // ??
</script>

Question 2

<script>
    var username = 'zhangsan';

    (function() {
        var username = 'lisi';
        alert(this.username); // ??
    })()

    function demo() {
        var username = 'wangwu';

        function test() {
            alert(this.username);
        }

        test(); // ??
    }
    demo();
</script>

Question 3

<script>
    function Person() {
        this.username = 'zhangsan';
        this.say = function() {
            alert('My name is' + this.username);
        }
    }

    var p = new Person();
    p.say(); // ??

    var p1 = new Person();
    p1.say(); // ??
</script>

Question 4

<script>
    var username = 'zhangsan';

    function demo() {
        alert(this.username)
    }

    var obj1 = {
        username: "lisi"
    };
    var obj2 = {
        username: "wangwu"
    };

    demo(); // ??
    demo(obj1); // ??
    demo(obj2); // ??
    demo.call(obj1); // ??    
    demo.apply(obj2); // ??
</script>

Answer

Topic 1: zhangsan wangwu zhangsan
 Second question: zhangsan zhangsan
 Question 3: My name is zhangsan and my name is zhangsan
 Chapter 4: Zhangsan Zhangsan Lisi Wangwu
 (Looking down, here's a detailed analysis.)

this

1. Objects that point to calling functions

2. Objectless Call Function/Anonymous Function Self-Call (this points to window)

3. Objects generated through new

4. apply/call call call call

I. Objects pointing to calling functions

<script>
    // this: Points to the object calling the function
    var str = 'zhangsan';

    function demo() {
        var str = 'lisi';

        //this->window
        console.log(this);
        alert(this.str);
    }
    window.demo(); // zhangsan

    var obj = {
        str: "wangwu",
        say: function() {
            // this->obj
            alert(this.str);
        }
    }
    obj.say(); // wangwu

    var fun = obj.say;
    window.fun(); // zhangsan
</script>

• The global function (demo) belongs to the method of the window object. Windows calls demo so this points to window.

• When obj calls the say method, this points to obj

• fun() is a global function, and the declared fun receives a simple function in obj, not a call (obj.say() is the call function), then fun is a function (function(){alert(this.str);}), so when fun() calls a function, this point is window.

• Who calls the function, then this points to who

2. Objectless Call Function/Anonymous Function Self-Call - > This Points to window

<script>
    // 2. Anonymous function self-execution | Anonymous function | No main function this - > window
    var username = 'zhangsan';

    // Anonymous functions self-execute this - > window
    (function() {
        var username = 'lisi';
        console.log(this); // window
        alert(this.username); // zhangsan
    })()

    function demo() {
        var username = 'wangwu';

        // No main function this - > window
        function test() {
            // this->window
            alert(this.username);
        }

        test(); // zhangsan
    }
    demo();
</script>

• Because the anonymous function has no name, it's hung up to window s

• test(), who calls test, then points to whom. Of course, it's not called by windows or demo. If nobody cares about it, it points to window. It is equivalent to a call without a master, no main function.

3. Objects generated through new

<script>
    // 3. Objects through new: this points to the generated object
    // function
    function Person() {
        // attribute
        this.username = 'zhangsan';
        // Method
        this.say = function() {
            // this->p
            console.log(this); // Person object
            alert('My name is' + this.username);
        }
    }

    // Instantiate an object: p has username attributes and say methods
    var p = new Person();
    console.log(p); // Person object
    console.log(p.username); // zhangsan
    p.say(); // My name is zhangsan

    // this->p1
    var p1 = new Person();
    p1.say(); // Person object my name is zhangsan
</script>

• When we use this format to write attributes and methods in Person, we need to use new to make attributes and methods valuable, and new to use attributes and methods in functions.

IV. Application/call call call

Let's first understand what apply()/call() is.

apply()/call(): Ultimately, the function is called, except that the internal this points to thisObj

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

Be careful:
1. Call the function function function, but this in the function points to thisObj (change the internal pointer of the object)
2. If thisObj does not pass parameters, it defaults to global objects.
3. call()/apply() Connections and Differences
    Connection: Functionally the first parameter is thisObj
    Difference: If more parameters are passed
        The arguments for call() are listed one by one.
        The arguments for apply() are all placed in the second array parameter
        
        

An example of understanding apply()/call():

<script>
    // apply()/call()
    function demo() {
        console.log(123);
    }

    // When calling a function, demo.call()/demo.apply() will eventually call demo().
    demo(); // 123
    demo.call(); //123
    demo.apply(); // 123
</script>

<script>
    // The difference between call()/apply():
    // call() parameters are listed separately in call
    // The parameters of apply() are represented by arrays
    function demo(m, n, a, b) {
        alert(m + n + a + b);
    }
    demo(1, 5, 3, 4); // 13
    demo.call(null, 1, 5, 3, 4); // 13
    demo.apply(null, [1, 5, 3, 4]); // 13
</script>

The fourth usage example of this

<script>
    // The fourth use of this: call(obj)/apply(obj): mandatory pointing this to obj
    var username = 'zhangsan';

    function demo() {
        alert(this.username)
    }

    var obj1 = {
        username: "lisi"
    };
    var obj2 = {
        username: "wangwu"
    };

    // call()/apply(): Robbery changes the direction of this
    demo(); // zhangsan
    demo(obj1); //zhangsan
    demo(obj2); //zhangsan
    demo.call(obj1); // lisi    
    demo.apply(obj2); // wangwu
</script>

• If you call demo directly, whether it's obj1 or obj2, then demo still belongs to window call.

• Whether you call or apply the demo function, they force this to point to obj1/obj2, and force it to point to their first parameter object.