如何在构造中分配使用它

时间:2012-02-07 09:50:58

标签: javascript jquery

在javascript构造方面我是一个初学者。我尝试jquery,但没有取得多大成功。以下是我的代码的简化版本:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
            this.field = this;
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                cache:false,
                success: function(data){
                    alert(field.fieldId);
                }
            }); 
        }
};
field1.init();

基本上我希望能够在成功事件中打印出field.fieldid,但我最终得到的结果绝对不是预期的。我不想每次都写field1.field.fieldid,因为当我弄清楚如何使用扩展和类似的东西时,这会毁了。

当我做警报时,有人可以帮我解决“#field1”(field.fieldId)吗?

1 个答案:

答案 0 :(得分:1)

这是You must remember this的经典案例。在您的情况下,最简单的答案是init函数中的局部变量:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
            var self = this;                      // <=== change here
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                    cache:false,
                success: function(data){
                    alert(self.fieldId);          // <=== and here
                }
            }); 
        }
};
field1.init();

或者,使用ajax函数的context参数:

var field1 = {
        fieldId:"#field1",
        field:"",
        init:function(){
                                                  // <=== change here (no `this.field = this;`)
            $.ajax({
                type:"GET",
                url:'some/url/to/get/values/from',
                cache:false,
                context: this,                    // <=== and here
                success: function(data){
                    alert(this.fieldId);          // <=== and here
                }
            }); 
        }
};
field1.init();

基本上,在JavaScript中,函数调用期间this的值完全由如何调用函数定义,而不是在其他语言中定义的位置(C ++,Java) , C#, ...)。当jQuery调用success函数的ajax回调时,它必须将this设置为某个东西。默认情况下,它将其设置为表示ajax调用设置的对象,但是使用context可以告诉jQuery将其设置为其他内容,允许您在回调中使用this表示当您致电this时,与ajax相同。

第一个解决方案利用success回调是对init调用的上下文的闭包这一事实(不用担心,{{3通过创建变量(self)并赋予它this的值,我们可以通过闭包内的self可靠地引用对象({{1}回调)。


在JavaScript中设置success的方式:

  1. 当通过从对象属性获取函数引用作为与调用相同的表达式的一部分来调用函数时,函数调用中的this将是您从中获取属性的对象。所以给出:

    this

    然后

    var obj = {
        firstName: "Fred",
        speak: function(msg) {
            alert(this.firstName + " says " + msg);
        }
    };
    

    请注意,它必须是与调用相同的表达式的一部分。这工作:

    obj.speak("hi");   // alerts "Fred says hi", because `this = obj` within the call
    
  2. 使用var s = obj.speak; // Getting a reference to `obj`'s `speak` s("hi"); // alerts "undefined says hi", because `this` is not // `obj` during the call call。这些是所有JavaScript函数的功能。它们允许您调用该函数并明确设置调用期间apply的内容。鉴于上面的this

    obj

    var s = obj.speak; // Getting a reference to `obj`'s `speak` s.call(obj, "hi"); // alerts "Fred says hi", we explicitly made `this = obj` // within the call call之间的唯一区别是,当您使用apply时,如果要将参数传递给函数,则将它们包含为{{1}的离散参数如上所述(注意我们刚刚将call作为call的第二个参数传递,而"hi"将其作为函数的第一个参数传递给它。对于call,而不是无限数量的离散参数,第二个参数是传递给函数的数组参数。

    call