Question

我是面向对象的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，这将导致麻烦。有没有更好的方法呢？如果我只使用该类的一个实例，这会被认为是不好的做法，在这种情况下为什么？

Answer 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));
    }
}

Answer 2

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

var parsesearch = { ...

你做了单身，所以你不能基本上做更多的parsesearch实例。你只有一个实例及其功能，就是这样。

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

这取决于它的目的。如果你要扩展这个“小部件”，你会添加类似选项和其他内容的东西+ 你需要在一个网站上使用更多的小部件，那么你可能需要更多的实例。直到那时，只有一个实例是可以的，你可以像它一样保持它。

关于this问题，我基本同意 zaquest 和* Thanassis_K *的答案。您可以使用call，apply本机函数或jQuery proxy函数来更改所需函数的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();

Answer 3

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

 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();

Answer 4

您只需使用变量来保存当前实例（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);
    });
}

Answer 5

绑定方法

您可以将函数绑定到对象，例如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);
        });
    }
}

我应该如何处理javascript类中的匿名函数内的属性？

5 个答案:

绑定方法

范围方法