问题
<!doctype html>
<html>
<head>
<title>What is 'this'?</title>
<script>
function Obj(){
log('Obj instantiated');
}
Obj.prototype.foo = function (){
log('foo() says:');
log(this);
}
Obj.prototype.bar = function (){
log('bar() was triggered');
setTimeout(this.foo,300);
}
function log(v){console.log(v)}
var obj = new Obj();
</script>
</head>
<body>
<button onclick="obj.foo()">Foo</button>
<button onclick="obj.bar()">Bar</button>
</body>
</html>
And here is the console output:
Obj instantiated
foo() says:
Obj {foo: function, bar: function}
bar() was triggered
foo() says:
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
So when it calls obj.foo from the setTimeout, 'this' changes ownership to the Window. How do I prevent that or properly work with that behavior?
Thanks
回答1:
Use a .bind call.
setTimeout(this.foo.bind(this),300);
Not all browsers support it, but there is a shim on MDN and Underscore has _.bind(...) as well
回答2:
The answers using bind are the best, most modern way, of handling this. But if you have to support older environments and don't want to shim Function.prototype.bind, then you could also do it like this:
Obj.prototype.bar = function (){
log('bar() was triggered');
var ob = this;
setTimeout(function() {ob.foo();}, 300);
}
回答3:
Use bind method like this
setTimeout(this.foo.bind(this),300);
来源：https://stackoverflow.com/questions/20873596/how-do-i-ensure-that-javascripts-this-will-refer-to-the-object-when-using-set