1: Four binding rules

Priority from high to low
1: new binding

var o = {
    m: function(){
        return this;
    }
}
var obj = new o.m();//obj is a newly generated object
console.log(obj,obj === o);//{} false
console.log(obj.constructor === o.m);//true

2: Show bindings
Implemented by call apply bind

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

3: Implicit binding

function foo(){
    console.log(this.a);
};
var obj1 = {
    a:1,
    foo:foo,
}
//The direct object of foo() function is obj 1, which is implicitly bound to obj 1
obj1.foo();//1

4: Default binding

//Although the test() function is nested in the obj.foo() function, the test() function is a stand-alone call, not a method call. So this is bound to window by default
var a = 0;
var obj = {
    a : 2,
    foo:function(){
            function test(){
                console.log(this.a);
            }
            test();
    }
}
obj.foo();//0

2: Arrow function binding

The binding rule of arrow function is only related to scope, and arrow function will inherit this binding of outer function call

3: Function nesting

There is no this inheritance relationship between internal and external functions in function nesting,
Method nested inner method inherits this point of the outer function.

function f3() {
    console.log('f3 this',this);//Global object
}

export default class Page1 extends Component {
    constructor(props){
        super(props);
    }

    test=()=>{
         //Arrow function pointing inside Page1  class
        console.log('test this',this);
        let obj={
            f1:function () {
                console.log('obj f1 this',this); // point obj
                function f() {
                    console.log('obj f this',this);
                }
                f();   //Nesting of function does not existthisWithin inheritance of f And external f1 It's independent, so it's internal f External to global object f1 point obj object
                f3();//Embedded function does not existthisSo the f3 Is a global object
                this.f2(); //The nesting of methods is inheritablethisThat is, the internal method can inherit the external method'sthis
            },
           f2:function () {
                console.log("obj f2 this",this)
            }
        }
        obj.foo();
    };

    test2(){
        //It's not an arrow function that points to the object that calls it. Here it is touch assembly
        console.log('test2 this',this);
        // this.countdown();//Report errors
    }
    countdown(){
      console.log('countdown this',this);
    }

    render(){
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.touchstyle} activeOpacity={0.7} onPress={this.test}>
                    <View style={styles.viewstyle}>
                        <Text style={{fontSize:FONT(39/2),backgroundColor:'transparent',textAlign:'center'}}>test</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.touchstyle} activeOpacity={0.7} onPress={this.test2}>
                    <View style={styles.viewstyle}>
                        <Text style={{fontSize:FONT(39/2),backgroundColor:'transparent',textAlign:'center'}}>test2 thispoint touch assembly</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }

Reference resources: http://www.cnblogs.com/xiaohuochai/p/5735901.html