The pointing of this in the WeChat applet and changing the pointing of this

I have summarized the function context this before  

Here is a brief talk about the this point involved in the applet and how to change the this point

the point of this

Overview

In JavaScript this is a specific keyword, it always points to an object, and this also has a special meaning, called execution context, which represents the executor of the function. to sum up

• this refers to an object
• The point of this is only related to the execution of the function, and has nothing to do with the definition of the function.

This under the global

• This under the global point to window

//window
console.log( this )
function fn () {
    console.log( this )
}
//window
fn()

This in object method

Functions can be used as value transfer and return in js, as well as objects and constructors. All functions need to determine their current operating environment when running, and this is born. Therefore, this will change according to the changes in the operating environment. At the same time, the this in the function can only finalize the operating environment at runtime. The above summary is summarized in one sentence:

• The this in the function can only determine the point of this at runtime, and the point of this cannot be determined when the function is defined.

function fn () {
    console.log(this.a)
}
var obj = {
    a:12,
    fn:fn
}
var a = 22
//12
obj.fn()
//22
fn()

The executor of the fn function in obj.fn() is obj, so the obj pointed to by this function will print 12. While fn() is executed, its executor is window, so the a printed in the function is a under window, so the printed result is 22

var A = {
    name: 'zhangsan',
    f: function () {
        console.log('姓名：' + this.name);
    }
};
var B = {
    name: 'lisi'
};

B.f = A.f;
B.f()   
A.f() 

When Bf() is executed, its executor is the B object, so "lisi" is printed. When Af() is executed, its executor is A, so "zhangsan" is printed. Through the above case summary

• When the function is executed, look at whether there is a dot (.) in front of it. If it is a bit, the executor of the function is the object in front of it, and if there is no dot, the executor of the function is the window.

function foo() {
    console.log(this.a);
}
var obj2 = {
    a: 2,
    fn: foo
};
var obj1 = {
    a: 1,
    o1: obj2
};
obj1.o1.fn(); // 2

Who is the executor of the function, then who is the this in the function. For this case, the continuous point operation adopts the principle of proximity, then the executor of the function is o1, and o1 itself is the object of obj2, so this in the function points to obj2 , So the result is 2.

During the development process, there are about five common this problems:

1. Method in object
2. Event binding
3. Constructor
4. Timer
5. The call() and apply() methods of function objects

How to change this point

Solve this point by declaring variables in advance.

var a = 3
var obj1 = {
    a:1
}
var obj2 = {
    a:2,
    fn:function(){
        var that = this
        setTimeout(function(){
            console.log(that.a)	
        },0)
    }
}
obj2.fn() //1

Solve this point problem through call and apply functions

var obj = {
    a:1
}
var obj2 = {
    a:2,
    fn:function(){
        console.log(this.a)	
    }
}
obj2.fn.call(obj) //1

var obj = {
    a:1
}
var obj2 = {
    a:2,
    fn:function(){
        console.log(this.a)	
    }
}
obj2.fn.apply(obj) //1

Modify the this point by using the bind() function at the end of the function when defining the function.

var obj = {
    a:1
}
var obj2 = {
    a:2,
    fn:function(){
        console.log(this.a)	
    }.bind(obj)
}
obj2.fn() //1