Самоисполняющаяся анонимная функция против прототипа

В Javascript есть несколько четко известных методов для создания и управления классами / пространствами имен в javascript.

Мне любопытно, какие ситуации оправдывают использование одного метода против другого. Я хочу выбрать один и придерживаться его, двигаясь вперед.

Я пишу корпоративный код, который поддерживается и совместно используется несколькими командами, и я хочу знать, что является лучшим методом при написании поддерживаемого JavaScript?

Я склонен отдавать предпочтение самореализующимся анонимным функциям, однако мне любопытно, что сообщество проголосует за эти методы.

Прототип :

function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

Самозакрывающаяся анонимная функция:

//Self-Executing Anonymous Function 
(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }     
}( window.skillet = window.skillet || {}, jQuery ));   
//Public Properties      
console.log( skillet.ingredient ); //Bacon Strips  

//Public Methods 
skillet.fry(); //Adding Butter & Fraying Bacon Strips 

//Adding a Public Property 
skillet.quantity = "12"; console.log( skillet.quantity ); //12   

//Adding New Functionality to the Skillet 
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " + 
                     skillet.ingredient + " & " + 
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
     };     

}( window.skillet = window.skillet || {}, jQuery ));
//end of skillet definition


try {
    //12 Bacon Strips & 1 Cup of Grease
    skillet.toString(); //Throws Exception 
} catch( e ) {
    console.log( e.message ); //isHot is not defined
}

Я чувствую, что должен упомянуть, что самоисполняющаяся анонимная функция - это шаблон, используемый командой jQuery.

Обновление Когда я задал этот вопрос, я действительно не понял важность того, что я пытался понять. Реальная проблема под рукой - стоит ли использовать new для создания экземпляров ваших объектов или использовать шаблоны, которые не требуют конструкторов / использования newключевого слова.

Я добавил свой собственный ответ, потому что, по моему мнению, мы должны использовать шаблоны, которые не используют newключевое слово.

Для получения дополнительной информации, пожалуйста, смотрите мой ответ.

Самоисполняющиеся анонимные функции используются для автоматизации выполнения скрипта без привязки к внешним событиям (например, window.onload).

В этом примере он используется для формирования классического шаблона Module, основная цель которого состоит в том, чтобы ввести пространство имен в глобальную среду и обеспечить инкапсуляцию для любых внутренних свойств, которые не «экспортированы» или не присоединены к пространству имен.

Изменение прототипа объекта, с другой стороны, используется для установления наследования (или расширения нативных объектов ). Этот шаблон используется для создания объектов 1: n с общими методами или свойствами.

Не следует выбирать один шаблон предпочтительнее другого, поскольку они выполняют разные задачи. С точки зрения пространства имен, Самоисполняющаяся Функция является подходящим выбором.

Вот образец, который я только начал использовать (использовал варианты до вчерашнего дня):

function MyClass() {
    // attributes
    var privateVar = null;

    // function implementations
    function myPublicFunction() {
    }

    function myPrivateFunction() {
    }

    // public declarations
    this.myPublicFunction = myPublicFunction;
}

MyClass.prototype = new ParentClass(); // if required

Несколько мыслей по этому поводу:

1. Вы не должны получать никаких (anonymous)следов в ваших следах стека отладчика, поскольку все названо (без анонимных функций).
2. Это самый чистый образец, который я когда-либо видел
3. Вы можете легко сгруппировать ваш открытый API без привязки их реализаций к объявлению (то есть кто-то может легко получить доступ к интерфейсу вашего открытого класса без необходимости прокрутки)

Единственное время, которое я бы использовал prototypeбольше - определение наследования.

Я использую прототипы, потому что они чище и следуют стандартным шаблонам наследования. Самовозвратные функции отлично подходят для разработки браузера или ситуации, когда вы не знаете, где выполняется код, но в остальном это просто шум.

Пример:

var me;

function MyObject () {
    this.name = "Something";
}

MyObject.prototype.speak = function speak () {
    return "Hello, my name is " + this.name;
};

me = new MyObject();
me.name = "Joshua";
alert(me.speak());

Я бы пошел с самовыполняющейся функцией, но с небольшой разницей:

MyClass = (function() {
     var methodOne = function () {};
     var methodTwo = function () {};
     var privateProperty = "private";
     var publicProperty = "public";

     return function MyClass() {
         this.methodOne = methodOne;
         this.methodTwo = methodTwo;
         this.publicProperty = publicProperty;
     };
})();

Если этот подход окажется чище, я отделяю возвращаемую глобальную переменную от любых входных параметров (таких как jQuery) (способ, которым вы написали его, эквивалентен возвращению void и использованию параметра ref в C #, который я немного отключил, или передавая указатель на указатель и переназначая его в C ++). Если бы тогда я собирался присоединить дополнительные методы или свойства к классу, я бы использовал наследование прототипа (например, с помощью метода jQuery $ .extend, но достаточно легко выполнить свой собственный extend ()):

var additionalClassMethods = (function () {
    var additionalMethod = function () { alert('Test Method'); };
    return { additionalMethod: additionalMethod };
})();

$.extend(MyClass.prototype, additionalClassMethods);

var m = new MyClass();
m.additionalMethod(); // Pops out "Test Method"

Таким образом, у вас есть четкое различие между добавленными методами и оригинальными.

Живой пример

(function _anonymouswrapper(undefined) {

    var Skillet = {
        constructor: function (options) {
            options && extend(this, options);
            return this; 
        },
        ingredient: "Bacon Strips",
        _isHot: true,
        fry: function fry(oliveOil) {
            this._addItem("\t\n Butter \n\t");
            this._addItem(oliveOil);
            this._addItem(this.ingredient);
            console.log("Frying " + this.ingredient);
        },
        _addItem: function addItem(item) {
            console.log("Adding " + item.toString().trim());
        }
    };

    var skillet = Object.create(Skillet).constructor();

    console.log(skillet.ingredient);
    skillet.fry("olive oil");

    var PrintableSkillet = extend(Object.create(Skillet), {
        constructor: function constructor(options) {
            options && extend(this, options);
            return this;
        },
        _amountOfGrease: "1 Cup",
        quantity: 12,
        toString: function toString() {
            console.log(this.quantity + " " +
                        this.ingredient + " & " +
                        this._amountOfGrease + " of Grease");
            console.log(this._isHot ? "Hot" : "Cold");
        }
    });

    var skillet = Object.create(PrintableSkillet).constructor();

    skillet.toString();

    function extend(target, source) {
        Object.getOwnPropertyNames(source).forEach(function (name) {
            var pd = Object.getOwnPropertyDescriptor(source, name);
            Object.defineProperty(target, name, pd);
        });
        return target;
    }
}());

Вы можете использовать IIFE, чтобы эмулировать «область видимости модуля» вокруг вашего кода. Тогда вы можете просто использовать объекты, как обычно.

Не «эмулируйте» приватное состояние, используя замыкания, так как это приводит к большим потерям памяти.

Если вы пишете корпоративное приложение и хотите сохранить объем используемой памяти менее 1 ГБ, избегайте ненужного использования замыканий для сохранения состояния.

Обновление Теперь у меня намного лучшее понимание javascript и я чувствую, что могу правильно ответить на этот вопрос. Я думаю, что это была плохо сформулированная, но очень важная тема для javascript.

Шаблон Self Executing Anonymous Function не требует использования ключевого слова new, если вы избегаете его использования вне функций. Я согласен с идеей, что использование нового - это старая техника, и вместо этого мы должны стремиться использовать шаблоны, избегающие использования новой.

Самоисполняющаяся анонимная функция соответствует этому критерию.

Ответ на этот вопрос субъективен, потому что в javascript так много стилей кодирования. Однако, основываясь на моих исследованиях и опыте, я бы порекомендовал выбрать использование самоисполняющейся анонимной функции для определения ваших API и, по возможности, избегать использования новых.

Вот как я мог бы пойти на это, IIFE SelfExecutingFunctionчтобы расширить Myclassс Myclass.anotherFunction();

MyClass = (function() {
     var methodOne = function () {};
     var methodTwo = function () {};
     var privateProperty = "private";
     var publicProperty = "public";

    //Returning the anonymous object {} all the methods and properties are reflected in Myclass constructor that you want public those no included became hidden through closure; 
     return {
         methodOne = methodOne;
         methodTwo = methodTwo;
         publicProperty = publicProperty;
     };
})();

@@@@@@@@@@@@@@@@@@@@@@@@
//then define another IIFE SEF to add var function=anothermethod(){};
(function(obj){
return obj.anotherfunction=function(){console.log("Added to Myclass.anotherfunction");};
})(Myclass);

//the last bit : (function(obj){})(Myclass); obj === Myclass obj is an alias to pass the Myclass to IIFE

var myclass = new Myclass();
myclass.anotherfunction(); //"Added to Myclass.anotherfunction"