2

我是面向对象的 javascript 的新手，所以也许我用错了术语。

我有一个看起来像这样的 javascript 类。

var parsesearch = {
    init: function(selector){
        this.selector = $(selector);
        this.count = $(selector).length;
    },
    loopresluts: function(selector){
        this.delay = 350
        this.selector.each(function(indexInArray) {
            parsesearch.announcementID = parsesearch.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout( function () {
                console.log(parsesearch.announcementID)
            //adding delay for every itteration.
            }, indexInArray * parsesearch.delay);
        });
    }
}

在 loopresults 里面我有一个匿名函数。在该函数内部，我不能使用“this”来引用属性，而是使用 parsesearch。“propertyname”我假设如果我实例化多个版本的 parsesearch，这将导致麻烦。有更好的方法吗？如果我只使用该类的一个实例，这是否会被视为不好的做法，在这种情况下为什么呢？

4

5 回答 5

1

最简单的方法是使用闭包

var parsesearch = {
    init: function(selector){
        this.selector = $(selector);
        this.count = $(selector).length;
    },
    loopresluts: function(selector){
        var self = this;
        this.delay = 350
        this.selector.each(function(indexInArray) {
            self.announcementID = self.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout( function () {
                console.log(self.announcementID)
            //adding delay for every itteration.
            }, indexInArray * self.delay);
        });
    }
}

或者，由于您已经在使用jQuery，您可以使用jQuery.proxy

var parsesearch = {
    init: function(selector){
        this.selector = $(selector);
        this.count = $(selector).length;
    },
    loopresluts: function(selector){
        this.delay = 350
        this.selector.each($.proxy(function(indexInArray) {
            this.announcementID = this.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout($.proxy(function () {
                console.log(this.announcementID)
            //adding delay for every itteration.
            }, this), indexInArray * this.delay);
        }, this));
    }
}
于 2013-08-06T12:26:04.623 回答
1

哇这么多问题。让我们一步一步来。当你开始

var parsesearch = { ...

你做了单例，所以你基本上不能做更多的解析搜索实例。您只有一个实例及其功能，仅此而已。

如果我只使用该类的一个实例，这是否会被认为是不好的做法，在这种情况下为什么呢？

这取决于它的目的是什么。如果您将扩展此“小部件”并添加诸如选项和其他内容之类的内容+您将希望在一个站点上使用更多小部件，那么您可能需要更多实例。到那时，只有一个实例是可以的，您可以保持原样。

关于this问题，我基本同意zaquest和 *Thanassis_K* 的回答。您可以使用call原apply生函数或 jQueryproxy函数来更改this所需的函数。也是var self = this很常见的做法。然后self是命名空间的变量。无论如何，出于某种原因，这里的所有答案都是避免原型，应该在这里使用它，因为如果您将函数声明为简单的对象属性，那么它们会随着每个新实例重新声明，这是浪费......

我对更多实例的解决方案

var ParseSearch = function (selector) {
    this.selector = $(selector);
    this.count = $(selector).length;
    this.delay = 350;
}

// you dont need init here... 

ParseSearch.prototype.loopresluts = function(){
    this.selector.each($.proxy(function(indexInArray) {
        this.announcementID = this.selector.find('[headers=h-diarienummer] a')
                                           .text();
        //opening the pages with a delay
        setTimeout($.proxy(function () {
            console.log(this.announcementID)
        //adding delay for every itteration.
        }, this), indexInArray * this.delay);
    }, this));
}

var firstParser = new ParseSearch('div');
firstParser.loopresluts();
于 2013-08-06T13:17:06.313 回答
0

您可以将其修改为以下内容： 

 var parsesearch = (function () {
    var init = function (selector) {
        this.selector = $(selector);
        this.count = $(selector).length;
    }
    var loopresluts = function (selector) {
        var self = this; // self now refers to that function only
        this.delay = 350
        this.selector.each(function (indexInArray) {
            parsesearch.announcementID = parsesearch.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout(function () {
                console.log(parsesearch.announcementID)
                //adding delay for every itteration.
            }, indexInArray * parsesearch.delay);
        });
    }
    return {
        init: init,
        loopresluts: loopresluts
    }
});

// create a single instance of your object
var parseS = parsesearch();
于 2013-08-06T12:22:35.097 回答
0

您只需使用一个变量来保存当前实例（this），而不是在匿名函数使用的范围内。

loopresluts: function(selector){
    this.delay = 350;
    var scoped = this;
    this.selector.each(function(indexInArray) {
        scoped.announcementID = parsesearch.selector.find('[headers=h-diarienummer] a').text();
        //opening the pages with a delay
        setTimeout( function () {
            console.log(scoped.announcementID)
        //adding delay for every itteration.
        }, indexInArray * scoped.delay);
    });
}
于 2013-08-06T12:24:44.807 回答
0

绑定方法

您可以将函数绑定到对象，例如，this

var parsesearch = {
    init: function(selector){
        this.selector = $(selector);
        this.count = $(selector).length;
    },
    loopresluts: function(selector){
        this.delay = 350
        this.selector.each((function(indexInArray) {
            this.announcementID = this.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout( function () {
                console.log(this.announcementID)
            //adding delay for every itteration.
            }, indexInArray * this.delay);
        }).bind(this));
    }
}

范围法

通过声明一个引用的局部变量this，您可以在嵌套函数中使用该变量。

var parsesearch = {
    ...
    loopresluts: function(selector){
        var p = this;
        this.delay = 350
        this.selector.each(function(indexInArray) {
            p.announcementID = p.selector.find('[headers=h-diarienummer] a').text();
            //opening the pages with a delay
            setTimeout( function () {
                console.log(p.announcementID)
            //adding delay for every itteration.
            }, indexInArray * p.delay);
        });
    }
}
于 2013-08-06T12:28:51.820 回答