如何改变在javascript函数的上下文(How to change the context of

2019-07-21 09:58发布

我试图理解为什么在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." );

Answer 1:

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将不会被设置为你的迭代器当前的对象,你就必须使用该参数来代替。 基本上,它只是使事情变得更容易。



Answer 2:

请看看这个例子:

<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>

新的关键字变化的情况下。



Answer 3:

从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对象的上下文功能。



Answer 4:

我所遇到的一个真实的例子:

如果添加一个函数作为事件处理DOM元素,如果你用“这个”该函数内部,“这”指的是所添加的事件处理程序的DOM元素。

但是,这个功能可能是一个对象的方法,并且希望里面使用关键字“this”指所有者对象...所以你需要改变的背景下,这样的“this”将不参考的DOM元素 ,但将参考所有者对象

您可以使用代理()函数很容易改变的功能的情况下jQuery中。 看到这个问题: jQuery的“本”结合问题上的事件处理程序(原型bindAsEventListener的当量)和第一个答案



Answer 5:

绑定功能可能是你在找什么,bind函数返回一个新的功能,在您传递的情况下,当你使用jQuery代表到附加一些行为DOM元素一个真实的场景可能是,你想回调在不同的上下文中执行。 “造成一个jQuery delgate默认的上下文是绑定到处理器的DOM对象,这意味着你不能访问任何财产,除了属于DOM对象的属性



Answer 6:

我总是发现自己在需要使用时,具有不同背景的setTimeout和jQuery有一个方便的功能$ .proxy其中的伎俩:

function iAmCalledAfterTimeout()
{
     alert(this.myProperty); //it will alert "hello world"
}    

setTimeout($.proxy(iAmCalledAfterTimeout, {myProperty:"hello world"}), 1000);


文章来源: How to change the context of a function in javascript