在 JavaScript 中选择 OOP 模式 [英] Choosing an OOP pattern in javascript

问题描述

我在其他人和一些资源的帮助下将这些放在一起.我做了一个把所有东西都搞定，精简后的代码贴在下面.

I've put these together with the help of others and several resources. I've made a fiddle of everything, and the stripped down code is posted below.

基本上我已经学会了如何使用这些模式中的每一种，但我对这些方法之间更根本的区别感到好奇.下游代码实际上与这些模式中的任何一个相同，但是除了个人偏好之外，是否有理由应该使用一种而不是另一种?此外，尽管我已经尝试收集最常见的模式，但如果更好，请提出您自己的模式.

Basically I've learned how to use each of these patterns but I'm curious about the more fundamental differences between these approaches. Downstream code is practically identical with any of these patterns, but is there a reason why one should use one over another, beyond personal preference? Also though I've tried to gather up the most common patterns, please suggest your own if it's better.

模式 1(基于对象):

Pattern 1 (Object Based):

var mouseDiff = {
    "startPoint" : {"x" :0, "y" : 0},
    "hypotenuse" : function(a,b) {
        // do something
    },
    "init"       : function(){
        // do something
    }
}

mouseDiff.init();

模式 2(据我所知最传统):

Pattern 2 (Most traditional as far as I know):

function MouseDiff() {
    this.startPoint = {"x" :0, "y" : 0};
}

MouseDiff.prototype.hypotenuse = function(a,b) {
    // do something
}

MouseDiff.prototype.init = function() {
    // do something
}

var myMouse = new MouseDiff;
myMouse.init();

模式 3(利用闭包):

Pattern 3 (Making use of closure):

var MouseDiff2 = (function() {
    var startPoint = {"x" :0, "y" : 0};
    var hypotenuse = function(a,b) {
        // do something
    };
    return {
        hypotenuse: hypotenuse,
        init : function(){
            // do something
        }
    };

}());
MouseDiff2.init();

推荐答案

模式 1 是单例.如果你只需要一个这样的对象，那就没问题了.

Pattern 1 is a singleton. If you only need one such object, it's just fine.

模式 2 构建新对象，并利用 prototype 对象，这样当创建新的 MouseDiff 对象时，它不会创建函数的新副本(它们本身就是 JavaScript 中的数据).

Pattern 2 builds new objects, and takes advantage of the prototype object so that when a new MouseDiff object is created, it will not create new copies of the functions (which are themselves data in JavaScript).

与常规单例相比，模式 3 需要更多内存，但它提供静态隐私.

Pattern 3 requires more memory in comparison to a regular singleton but it offers static privacy.

我喜欢下面的模式，因为它涵盖了各种特性，尽管它实际上是构造函数(模式 2)和闭包(模式 3)的组合:

I like the following pattern, as it covers various features, though it is really a combination of the constructor (pattern 2) and closure (pattern 3):

var MouseDiff = (function () {

    var aStaticVariable = 'Woohoo!';
    // And if you really need 100% truly private instance
    // variables which are not methods and which can be
    // shared between methods (and don't mind the rather
    // big hassle they require), see
    // http://brettz9.blogspot.com/search?q=relator
    // (see also the new plans for a Map/WeakMap in ECMAScript)

    function _APrivateStaticMethod () {
        alert(aStaticVariable);
    }

    // An instance method meant to be called on the
    //   particular object as via ".call(this)" below
    function _APrivateInstanceMethod () {
        alert(this.startPoint.x);
    }

    // Begin Constructor
    function MouseDiff() {
        this.startPoint = {"x" :0, "y" : 0};
    }

    MouseDiff.prototype.hypotenuse = function(a,b) {
        // do something
    };

    MouseDiff.prototype.init = function() {
        // do something
        _APrivateStaticMethod(); // alerts 'Woohoo!'
        _APrivateInstanceMethod.call(this); // alerts 0 (but if not
        // called with this, _APrivateInstanceMethod's internal
        // "this" will refer (potentially dangerously) to the
        // global object, as in the window in the browser unless
        // this class was defined within 'strict' mode in which
        // case "this" would be undefined)
    };

    return MouseDiff;
}());

var myMouse = new MouseDiff;
myMouse.init();

这篇关于在 JavaScript 中选择 OOP 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！