javascript - 在面向对象的 Javascript 文件上使用 jQuery

Question

我正在使用面向对象为我的项目创建脚本文件，并且我还使用 jQuery 和 Datatables 等框架/小部件。

我在我的类上创建的公共属性不能从 jQuery 代码执行的函数的内部范围访问。

这是一个示例：

    function MyClass() {
        this.MyProperty = '';
    }

    MyClass.prototype.initialize = function() {
            $(document).ready(function(){
            alert(this.MyProperty); // MyProperty is undefined at this point
        }
    };

我怎样才能解决这个问题？这是拥有可以从类的每个成员访问的属性的正确方法吗？

Answer 1

商店this：

 function MyClass() {
        this.MyProperty = '';
    }

    MyClass.prototype.initialize = function() {
            var that=this;
            $(document).ready(function(){
            // in event handler regardless of jquery this points 
            // on element which fire event. here this === document,
            alert(that.MyProperty); // MyProperty is defined at this point
        }
    };

Answer 2

那是因为this不指向您的类，而是指向document该函数中的。当它指向您的类时，您需要存储它指向的内容：

function MyClass() {
    this.MyProperty = '';
}

MyClass.prototype.initialize = function() {
    var myClassInstance=this;
    $(document).ready(function(){
        alert(myClassInstance.MyProperty); // Will contain the property
    });
}

Answer 3

$.proxy可以帮助解决这个问题，

function MyClass() {
    this.MyProperty = '';
}

MyClass.prototype.initialize = function() {
    $(document).ready($.proxy(function(){
        alert(this.MyProperty);
    },this));
};

Answer 4

这与其他的有点不同，但更容易使用。保留在 initialize() 函数本身之外分配“this”上下文的逻辑。您的独特案例可能会使该解决方案无效，但无论如何我都会分享。

function MyClass() {
   this.MyProperty = '';
   $(function(){
      this.initialize();
   }.call(this));
}

MyClass.prototype.initialize = function () {
   alert(this.MyProperty);
}