Question

我有一个体面的应用程序，有几个区域有很多javascript，其中一些形式很长，部分使用ajax。

我正在使用对象来尝试包含这些函数，但我只是想知道;

在某些情况下，我无法使用this.，但必须使用对象名称。这与clearButton设置中的情况类似。如果我传递此对象上的任何函数以用作回调（例如ajax成功），我也会遇到问题，因此它意味着ajaxSuccessCallBack函数中的任何内容我使用OptionsForm并且可以＆＃39 ; t使用this
感觉就像我在这里重新发明轮子，使用角度更适合这个（或其他东西），还是可以改善我当前的物体？我经常在页面中构建html，但为此我使用存储在<script type=text/html区域的HTML。

以下是我正在使用的一些代码。 jsFiddle http://jsfiddle.net/vKXzL/1/

HTML

<form class="options" action="" method="post">
    <input name="name" value="" />
    <input name="email" type="email" value="" />
    <select name="options"></select>
    <button name="clear_name">Reset</button>
    <button name="submit" type="submit">Submit</button>
</form>

的Javascript

var OptionsForm = {
    init: function() {
        this.declarations();
        this.bindings();
    },
    declarations: function() {
        this.form = $('form.options');
        this.nameField = this.form.find('input[name=name]');
        this.emailField = this.form.find('input[name=email]');
        this.optionsField = this.form.find('select[name=options]');
        this.clearButton = this.form.find('button[name=clear_name]');
        this.submitButton = this.form.find('button[name=submit]');

    },
    bindings: function() {
        this.clearButton.on('click', function(e) { 
            e.preventDefault(); 
            OptionsForm.clearName(); 
        });
    },
    clearName: function(e) {
        this.nameField.val('');    
    },
    ajaxSuccessCallBack: function(response) {
      // anything here I have to use OptionsForm   
    },
    populateOptions: function(options) {
        // clear the field

        // loop the options and add to list
    }
};
OptionsForm.init();

Answer 1

这实际上是Javascript奇怪部分的典型例子。 clearButton函数中发生的情况是this被本地分配给回调函数的结果。避免这种情况的一种常见方法是在回调之前将this分配给另一个变量，以便获得以下内容：

bindings: function() {
    var that = this;
    this.clearButton.on('click', function(e) { 
        e.preventDefault(); 
        that.clearName(); 
    });
}

同样适用于ajaxSuccessCallback。

Answer 2

由于该方法的执行上下文，一种可能的解决方案是使用Function.bind() / $.proxy()之类的

this.clearButton.on('click', $.proxy(function (e) {
    e.preventDefault();
    OptionsForm.clearName();
}, this));

而不只是传递ajaxSuccessCallBack，传递$.proxy(this.ajaxSuccessCallBack, this)

Answer 3

是的，这些是经典解决方案的经典问题。在你的按钮情况下，它完全与执行上下文有关：当“点击”被触发时，“this”究竟是什么意思。

jQuery，Dojo或angularJS等框架会有所帮助。我建议使用框架，因为它们可以帮助解决更大的问题，例如组织应用程序代码以及解决这些问题。

Answer 4

你这样做绝对正确。

JavaScript中this的值取决于执行的当前上下文而不是函数上下文。

例如：

var showContext = function() {
    console.log(this); // will log window
}

global context

showContext()与window.showContext()相同，因为当前上下文为window，并且函数showContext已定义到窗口。

让我们考虑另一个例子： var obj = {name：＆＃39; stackoverflow＆＃39;}; obj.showContext = function（）{ 的console.log（this.name）; }

var name = 'stackexchange';
var fun = obj.showContext;

obj.showContext(); // stackoverflow    
fun(); //stackexchange

this in different context

当function作为callback传递给event时，context的{{1}}（或this}是由function执行后element所附加的event。

你的代码绝对没问题。但是你可能觉得使用{/ 1}}表示法很奇怪，如

event

您可以将功能修改为

Object.function()

我已根据上述代码更新了小提琴，请找到它here

Javascript对象包含函数/范围问题

4 个答案: