原型模式(调用函数）

Prototype pattern (calling function)

本文关键字：函数 调用 模式 原型      更新时间：2023-09-26

我正在尝试使用Addy Osmani的原型模式。

我

有一个对象"app"，在提交表单时，我正在尝试在我的 init 函数中调用一个函数。但它不是控制台日志记录...

$(document).ready(function() {
    var app = {
        logHello: function() {
            console.log('hello');
        },

        initialize: function() {           
            $('#userlogin').on('submit', function(){
                this.logHello;
                return false;
            });
        }
    }
    app.initialize();
});

我哪里出错了？

this现在指的是你的jQuery on submit函数，尝试使用上下文变量this（另外，在调用函数后需要()）：

var self = this;
$('#userlogin').on('submit', function(){
    self.logHello();
    return false;
});

演示：http://jsfiddle.net/59Y9z/

  initialize: function() {           
            var self=this;
            $('#userlogin').on('submit', function(){
                self.logHello();
                return false;
            });
        }

这个关键字根据函数作用域而变化，另一个函数中的一个函数创建一个新作用域，除非它以某种方式绑定到作用域。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

这是一个范围问题。在提交事件处理程序中，this变量引用函数的作用域，而不是logHello函数所在的app作用域。

尝试这样的事情：

...
initialize: function() {
  var old_scope = this; // save the scope into a local variable
  $( '#userlogin' ).on( 'submit' , function() {
    old_scope.logHello;
    return false;
  });
},
...

变量old_scope现在将包含 app 的作用域，因此您将能够访问app包含的所有变量和函数。

相关文章：