| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Closures | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
, . , Scope . JavaScript , .
:
function init() {
var name = "Mozilla"; // name - , init
function displayName() {
// displayName() - ,
alert(name); // displayName() ,
}
displayName();
}
init();
init() name displayName(). displayName() init() init(). , displayName() . , , displayName() name, init().
, alert() displayName() name . (lexical scoping): JavaScript ( ), , . Lexical scoping ( , ).
:
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
, , init() : "Mozilla" JavaScript alert . , , displayName() , .
, , , . - . makeFunc() , name . , , , JavaScript.
, JavaScript . , . , . myFunc displayName, makeFunc. displayName , name. , myFunc, name "Mozilla" alert.
makeAdder:
function makeAdder(x) {
return function (y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
makeAdder(x), x . y x y.
makeAdder : , . 5 , 10.
add5 add10 . , . add5 x 5, add10 x 10.
, ( ) , . - , ( ) .
, , .
web-. front-end , JavaScript, . - , , (, ). / (callback): callback - .
: , , . , font-size body , (, ) em:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
font-size body, .
JavaScript:
function makeSizer(size) {
return function () {
document.body.style.fontSize = size + "px";
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
size12, size14, size16 - , body 12, 14, 16 , . :
document.getElementById("size-12").onclick = size12;
document.getElementById("size-14").onclick = size14;
document.getElementById("size-16").onclick = size16;
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
, Java, , .
const counter = (function () {
let privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment() {
changeBy(1);
},
decrement() {
changeBy(-1);
},
value() {
return privateCounter;
},
};
})();
console.log(counter.value()); // 0.
counter.increment();
counter.increment();
console.log(counter.value()); // 2.
counter.decrement();
console.log(counter.value()); // 1.
. (). : Counter.increment, Counter.decrement, Counter.value.
, . : privateCounter changeBy(val). , . , (anonymous wrapper), .
, (). lexical scoping Javascript, privateCounter changeBy.
, , , , Counter. , , :
var makeCounter = function () {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function () {
changeBy(1);
},
decrement: function () {
changeBy(-1);
},
value: function () {
return privateCounter;
},
};
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
alert(Counter1.value()); /* Alerts 0 */
Counter1.increment();
Counter1.increment();
alert(Counter1.value()); /* Alerts 2 */
Counter1.decrement();
alert(Counter1.value()); /* Alerts 1 */
alert(Counter2.value()); /* Alerts 0 */
, . , makeCounter() (). privateCounter , .
, , - , .
, ECMAScript 6 let, . :
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email" /></p>
<p>Name: <input type="text" id="name" name="name" /></p>
<p>Age: <input type="text" id="age" name="age" /></p>
function showHelp(help) {
document.getElementById("help").innerHTML = help;
}
function setupHelp() {
var helpText = [
{ id: "email", help: " e-mail" },
{ id: "name", help: " " },
{ id: "age", help: " ( 16)" },
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function () {
showHelp(item.help);
};
}
}
setupHelp();
helpText . , onfocus , .
, , , . , .
, , onfocus, . (), setupHelp. , . onfocus , , item ( ) , .
, (function factory), :
function showHelp(help) {
document.getElementById("help").innerHTML = help;
}
function makeHelpCallback(help) {
return function () {
showHelp(help);
};
}
function setupHelp() {
var helpText = [
{ id: "email", help: " e-mail" },
{ id: "name", help: " " },
{ id: "age", help: " ( 16)" },
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}
setupHelp();
. , , makeHelpCallback , item helpText.
, . , .
, , . -, , , .
, :
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function () {
return this.name;
};
this.getMessage = function () {
return this.message;
};
}
, :
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function () {
return this.name;
},
getMessage: function () {
return this.message;
},
};
. , , , .
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function () {
return this.name;
};
MyObject.prototype.getMessage = function () {
return this.message;
};
:
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
(function () {
this.getName = function () {
return this.name;
};
this.getMessage = function () {
return this.message;
};
}).call(MyObject.prototype);
This page was last modified on 27 . 2026 . by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |