Question

我正在创建一个带有原型设计的Javascript“类”。我不明白为什么第一个/第二个块不起作用，第三个块将起作用。对于第一个/第二个块，我得到：“对象＃没有方法'验证'”。为什么会这样做，并且第3块是正确的方法吗？

- 修改 我在Chrome / FF中测试了这个

- EDIT2 如果我用以下方法调用Test原型： var test = new Test（）;

在de login prototype中调用test var它会起作用....

第1座


    function Test(){
        this.init();
    }

    Test.prototype.init = function(){
        $(".login").click(this.login);
    };

    Test.prototype.login = function(event){
        event.preventDefault();

        this.validate();

        console.log("login");
    };

    Test.prototype.validate = function(){
        console.log("validate");
    };

new Test();

第2座


    function Test(){
        this.init();
    }

    Test.prototype.init = function(){
        $(".login").click(this.login);
    };

    Test.prototype.login = function(event){
        var self = this;
        event.preventDefault();

        self.validate();

        console.log("login");
    };

    Test.prototype.validate = function(){
        console.log("validate");
    };

    new Test();

第3区


    function Test(){

    if(!(this instanceof LoginController)){
        return new LoginController();
    }

        self = this;

        this.init();
    }

    Test.prototype.init = function(){
        $(".login").click(this.login);
    };

    Test.prototype.login = function(event){
        event.preventDefault();

        self.validate();

        console.log("login");
    };

    Test.prototype.validate = function(){
        console.log("validate");
    };

    new Test();

Answer 1

Test.prototype.init = function(){
  $(".login").click(this.login);
};

这里你附加this.login作为事件处理程序。通过这种方式，函数将jquery重新分配给this值到触发事件的元素。

要保留对实际需要的this值的引用，请尝试：

Test.prototype.init = function(){
  var self = this;
  $(".login").click(function (evt) {
     return self.login(evt);
  });
};

或实施bind的浏览器：

Test.prototype.init = function(){
  $(".login").click(this.login.bind(this));
};

或jQuery.proxy，其作用与bind完全相同：

Test.prototype.init = function(){
  $(".login").click($.proxy(this.login, this));
};

演示：http://jsbin.com/ilejiw/1/

更新：不，第三种变体不是正确的方法，因为Test的每个实例都会覆盖相同的全局self变量。所以self会指向Test的最后一个实例（只要它没有被其他东西覆盖）。

Javascript原型混乱 - 正确的方法

1 个答案: