我选择闭包而不是对象有实际原因吗？

发布于 2024-09-28 05:14:42 字数 1029 浏览 3 评论 0原文

我最近开始接触 OOP javascript，并且越来越多地听到有关闭包的信息。经过一天的绞尽脑汁，我现在理解了它们*，但我仍然没有看到相对于使用物体的优势。他们似乎做了同样的事情，但我怀疑我错过了一些东西。

*我想

编辑

我刚刚花了20分钟尝试使用一个作为对象编写的计数器和一个作为闭包编写的计数器来编写一个示例。我得出的结论是我仍然不明白闭包。

第二次编辑

好的，我已经成功地制作了一个极其简单的例子。这两者之间没有太多区别，但我发现对象版本更具可读性。为什么我会选择其中之一而不是另一个？


/*** Closure way ***/

function closureCounter() {
    var count = 0;
    return {
        increase : function() {
            count++;
            alert(count);
        },
        decrease : function () {
            count--;
            alert(count);
        }
    };
}

var myCounter = closureCounter();

myCounter.increase();
myCounter.decrease();


/*** Object way ***/

function objCounter() {
    var count = 0;
    this.increase = function() {
        count++;
        alert(count);
    }
    this.decrease = function() {
        count--;
        alert(count);
    }

}

var myCounter = new objCounter();

myCounter.increase();
myCounter.decrease();

原文

I've been getting into OOP javascript recently and more and more I've been hearing about closures. After a day of twisting my brain I now understand them* but I still don't see the advantage over using an object. They appear to to do the same thing but I suspect I'm missing something.

*i think

Edit

I've just spent 20 minutes trying to write an example using a counter written as an object and a counter written as a closure. I have come to the conclusion that I still don't understand closures.

2nd Edit

Ok I've managed to whip of an extremely simple example. There isn't much between these two but I find the object version more readable. Why would I chose one over the other?


/*** Closure way ***/

function closureCounter() {
    var count = 0;
    return {
        increase : function() {
            count++;
            alert(count);
        },
        decrease : function () {
            count--;
            alert(count);
        }
    };
}

var myCounter = closureCounter();

myCounter.increase();
myCounter.decrease();


/*** Object way ***/

function objCounter() {
    var count = 0;
    this.increase = function() {
        count++;
        alert(count);
    }
    this.decrease = function() {
        count--;
        alert(count);
    }

}

var myCounter = new objCounter();

myCounter.increase();
myCounter.decrease();

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰ゝ天使的微笑 2024-10-05 05:14:42

当闭包可以用更干净、更简单的代码做同样的事情时，您不必通过创建一个全新的对象来冒额外的错误和混乱的风险。使用闭包，链接对象变得更加容易。

举个例子：

function attachOnclick(eSource, eParent) {
    var e = document.createElement("div");
    eParent.appendChild(e);
    eSource.onclick = function() { e.style.backgroundColor = "881010"; }
}

如果

var elemLinks = [];
function attachOnclick2(eSource, eParent) {
    var e = document.createElement("div");
    eParent.appendChild(e);
    elemLinks.push({elemSrc: eSource, elemDest: e}); // Append to mappings list
    eSource.onclick = changeColor;
}

function changeColor() {
    for(var i = elemLinks.length; i--;) {
        if(this == elemLinks[i].elemSrc) { // We've found our match
            elemLinks[i].elemDest.style.backgroundColor = "881010";
            return true;
        }
    }

    return false;
}

您在第二个示例中发现任何错误，那么它就证明了我的观点，即闭包使编写简单、清晰的代码变得更加容易。

You don't have to risk additional bugs and confusion by creating a whole new object when a closure will do the same thing with cleaner and simpler code. With closures, it's much easier to link objects.

Case in point:

function attachOnclick(eSource, eParent) {
    var e = document.createElement("div");
    eParent.appendChild(e);
    eSource.onclick = function() { e.style.backgroundColor = "881010"; }
}

versus

var elemLinks = [];
function attachOnclick2(eSource, eParent) {
    var e = document.createElement("div");
    eParent.appendChild(e);
    elemLinks.push({elemSrc: eSource, elemDest: e}); // Append to mappings list
    eSource.onclick = changeColor;
}

function changeColor() {
    for(var i = elemLinks.length; i--;) {
        if(this == elemLinks[i].elemSrc) { // We've found our match
            elemLinks[i].elemDest.style.backgroundColor = "881010";
            return true;
        }
    }

    return false;
}

If you find any bugs in the second sample, then it just proves my point that closures make writing simple, cleaner code easier.

回复收藏 0 原文