A question about the js this keyword

So I would like to share with you the following:
Run the following js Code first
<Script>
Foo = {
'Bar': function (){
Alert (this );
},
'Tostring': function (){
Return 'foo ';
}
};
Foo. bar (); // The returned value is "foo"
(Foo. bar) (); // The returned result is "[object Window]".
(Foo. bar | null) (); // The returned result is "[object Window]".
Bar = foo. bar; bar (); // The returned result is "[object Window]".
</Script>

My explanation of the code here:

Foo. bar (); // print foo
// 1. alert implicitly calls the toString method, converts it to a string, and overwrites the toString method in foo. Therefore

(Foo. bar) (); // print foo
// 2. The execution is the same as above

(Foo. bar | null )();
/*
3. There are different effects in IE6.0, Mozilla Firefox1.5.0.7 and Opera9.0. Both IE and Opera are objects, and Mozilla is foo.
For the moment, let's not talk about the JS Methods |, which is related to this in the bar method and the | Operator. After |
Here this is no longer a window. The function of this keyword should be dynamic association rather than static association according to C ++'s understanding. In our common example
<Script>
(Function (){
This. div = document. createElement ("div"); div. innerHTML = "never-online ";
Document. body. appendChild (div );
This. div. onclick = function (){
Alert (this. tagName); // here this is the this in the div instead of the anonymous function.
}
})()
</Script>
That is to say, the scope of this is not a foo object, but a global scope. Therefore, alert (this) is equivalent to alert (window );
Therefore

BTW: It may be | the operator is to convert the execution of two expressions to a global comparison. Therefore, in IE and Opera, here (foo. bar | null) returns a global reference, namely:
'Bar': function (){
Alert (this); // this is already global. this is global, that is, window.
},
For details, I will add a piece of code at the end of the article to illustrate
*/

Bar = foo. bar; bar (); // The returned result is "[object Window]".
/* 4.
Here, IE6.0, Mozilla Firefox1.5.0.7, and Opera9.0 all share the same object. If you understand the above execution, it is obviously easier to understand this sentence.
The reason is the same as above. Here, foo. bar is referenced to a global variable bar, and global variables are referenced by window. See the following code:
Var a = 'Never-online ';
Alert (this. a); // never-online
Alert (window. a); // never-online
If you try to change bar = foo. bar; bar (); to the following code, you may understand it.
Foo. alert = foo. bar; foo. alert ();
Here foo. alert is still a reference to the foo object, so this in the foo object is still valid here and does not become a window object.
Because of the obvious bar attribute window, although this exists in foo. bar, this is referenced as window.
*/

Let's change this example to the following:
<Script>
Foo = {
'Bar': function (){
Var oSelf = this;
Alert (this. toString );
If (oSelf = window ){
OSelf = foo;
}
Alert (oSelf );
},
'Tostring': function (){
Return 'foo ';
}
};

Window. toString = function (){
Alert ("reference global this --- window ");
}

Foo. bar ();
(Foo. bar )();
(Foo. bar | null )();
Bar = foo. bar; bar ();
</Script>

The reason should be understood.

In this example (foo. bar | null) (); we can see that Mozilla's interpreter is more "standard", while Opera and IE are different from Mozilla's interpretation methods. | Operator, which has different effects. As I mentioned above, it is possible that the | Operator is used to convert the execution of two expressions to a global comparison. Therefore, in IE and Opera, here (foo. bar | null) returns a global reference.