Question

html

<input type="text" value="teste" id="1" />

javascript

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        var ref = this;
        $("#1").keydown(function (event) {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        })
    }
}

var obj = new classe();
obj.setup();

我想知道是否可以将this传递给嵌套函数，而不必将其保存到父函数内的局部变量ref。

测试代码：http://jsfiddle.net/7zorgou0/1/

Answer 1

这方面的方法不止一种。您可以改为创建一个立即调用的函数表达式并在其中传递this。但所有这些方法都基于相同的闭合原则。

问题是，this变量是调用方法的任何内容。如果你写了obj.method（），那么obj就是this的执行值。

现在，内部方法被声明为事件处理程序，而不是由您调用。事件发生时，系统将调用它。您永远无法确定将使用哪个对象来调用该方法。

因此，如果要在此处理程序中引用外部this，最好将其另存为本地变量。内部函数将作为它的闭包，变量将很容易访问。

BTW，我在上面写的IIFE变体：

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        (function(ref){
            $("#1").keydown(function (event) {
                if (event.keyCode == 13) {
                    $(this).attr("value", ref.nome);
                }
            })
        })(this);
    }
}

Answer 2

您实际上可以achieve that in ECMAScript 6！

class classe() {                           //Real class definition in JS!
    constructor(){
        this.nome = "rodrigo";
    }
    setup() {
        $("#1").keydown((event) => {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        })
    }
}

var obj = new classe();
obj.setup();

this如果使用了() => {} syntax，则不会发生变化。

同时在ES5中，您可以使用.bind：

function classe() {
    this.nome = "rodrigo";
    this.setup = function() {
        var ref = this;
        $("#1").keydown(function (event) {
            if (event.keyCode == 13) {
                $(this).attr("value", ref.nome);
            }
        }.bind(this));
    };
}

var obj = new classe();
obj.setup();

有没有其他方法将对象引用传递给javascript匿名函数？

2 个答案: