Нюансов закрытия над в Javascript

Question

Я пытался понять функциональные методы композиционных Javascript и я придумал свой рабочий код игрушечные квази-MVC, чтобы продемонстрировать свой вопрос:

var modelFactory = function() { 
 
    var _state = false; 
 
    var _listener = null; 
 

 
    var _updateView = function() { 
 
    _listener(_state); 
 
    }; 
 

 
    var _interface = { 
 
    registerListener: function(listen) { 
 
     _listener = listen; 
 
    }, 
 
    eventHandler: function() { 
 
     _state = true; 
 
     _updateView(); 
 
    } 
 
    }; 
 
    return _interface; 
 
}; 
 

 
var viewFactory = function(updateFunction) { 
 
    var _hook = $('<div class="box"></div>'); 
 
    $('body').append(_hook); 
 

 
    var _interface = { 
 
    getHook: function getHook() { 
 
     return _hook; 
 
    }, 
 
    update: updateFunction(_hook) 
 
    }; 
 

 
    return _interface; 
 
}; 
 

 

 
var main = function() { 
 

 
    var modelInstance = modelFactory(); 
 

 
    var viewInstance = viewFactory(
 
    function bindHook (hook) { 
 
     return function bindState (state) { 
 
     if (state === true) { 
 
      hook.addClass("red"); 
 
     } else { 
 
      hook.removeClass("red"); 
 
     } 
 
     }; 
 
    } 
 
); 
 

 
    modelInstance.registerListener(viewInstance.update); 
 
    modelInstance.eventHandler(); // When called, mutates _state, then calls the listener 
 
}; 
 

 
$(document).ready(main);

.box { 
 
    background-color: #000; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.red { 
 
    background-color: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Я хочу, чтобы абстрагироваться от привязки «крючка», поэтому я могу просто передать функцию привязки «состояние» к функции, которая затем связывает «крючок». Я не понял, как это сделать с помощью поздних ссылок. Предложения Javascript (примените/вызовите это). Я могу передать объектные ссылки, чтобы сохранить состояние, и сделать все, но я заинтересован в более функциональных подходах к решению этого. Итак:

а) Есть ли способ сделать то, что я пытаюсь сделать с основными затворами Javascript, если да, то как, или

б) Если я должен использовать позднее связывание «это» основанное методы, какой был бы лучший подход? Я предполагаю, что это проверенный и правдивый способ обобщения состояния функции в Javascript, но код, который я пишу для этого, оказывается бесполезным.

Answer 1

Я думаю, что вы просто хотите поставить создание закрытия в вашем viewFactory:

function viewFactory(updateFunction) { 
    var _hook = $('<div class="box"></div>'); 
    return { 
    getHook: function getHook() { 
     return _hook; 
    }, 
    update: function(state) { 
     return updateFunction(_hook, state) 
    } 
    }; 
} 

… 
var viewInstance = viewFactory(function bindState(hook, state) { 
    hook[state ? "addClass" : "removeClass"]("red"); 
}); 
$('body').append(viewInstance.getHook()); 
modelInstance.registerListener(viewInstance.update); 

Создание этого замыкания является только случаем partial application, который мог бы быть, конечно, отведенный в вспомогательной функции (для называться как update: partial(updateFunction, _hook)).

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

update: function(state) { 
    return updateFunction.call(_hook, state); // notice the similarity to above 
} 

или просто (эквивалентно)

update: updateFunction.bind(_hook)