Почему в Three.js используется замыкание вместо обычной функции для rotateX

Оффтоп javascript
1

Вопрос по оптимизации в Three.js

Изучаю исходный код Three.js и наткнулся на интересную конструкцию в классе Object3D. Там метод rotateX реализован таким образом:

rotateX: function () {
    var axis = new THREE.Vector3( 1, 0, 0 );
    return function ( rotation ) {
        return this.rotateOnAxis( axis, rotation );
    };
}(),

Не понимаю, зачем так усложнять. Ведь можно было бы написать проще:

rotateX: function (rotation) {
   var axis = new THREE.Vector3( 1, 0, 0 );
   this.rotateOnAxis( axis, rotation );
},

В чем преимущество первого подхода? Есть ли какие-то соображения производительности или это просто стиль кодирования? Понимаю что это больше вопрос по JavaScript, но интересно узнать мнение сообщества.

2

Создавать Vector3 объекты дорого. В первом варианте вектор создается раз при инициализации и переиспользуется. Во втором - новый Vector3 создается при каждом вызове rotateX. Если анимация крутит объект каждый кадр, разница в производительности будет заметна. Стандартная оптимизация для игровых движков и 3D библиотек.

3

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