我试图理解为什么在JavaScript中,你可能想改变一个函数的上下文中。 我正在寻找一个真实的例子或东西,这将有助于我理解它的意义如何/为什么采用这种方法,什么是。
使用本例中示出(从技术http://ejohn.org/apps/learn/#25 )
var object = {};
function fn(){
return this;
}
assert( fn() == this, "The context is the global object." );
assert( fn.call(object) == object, "The context is changed to a specific object." );
jQuery的利用了它良好的效果:
$('a').each(function() {
// "this" is an a element - very useful
});
实际的jQuery代码如下所示:
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
如果只是做callback( name, object[ name ] )
那么this
将不会被设置为你的迭代器当前的对象,你就必须使用该参数来代替。 基本上,它只是使事情变得更容易。
请看看这个例子:
<script>
var el = document.getElementById('button');
el.onclick = function(){
this.value = "Press Me Again"; //this --> now refers to the the element button not on the window
}
//Another Example:
var Person = function(name,location){
this.name = name;
this.location = location;
alert(this.location);
}
var p2 = new Person("Samantha","California"); //this refers to the instance of the function Person(Person now acts as a class)
var p1 = Person(); // this refers to the window(Person simply acts as a simple function)
</script>
<button id="button1">Press Me</button>
新的关键字变化的情况下。
从AJAX请求做回调时,这是非常有用的:
function Person(_id, _name) {
this.id = _id;
this.name = _name;
};
Person.prototype.sayHi = function(greeting) {
alert(greeting + " from " + this.name);
};
Person.prototype.loadFromAJAX = function(callback) {
// in this example, it's jQuery, but could be anything
var t = this;
$.get("myurl.php", function(data) {
callback.call(t, data.greeting);
});
};
其实,这是一个非常糟糕的例子。
有吨的jQuery它的用途。 例如,jQuery的()得到()函数:
get: function( num ) {
return num === undefined ?
// Return a 'clean' array
Array.prototype.slice.call( this ) :
// Return just the object
this[ num ];
}
它使用Array原型,但在jQuery对象的上下文功能。
我所遇到的一个真实的例子:
如果添加一个函数作为事件处理DOM元素,如果你用“这个”该函数内部,“这”指的是所添加的事件处理程序的DOM元素。
但是,这个功能可能是一个对象的方法,并且希望里面使用关键字“this”指所有者对象...所以你需要改变的背景下,这样的“this”将不参考的DOM元素 ,但将参考所有者对象 。
您可以使用代理()函数很容易改变的功能的情况下jQuery中。 看到这个问题: jQuery的“本”结合问题上的事件处理程序(原型bindAsEventListener的当量)和第一个答案
绑定功能可能是你在找什么,bind函数返回一个新的功能,在您传递的情况下,当你使用jQuery代表到附加一些行为DOM元素一个真实的场景可能是,你想回调在不同的上下文中执行。 “造成一个jQuery delgate默认的上下文是绑定到处理器的DOM对象,这意味着你不能访问任何财产,除了属于DOM对象的属性
我总是发现自己在需要使用时,具有不同背景的setTimeout
和jQuery有一个方便的功能$ .proxy其中的伎俩:
function iAmCalledAfterTimeout()
{
alert(this.myProperty); //it will alert "hello world"
}
setTimeout($.proxy(iAmCalledAfterTimeout, {myProperty:"hello world"}), 1000);