JavaScript FAQ: Part 1

1. Prototype inheritance. How does it work?

I have a problem understanding the prototype model, I’m used to the “classical” class :) but I decided to study JS. Please, if possible, write an article where, in the form of patterns, explain the possible options for constructing “classes”, different levels of visibility of methods and variables. I understand that such articles can be found in a huge number, I understand that in JS visibility levels are somehow “not needed”.

2. What is the most convenient model for creating objects?

If with new, then how to protect yourself from errors:
1. I always write constructor functions with a capital letter;
2. Check the validity of the creation through this instanceof Function_name (I avoid this instanceof arguments.callee for performance reasons)
3. Similar to the second, but I check with window, because I don’t want to hardcode the name and do not write scripts for out-of-browser environments.

var Obj = function () {
    "use strict";
    this.pew = 100;
};
// Правильно
new Obj.pew++;
// пользователь словит ошибку
Obj(); // TypeError: this is undefined

// Хорошо: меньше кода, не поощряется ошибка, use strict
var Obj = function () {
    "use strict";
    this.pew = 100;
};
// Не очень хорошо: лишний и совершенно ненужный код
var Obj = function () {
    if (!(this instanceof Obj)) {
        return new Obj();
    }
    this.pew = 100;
};

3. How to determine which mouse button is pressed on JS?

var button = document.getElementById('button'),
              //  0       1         2
    buttonMap = ['Left', 'Middle', 'Right'],
    handler = function (event) {
        event = event || window.event;
        alert(buttonMap[event.button] + ' id: ' + event.button);
    };
if (button.addEventListener) {
     button.addEventListener('mousedown',  handler, false);     
} else {
     // IE         0      1       2        3      4
     buttonMap = ['???', 'Left', 'Right', '???', 'Middle'];
     button.attachEvent('onmousedown',  handler);
}

$('button').mousedown(function (event) {
    alert(['Left', 'Middle', 'Right'][event.which]);
});

4. Is it possible to intercept keyboard keystroke events?

Is it possible to intercept keyboard keystroke events (down, up arrow) in javascript so that the browser does not scroll the window after that? Are there any features among browsers in this behavior, if at all possible? For example, there is a table that does not fit the entire screen, while moving along the lines is implemented using the keyboard arrows. It is necessary that the browser does not scroll through the page.

// ИЕ и сафари не отслеживает стрелки на keypress, а Опера глючит на keyup
$(window).bind($.browser.opera ? 'keypress' : 'keyup', function (event) {
    event.preventDefault();
    // или
    return false;
});

$('input').bind('mousedown', function (event) {
    event.preventDefault();
    // или
    return false;
});

5. How to solve the problem of stopping gif-animation when pressing ESC, if this key is bind?

$(document).bind($.browser.webkit ? 'keydown' : 'keypress', function (event) { 
    // Нажали Esc
    if ((event.which || event.keyCode) === 27) {
        event.preventDefault();
        // или
        return false;
    }
});

6. And what is the operator () with which the closure was created?

function () {
  // source
}()

function foo() {
  // source
}()

!function () {
  // source
}();
+function () {
  // source
}();
[function() {
  // source
}()];
var a = function () {
  // source
}();

It is used incl. in jQuery. Allows you to select all the code in one block with a local scope. This speeds up access to internal variables, allows you to clutter up the global namespace, and, most importantly, is better compressed by minifiers. habrahabr.ru/blogs/jquery/118564

7. Forwarding code in XHR

The server sends a response “alert ('Boom !!!');” to the user’s actions in the ajax system. On the client, the received response is run through eval () and executed. What is the name of this data transfer? This is not JSON, not XML, not HTML.

8. How to correctly organize the queue of command execution with a delay without hanging the entire script?

function timedProcessArray(items, process, callback) {
    var todo = items.concat();   //create a clone of the original
    setTimeout(function () {
        var start = +new Date();
        do {
            process(todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));
        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}
function saveDocument(id) {
    var tasks = [openDocument, writeText, closeDocument, updateUI];
    timedProcessArray(tasks, [id], function(){
        alert("Save completed!");
    });
}

9. Is it possible to somehow find out that the user has finished resizing the window?

var time = 0,
    timerId,
    TIME_ADMISSION = 100; // 0.1s
function onresizeend () {
    console.log('onresizeend');
};
function resizeWatcher () {
    if (+new Date - time >= TIME_ADMISSION) {
        onresizeend();
        if (timerId) {
            window.clearInterval(timerId);
            timerId = null;
        }
    }
};
$(window).resize(function () {
    if (!timerId) {
        timerId = window.setInterval(resizeWatcher, 25);
    }
    time = +new Date;
});

10. How to use window.open () to open a new window, and not a tab?

window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');

window.open('http://www.google.com');

function safariOpenWindowInNewTab(href) {
    var event = document.createEvent('MouseEvents'),
        mac = (navigator.userAgent.indexOf('Macintosh') >= 0);
    // выполняем Ctrl+Shift+LeftClick/Meta+Shift+LeftClick (фокус)
    // создаем собственное событие
    event.initMouseEvent(
        /* type */          "click",
        /* canBubble */     true,
        /* cancelable */    true,
        /* view */          window,
        /* detail */        0,
        /* screenX, screenY, clientX, clientY */ 0, 0, 0, 0,
        /* ctrlKey */       !mac,
        /* altKey */        false,
        /* shiftKey */      true,
        /* metaKey */       mac,
        /* button */        0,
        /* relatedTarget */ null
    );
    // создаем ссылку в памяти и кликеам этм событием по ссылке - откроется новый таб
    $('', {'href': href, 'target': '_blank'})[0].dispatchEvent(event);
}

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
var newObject = object(oldObject);

var cloner = {
    _clone: function _clone(obj) {
        if (obj instanceof Array) {
            var out = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                var value = obj[i];
                out[i] = (value !== null && typeof value === "object") ? _clone(value) : value;
            }
        } else {
            var out = {};
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    var value = obj[key];
                    out[key] = (value !== null && typeof value === "object") ? _clone(value) : value;
                }
            }
        }
        return out;
    },
    clone: function(it) {
        return this._clone({
        it: it
        }).it;
    }
};
var newObject = cloner.clone(oldObject);

// Мелкое копирование
var newObject = jQuery.extend({}, oldObject);
// Глубокое копирование
var newObject = jQuery.extend(true, {}, oldObject);

12. How to make an analog destructor / finalizer? And in general, how to manage the lifetime of objects?

var a = {z: 'z'};
var b = a;
var c = a;
delete a.z;
delete a; // Мы всего лишь удаляем убиваем ссылку "а"
console.log(b, c); // Объект по факту существует: Object {} Object {}, но он пустой

13. Is it possible to process binary data? If so, how?

const Point2D = new StructType({ x: uint32, y: uint32 });
const Color = new StructType({ r: uint8, g: uint8, b: uint8 });
const Pixel = new StructType({ point: Point2D, color: Color });
const Triangle = new ArrayType(Pixel, 3);
let t = new Triangle([{ point: { x:  0, y: 0 }, color: { r: 255, g: 255, b: 255 } },
                      { point: { x:  5, y: 5 }, color: { r: 128, g: 0,   b: 0   } },
                      { point: { x: 10, y: 0 }, color: { r: 0,   g: 0,   b: 128 } }]);

14. How to change context variables of another function from one function?

var primer = function (){
    var a, b, c, d, e = {};
    smth(function () {
        a = 1;
        b = 2;
        c = 3;
        d = 4;
    }, e);
    alert([a, b, c, d, e.pewpew]);
},
smth = function (callback, e) {
    callback();
    e.pewpew = "pewpew";
};
primer();

15. Regarding the article “Five Ways to Call a Function”. Which of these N methods (in heading 5, in article 4, several in the comments) is better when to apply and why?

// Вспомогательная функция
function extend(newObj, oldObj) {function F() {}F.prototype = oldObj.prototype;newObj.prototype = new F();return newObj}
var Obj = function () {
   this.obj_var = 100;
};
Obj.prototype.obj_proto_var = 101;
var NewObj = function () {
   Obj.call(this); // Вызываем конструктор Obj и получаем Own property obj_var
   this.new_obj_var = 102;
};
extend(NewObj, Obj)
NewObj.prototype.new_obj_proto_var = 103; 
new NewObj(); // {new_obj_proto_var: 103, new_obj_var: 102, obj_proto_var: 101, obj_var: 100}

// document.getElementsByTagName("div") возвращает не массив (хотя похож), поэтому мы не можем выполнять методы массива  
document.getElementsByTagName("div").forEach(function (elem) {
    // ...
}); // TypeError: document.getElementsByTagName("div").forEach is not a function
// Приводим к массиву: мы подсовываем фукнции slice this, который поход на массив
Array.prototype.slice.call(document.getElementsByTagName("div")).forEach(function (elem) {
    // OK
});
// Аналогично можно сделать со строками
Array.prototype.slice.call('pewpew') // ["p", "e", "w", "p", "e", "w"]
// В ИЕ8- будет будет массив из undefined

In a traditional form, it would look like this:

function bar() {}
// foo(context, arg1, arg2, ...)
function foo() {
    var context = arguments[0]; 
    var args = Array.prototype.slice.call(arguments, 1); //делаем массив аргументов для bar
    bar.apply(context, args);
}

Instead of this salad use the call.apply trick:

function foo() { 
    Function.call.apply(bar, arguments);
}

It works like this: aplly calls Function.call on the bar object with parameters passed to foo. That is, we get the following for the very first example with context and arg1, arg2:

bar.call(context, arg1, arg2)

16. How to transfer scope of execution of one function to another?

17. How to get a global object correctly without its direct reference, without eval and with 'use strict'?

// 1: eval - on
(function(){
    "use strict";
    var globalObject = (0, eval)("this"); // Магия :)
    return globalObject;
}());
// 2: указание имени - on
(function(global){
    // ...
}(window));
// 3: "use strict" - off
(function(){
    return this;
}());
// 4: Если выполнить вот этот код в глобалах, то мы получим ссылку на глобальную переменную, но в остальных случаях он не будет работать.
// Это самый оптимальный вариант
"use strict";
(function(global){
    // global
})(this);

18. Is it possible in javascript after intercepting the event to restart it later?

$('#smth').click(function onSmthClick(event){
    if (smth) {
        // Прописать обработчик
        event.handlerFunction = onSmthClick;
        event.handlerContext = this;
        // передать левому объекту
        // теперь otherObjectSetSomeEvent может использовать event.handlerFunction и вызывать обработчик
        otherObjectSetSomeEvent(event);
    } else {
        // делаем что-то другое
    }
});

$('#smth').click(function handler1(event) {
    if (smth) {
        // передать левому объекту
        leftObjectSetSomeEvent(event, function handler2(e) {
            // делаем что-нибудь с event или e
        });
    } else {
        // делаем что-то другое
    }
});
function leftObjectSetSomeEvent(event, callback) {
    callback(event);
    // делаем что-нибудь с event
}

19. And you did not think to write your reference book on js? Tell me where to learn JavaScript in depth? Books, tutorials?

20. How on JS to intercept all clicks on the page on any elements? That is, make a single click handler

// jQuery
$(window).bind('click', function (e) {
    console.log('Clicked on ', e.target);
});
// Можно также ограничить какой-то областью, используя jQuery delegate
$('#pewpew').delegate('*', 'click', function (e) {
    console.log('Clicked on ', e.target);
});
// Можно ограничить и цели
$('#pewpew').delegate('.pewpew', 'click', function (e) {
    console.log('Clicked on element with .pewpew class name');
});

21. How to execute XHR without jQuery?

function xhr(m,u,c,x){with(new XMLHttpRequest)onreadystatechange=function(x){readyState^4||c(x.target)},open(m,u),send(с)}

function xhr(m,u,c,x){with(new(this.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP"))onreadystatechange=function(x){readyState^4||c(x)},open(m,u),send(с)}

xhr('get', '//ya.ru/favicon.ico', function(xhr){console.dir(xhr)});

22. Work with the file system

I wanted to learn about working with the file system via JavaScript, for example, reading and writing to files. Most textbooks describe JavaScript for browsers, where working with files is not necessary, but for example in a server application or for example in XUL, this is a necessity, but there is very little documentation, if any.

23. Reflow, repaint and methods for minimizing them

Browsers can optimize animations running at the same time, reducing the number of reflow and repaint to one, which in turn will increase the accuracy of the animation. For example, animations in JavaScript synchronized with CSS transitions or SVG SMIL. Plus, if the animation is performed in a tab that is invisible, browsers will not continue to redraw, which will lead to less use of CPU, GPU, memory and as a result will reduce battery consumption in mobile devices.

// Вместо
element.style.left="150px;";
//...
element.style.color="green";
// Измените все сразу
element.setAttribute('style', 'color:green;left:150px');

24. Is it worth using childProcesses in node.js for every request in highly loaded projects?

25. Using runInNewContext in node.js

Conclusion