he scope of all functions is window
.
(The reason why is you are invoking f
as a function(类,全局的类)
and not a method
. When invoked as a function this
is set to window
during the execution of the target)
To circumvent that, you can do this:
A.prototype.go = function() { var self = this; console.log(self); //A { go=function()} var f = function() { console.log(self); //A { go=function()} }; f(); }
this
would only not refer to the window when it is in the method of a class and not just a regular function. –
看一段有意思的代码,猜测一下,弹出的 this 变量会是什么?
function Menu(elem) { alert(this); function privateMethod() { alert(this) // window, not menu! } // ... call private method privateMethod() } new Menu(document.createElement('div'))
Because function f()
is not called without any object reference. Try,
f.apply(this);
function Menu(elem) { alert(this); function privateMethod() { alert(this) // window, not menu! } // ... call private method privateMethod.apply(this) } new Menu(document.createElement('div'))
——---------------------------------------------------------------------------------------------------------------------------
参考 stack-overflow:
http://javascript.info/tutorial/binding
JavaScript has a different concept of what the special name this
refers to than most other programming languages do. There are exactly five different ways in which the value of this
can be bound in the language.
The Global Scope
this;
When using this
in global scope, it will simply refer to the global object.
Calling a Function
foo();
Here, this
will again refer to the global object.
ES5 Note: In strict mode, the global case no longer exists.
this
will instead have the value ofundefined
in that case.
Calling a Method
test.foo();
In this example, this
will refer to test
.
Calling a Constructor
new foo();
A function call that is preceded by the new
keyword acts as a constructor. Inside the function, this
will refer to a newly created Object
.
Explicit Setting of this
function foo(a, b, c) {}
var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3
When using the call
or apply
methods of Function.prototype
, the value of this
inside the called function gets explicitly set to the first argument of the corresponding function call.
As a result, in the above example the method case does not apply, and this
inside of foo
will be set to bar
.
Note:
this
cannot be used to refer to the object inside of anObject
literal. Sovar obj = {me: this}
will not result inme
referring toobj
, sincethis
only gets bound by one of the five listed cases.
Common Pitfalls
While most of these cases make sense, the first one is to be considered another mis-design of the language because it never has any practical use.
Foo.method = function() {
function test() {
// this is set to the global object
}
test();
}
A common misconception is that this
inside of test
refers to Foo
; while in fact, it does not.
In order to gain access to Foo
from within test
, it is necessary to create a local variable inside of method
which refers to Foo
.
Foo.method = function() {
var that = this;
function test() {
// Use that instead of this here
}
test();
}
that
is just a normal variable name, but it is commonly used for the reference to an outer this
. In combination with closures, it can also be used to pass this
values around.
Assigning Methods
Another thing that does not work in JavaScript is function aliasing, which is assigning a method to a variable.
var test = someObject.methodTest;
test();
Due to the first case, test
now acts like a plain function call; therefore, this
inside it will no longer refer to someObject
.
While the late binding of this
might seem like a bad idea at first, in fact, it is what makes prototypal inheritance work.
function Foo() {}
Foo.prototype.method = function() {};
function Bar() {}
Bar.prototype = Foo.prototype;
new Bar().method();
When method
gets called on a instance of Bar
, this
will now refer to that very instance.
Disclaimer: Shamelessy stolen from my own resources at http://bonsaiden.github.com/JavaScript-Garden/#function.this