Hallo Habr. Für zukünftige Studenten des Kurses "JavaScript Developer. Professional" wurde eine Übersetzung von interessantem Material vorbereitet.
Im Rahmen der Rekrutierung von Studenten für den Kurs laden wir Sie ein, an einem offenen Karriere-Webinar teilzunehmen , in dem der Lehrer über sich selbst, seine Berufserfahrung und Fragen zu einer Karriere in diesem Bereich berichtet.
7 Interviewfragen zu JavaScript-Abschlüssen. Kannst du ihnen antworten?
Jeder JavaScript-Entwickler sollte wissen, was ein Abschluss ist. Während eines JavaScript-Codierungsinterviews besteht eine gute Chance, dass Sie nach dem Konzept eines Abschlusses gefragt werden.
Ich habe eine Liste mit 7 interessanten und schwierigen Fragen zu JavaScript-Schließungen zusammengestellt.
Nehmen Sie einen Bleistift, ein Stück Papier und versuchen Sie, die Fragen zu beantworten, ohne auf die Antworten zu achten oder den Code auszuführen. Nach meinen Berechnungen benötigen Sie ca. 30 Minuten.
Habe Spaß!
, A Simple Explanation of JavaScript Closures ( JavaScript).
1:
2:
3:
4:
5:
6: (Restore encapsulation)
7:
1:
: clickHandler
, immediate
, delayReload
:
let countClicks = 0;
button.addEventListener('click', function clickHandler() {
countClicks++;
});
const result = (function immediate(number) {
const message = `number is: ${number}`;
return message;
})(100);
setTimeout(function delayedReload() {
location.reload();
}, 1000);
3 (outer scope)?
clickHandler
countClicks
.
immediate
.
delayReload
location
( (outermost scope)).
2:
(code snippet):
(function immediateA(a) {
return (function immediateB(b) {
console.log(a); // What is logged?
})(1);
})(0);
:
0
. .
immediateA
0
, , 0
.
immediateB
, immediateA
, , a immediateA
, a
0
. , console.log(a)
0
.
3:
(code snippet):
let count = 0;
(function immediate() {
if (count === 0) {
let count = 1;
console.log(count); // What is logged?
}
console.log(count); // What is logged?
})();
:
1
0
. .
let count = 0
count
.
immediate()
— , count . immediate() count
0
.
let count = 1
count
, count . console.log(count)
1
.
console.log(count)
0
, count .
4:
(code snippet):
for (var i = 0; i < 3; i++) {
setTimeout(function log() {
console.log(i); // What is logged?
}, 1000);
}
:
3
, 3
, 3
. .
2 .
1
for()
3 .log()
,i
.setTimout()
log()
1000.
for()
,i
3.
2
1000 :
setTimeout()
log()
.log()
i
, 3, 3.
3
, 3
, 3
.
: 0, 1, 2 ? !
5:
(code snippet):
function createIncrement() {
let count = 0;
function increment() {
count++;
}
let message = `Count is ${count}`;
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log(); // What is logged?
:
'Count is 0'
. .
increment()
3 , count
3.
message
createIncrement()
. 'Count is 0'
. , count
, message
'Count is 0'
.
log()
— , message createIncrement()
. console.log(message)
'Count is 0'
.
: log(), , count? !
6: (Restore encapsulation)
createStack()
:
function createStack() {
return {
items: [],
push(item) {
this.items.push(item);
},
pop() {
return this.items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => [10]
stack.items = [10, 100, 1000]; // Encapsulation broken!
, , . , stack.items
.
, : push()
pop()
, stack.items
.
, , , items
createStack()
:
function createStack() {
// Write your code here...
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
:
(refactoring) createStack()
:
function createStack() {
const items = [];
return {
push(item) {
items.push(item);
},
pop() {
return items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
→
items
createStack()
.
, createStack()
, items
. , : push()
pop()
.
push()
pop()
, , items
createStack()
.
7:
multiply()
, 2 :
function multiply(num1, num2) {
// Write your code here...
}
multiply(num1, numb2)
2 , 2 .
, 1 const anotherFunc = multiply(numb1)
, . anotherFunc(num2)
num1 * num2
.
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
:
multiply()
:
function multiply(number1, number2) {
if (number2 !== undefined) {
return number1 * number2;
}
return function doMultiply(number2) {
return number1 * number2;
};
}
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
→
number2
undefined
, number1*number2
.
number2
undefined
, , multiply()
. doMultiply()
, .
doMultiply()
, number1
multiply()
.
:
5 , .
5 , ,. A Simple Explanation of JavaScript Closures ( JavaScript).
? 7 "this" JavaScript.
"JavaScript Developer. Professional"