javascript - 在事件处理程序上使用 bind(this)

Question

我有一个对象。它具有一些属性、DOM 元素的初始化函数和该 DOM 元素的事件处理程序。

我希望我的事件处理程序能够访问对象的属性。我正在使用 .bind(this)，但它说“无法调用未定义的方法“绑定(bind)””。我做错了什么？

var SignUpForm2 = {
    eForm: null,
    eEmailInput: null,
    ePasswordInput: null,
    signUpURL: null,
    email: null,
    password: null,

    handleFormSubmit: function() {
        e.preventDefault();

        this.email = this.eEmailInput.val();
        this.password = this.ePasswordInput.val();

        $.ajax({
            type: "POST",
            url: this.signUpURL,
            data: {
                email: this.email,
                password: this.password
            },
            success: function(response){

            }
        });
    },

    init: function(eForm) {
        this.eForm = eForm;
        this.eEmailInput = this.eForm.find('input[name="email"]');
        this.ePasswordInput = this.eForm.find('input[name="password"]');
        this.signUpURL = "/index.php/ajax/user-sign-up-via-email";

        this.eForm.submit(this.handleFormSubmit.bind(this));
    },
}

Answer 1

我有一个 jsfiddle，可以对您的代码进行一些小的调整:

http://jsfiddle.net/nickadeemus2002/8sX75/

html:

<form id="test">
    <p>test form</p>
    <label>email</label>
    <input type="text" value="" name="email"/>
    <br />
    <label>password</label>
    <input type="text" value="" name="password"/>
    <input type="submit" />
</form>

JavaScript:

var SignUpForm2 = {
    eForm: null,
    eEmailInput: null,
    ePasswordInput: null,
    signUpURL: null,
    email: null,
    password: null,
    handleFormSubmit: function() {
    var formEmail = this.eEmailInput.val();
        var formPassword = this.ePasswordInput.val();
        var formSignUpUrl = this.signUpURL;

        console.log(formEmail);   
        console.log(formPassword);   
        console.log(formSignUpUrl);    
       console.log('ajax POST to server');

    /*
      //notice new vars to pass along
    $.ajax({
        type: "POST",
        url: formSignUpURL,
        data: {
            email: formEmail,
            password: formPassword
        },
        success: function(response){

        }
    });
    */        
    },
    init: function(eForm) {       
        var parentObj = SignUpForm2;        
        this.eForm = eForm;
        this.eEmailInput = this.eForm.find('input[name="email"]');
        this.ePasswordInput = this.eForm.find('input[name="password"]');
        this.signUpURL = "/index.php/ajax/user-sign-up-via-email";
//this.eForm.submit(this.handleFormSubmit.bind(this));                 

        this.eForm.submit(function(e){
           e.preventDefault();       
            parentObj.handleFormSubmit();
        });
    },
}

$(document).ready(function(){
    //create instance
    SignUpForm2.init($('#test'));

});

这就是我的方法。

1.) 使用您的 SignUpForm2 对象将有效的 jquery 选择器(“测试”表单)传递给 init() 方法。

2.) 在 init 内部，您将当前表单输入值存储到 SignUpForm2 属性中。提交事件处理程序接管并将控制权通过 parentObj 变量传递给“handleFormSubmit”。注意——我将 e.preventDefault() 方法放在这里而不是放在“handleFormSubmit”中，因为它对我来说更有意义。

3.) 在“handleFormSubmit”中，我使用“this”来引用存储的对象属性。我将它们分配给本地变量，这样我们就不会在 ajax 方法中遇到“this”范围问题。然后我使用本地变量来制作你的 ajax POST。

顺便说一句:Paul 的方法也应该有效。我认为开发人员创建对象的方式是根据情况的偏好问题。由于您创建了文字对象结构，所以我一直使用这种方法。