javascript - 设置 this 的范围

Question

嗨，我正在尝试学习使用 jQuery 库 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”的范围。但我一定做错了，因为即使在 settign $.proxy 之后，“this”关键字仍然指按钮。

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

score 0 · Accepted Answer

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

这能解决您的问题吗？

这意味着您想将显示功能更改为：

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

}

这是一个简单的例子，说明它是如何工作的

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

这是一个小提琴，可以看到它的实际效果

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

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

看看小提琴也能看到这个。

最后但并非最不重要的一点是，这是您的代码按我建议的那样工作的小提琴。

score 0 · Accepted Answer

这应该有效：

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

并显示：

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

score 0 · Accepted Answer

你的错误在这里：

.on('click' , this.show)

尽管 this 指的是this.show，但它不会将上下文设置为this随后show作为事件处理程序调用的时间。您有一个函数引用，但它最终与最初包含它的对象分离。

你应该使用：

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

并从内部删除$.proxy呼叫.show

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

javascript - 设置 this 的范围

3 回答 3

Related

Reference