设定范围

Question

您好我正在尝试学习使用jQuery librari 1.9在javascript中以更加面向对象的方式工作。我正处于一个小项目中的某个点，我必须更改此对象的范围。这是我的html ：

<div id="contact">
<h2>Contact Me</h2>
<form action="#">
    <ul>
        <li>
            <label for="name">Name: </label>
            <input name="name" id="name">
        </li>

        <li>
            <label for="email">Email Address: </label>
            <input name="email" id="email">
        </li>

        <li>
            <label for="comments">What's Up?</label>
            <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
        </li>
        <li>
            <input type="submit" value="Submit">
        </li>
    </ul>
</form>

这是我的javascript

var contactForm = {
    contact : $('div#contact'),

    init : function(){
        this.contact.hide();
        $('<button></button>' , { 
            text : "Display Contact"
        }).insertAfter('article')
          .on('click' , this.show);
    },

    show : function(){
       $.proxy(contactForm , this)
       this.contact.slideDown();

    }
};

contactForm.init();

问题在于我的show方法。我知道我可以使用$ .proxy（）设置“this”的scop。但我必须做错了，因为即使在settign $ .proxy之后，“this”关键字仍指按钮。

如何让这个“this”关键字引用“contactForm”对象

Answer 1

阅读有关代理的文档，它不会更改当前方法中的“this”上下文。代理签名为$.proxy( myFunction, thisVar )，这意味着代理将返回函数myFunction，当它执行myFunction时，此值将引用thisVar。

这可以解决您的问题吗？

这意味着您要将show功能更改为：

show : function(){
   $.proxy( function(){ this.slideDown() }, contactForm )();

}

以下是一个如何运作的简单示例

 f = $.proxy( function(){ console.log(this.msg); } , { msg: "hello world" });
 f(); // ==> should log to console "hello world"  

这是fiddle to see it in action

您还可以将参数传递给函数。例如：

 f = $.proxy( function(msg){ console.log([this,msg]); }, { topic:"my topic" } )
 f("hello world");

请参阅fiddle以查看此操作。

最后但并非最不重要的是，这是一个fiddle with your code working like I suggested.

Answer 2

这应该有效：

.on('click', $.proxy(this.show, this));

并显示：

show: function() {
   this.contact.slideDown();
}

Answer 3

您的错误在这里：

.on('click' , this.show)

虽然这引用了this.show，但是当this随后被调用为事件处理程序时，它不会将上下文设置为show。你有一个函数引用，但它最终与最初包含它的对象分离。

您应该使用：

.on('click', $.proxy(this.show, this))

并从$.proxy

中删除.show来电

请注意，$.proxy()旨在返回一个新的函数引用，在调用时它将始终具有给定的上下文。它对当前函数的上下文没有任何作用。