1:4 kinds of binding rules
Precedence from highest to lowest order
1:new binding
var o = {
m:function () {return this
;
}
}
var obj = new o.m ();//obj for the newly generated object
console.log (obj,obj = = O);//{} false
Console.log (obj.constructor = = O.M);/ True
2: Show Bindings
Implement with 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 the//foo () function is obj1,this implicitly bound to Obj1 Obj1.foo
();//1
4: Default Bindings
Although the test () function is nested within the Obj.foo () function, the test () function is a stand-alone call, not a method call. So this is bound to window
var a = 0 by default;
var obj = {
a:2,
foo:function () {
function test () {
console.log (THIS.A);
}
Test ();
}
}
Obj.foo ();//0
Two: arrow function binding
The binding rule for the arrow function is only relevant to the scope, and the arrow function inherits the this binding of the outer function call Three: function nesting
internal and external functions in a function nesting are independent calls without this inheritance relationship,
Method nested internal methods inherit the this point of the external function.
Function F3 () {Console.log (' F3 this ', this);//Global Object} Export default class Page1 extends Component {constructor (p
Rops) {super (props);
The test= () =>{//arrow function points internally to Page1 class Console.log (' Test this ', this); Let obj={f1:function () {console.log ("obj F1 this", this);//point to obj function
F () {Console.log (' obj f this ', this); } f ();
The nested function does not exist the inheritance internal F and external F1 are independent of each other so the internal F global Object external F1 points to the Obj object F3 (); The inheritance of this is not present in the inline function, so the F3 is called the Global object This.f2 (); A method's nesting is an internal method that can inherit this, which can inherit this from an external method, F2:function () {console.log ("obj F2 this"
, this)}} obj.foo ();
};
Test2 () {//Not the arrow function points to the object that calls it here for the touch component Console.log (' Test2 this ', this);
This.countdown ()//Error} countdown () {Console.log (' Countdown this ', this);
} render () { Return (<view style={styles.container}> <touchableopacity Style={styles.touch
Style} 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={styl
Es.touchstyle} activeopacity={0.7} onpress={this.test2}> <view style={styles.viewstyle}> <text Style={{fontsize:font (39/2), backgroundcolor: ' Transparent ', textAlign: ' Center '}}>test2 This means To touch Components </Text> </View> </TouchableOpacity> </view>
;
)
}
Reference: http://www.cnblogs.com/xiaohuochai/p/5735901.html