{"id":315040,"date":"2020-12-17T15:00:42","date_gmt":"2020-12-17T15:00:42","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=315040"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=315040","title":{"rendered":"\u0420\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u041e\u041f\u041f) \u0432 JavaScript. \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p><strong>\u0414\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u043a\u0443\u0440\u0441\u0430 &#171;<\/strong><a href=\"https:\/\/otus.pw\/pZGk\/\"><strong>JavaScript Developer. Basic&#187;<\/strong><\/a><strong>&nbsp;\u0438 \u0432\u0441\u0435\u0445 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/strong><\/p>\n<\/p>\n<p><strong>\u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a \u043d\u0430 \u0442\u0435\u043c\u0443&nbsp;<\/strong><a href=\"https:\/\/otus.pw\/1SnH\/\"><strong>&#171;\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 JavaScript&#187;.<\/strong><\/a><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b9e\/616\/82e\/b9e61682e70a3312751908c61e0e3c16\" width=\"780\" height=\"439\"><figcaption><\/figcaption><\/figure>\n<hr>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/532944\/\">\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u0432\u0430 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n<p>\u041d\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f: \u041a\u0430\u043a\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c? \u0418 \u043f\u043e\u0447\u0435\u043c\u0443?<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u041a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0442\u0440\u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><code>this<\/code><\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438.<\/p>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043b\u043e\u0432\u043e, \u043d\u043e \u043e\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0430\u043a\u0442 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0449\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u0440\u0443\u0433\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0449\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u043e\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0440\u0443\u0436\u0443. \u041f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u043e\u0434\u0443 \u0432 \u0431\u0443\u0442\u044b\u043b\u043a\u0435. \u0411\u0443\u0442\u044b\u043b\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0442\u0435\u0447\u043a\u0443 \u0432\u043e\u0434\u044b.<\/p>\n<p>\u0412 JavaScript \u043c\u044b \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438), \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u043e\u0447\u0438\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u043d\u043e \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 <a href=\"https:\/\/css-tricks.com\/javascript-scope-closures\/\"><u>\u0441\u0442\u0430\u0442\u044c\u044e<\/u><\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430\u0445.<\/p>\n<h3>\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u0421\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u2014 \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u0441\u0444\u0435\u0440\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">{   \/\/ Variables declared here won't leak out }<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u0431\u043b\u043e\u043a\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0435 \u0431\u043b\u043e\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">const food = 'Hamburger'  {   console.log(food) }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d1\/0aa\/cac\/0d10aacac7fa529c3e3e418a470d0547.png\" width=\"996\" height=\"240\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441&nbsp; <code>var<\/code> \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u044e\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/zellwk.com\/blog\/es6\/#let-and-const\"><u>&nbsp;\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c let or const<\/u><\/a> \u0434\u043b\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/h3>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u0431\u043b\u043e\u043a \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u043d\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u0442\u0435\u0447\u044c \u0438\u0437 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">function sayFood () {   const food = 'Hamburger' }  sayFood() console.log(food)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0de\/510\/68d\/0de51068de61bd3aeb55356eb455e515.png\" width=\"996\" height=\"240\"><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">const food = 'Hamburger'  function sayFood () {   console.log(food) }   sayFood()<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/54c\/bee\/7ff\/54cbee7ff214a7a0b970615c06af7933.png\" width=\"992\" height=\"204\"><figcaption><\/figcaption><\/figure>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u0437\u0436\u0435, \u0432\u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">function sayFood () {   return 'Hamburger' }  console.log(sayFood())<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/449\/01d\/a18\/44901da1839c0fd23e427cbd3996fa35.png\" width=\"992\" height=\"204\"><figcaption><\/figcaption><\/figure>\n<h4>\u0424\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f<\/h4>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">\/\/ Here's a closure function outsideFunction () {   function insideFunction () { \/* ...*\/ } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 <code>outsideFunction<\/code> \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 <code>insideFunction<\/code>.<\/p>\n<pre><code class=\"javascript\">function outsideFunction () {   const food = 'Hamburger'   console.log('Called outside')    return function insideFunction () {     console.log('Called inside')     console.log(food)   } }  \/\/ Calls `outsideFunction`, which returns `insideFunction` \/\/ Stores `insideFunction` as variable `fn` const fn = outsideFunction()   \/\/ Calls `insideFunction` fn()<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/64e\/2d1\/29b\/64e2d129b1499ceda226f3dd568f7e93.png\" width=\"908\" height=\"314\"><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 (\u0447\u0442\u043e\u0431\u044b \u043b\u044e\u0434\u0438 \u043c\u043e\u0433\u043b\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c). \u041d\u043e \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c\u0438 (\u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c \u0412\u0430\u0448\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e).<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0449\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>a Car<\/code> blueprint. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438, \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c 50 \u043b\u0438\u0442\u0440\u0430\u043c\u0438 \u0442\u043e\u043f\u043b\u0438\u0432\u0430.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     this.fuel = 50   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0441\u043a\u0440\u044b\u043b\u0438 <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fuel<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u043f\u043b\u0438\u0432\u0430, \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0432 \u0438\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445.<\/p>\n<pre><code class=\"javascript\">const car = new Car() console.log(car.fuel) \/\/ 50<\/code><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043f\u043b\u0438\u0432\u0430.<\/p>\n<pre><code class=\"javascript\">const car = new Car() car.fuel = 3000 console.log(car.fuel) \/\/ 3000<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0438 \u0441\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c 100 \u043b\u0438\u0442\u0440\u043e\u0432. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0442\u043e\u043f\u043b\u0438\u0432\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c.<\/p>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<\/ol>\n<h3>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/h3>\n<p>\u0412 JavaScript \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f<strong>.<\/strong> \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     \/\/ Denotes that `_fuel` is private. Don't use it!     this._fuel = 50   } }<\/code><\/pre>\n<p>\u041c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>fuel<\/code> &#171;\u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439\u201d.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {      \/\/ Denotes that `_fuel` is private. Don't use it!     this._fuel = 50   }    getFuel () {     return this._fuel   }    setFuel (value) {     this._fuel = value     \/\/ Caps fuel at 100 liters     if (value &gt; 100) this._fuel = 100   } }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b <code>getFuel<\/code> \u0438 <code>setFuel<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">const car = new Car()  console.log(car.getFuel()) \/\/ 50   car.setFuel(3000) console.log(car.getFuel()) \/\/ 100 <\/code><\/pre>\n<p>\u041d\u043e <code>fuel<\/code>&nbsp;\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439. \u042d\u0442\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f. \u0412\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f, \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435, \u0438 \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0435\u044e (\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u044c\u044e).<\/p>\n<pre><code class=\"javascript\">const car = new Car()  console.log(car.getFuel()) \/\/ 50   car._fuel = 3000 console.log(car.getFuel()) \/\/ 3000<\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0438\u043c.<\/p>\n<h3>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u042d\u0442\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d.<\/p>\n<h4>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438<\/h4>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f <code>#<\/code> \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     this.#fuel = 50   } }<\/code><\/pre>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>#<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>constructor<\/code><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3e4\/67c\/027\/3e467c027e1b69b68284cf17d9824559.png\" width=\"1486\" height=\"238\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">class Car {   \/\/ Declares private variable   #fuel    constructor () {     \/\/ Use private variable     this.#fuel = 50   } }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c <code>#fuel<\/code> \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 fuel \u043d\u0430 50.<\/p>\n<pre><code class=\"javascript\">class Car {   #fuel = 50 }<\/code><\/pre>\n<p>\u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a&nbsp;<code>#fuel<\/code> \u0438\u0437 <code>Car<\/code>. \u0423 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">const car = new Car() console.log(car.#fuel)<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c83\/918\/d88\/c83918d8839482c5d68f1f8783643459.png\" width=\"1486\" height=\"238\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>getFuel<\/code> \u0438\u043b\u0438 <code>setFuel<\/code>) \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e&nbsp; <code>#fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">class Car {   #fuel = 50    getFuel () {     return this.#fuel   }    setFuel (value) {     this.#fuel = value     if (value &gt; 100) this.#fuel = 100   } }  const car = new Car() console.log(car.getFuel()) \/\/ 50  car.setFuel(3000) console.log(car.getFuel()) \/\/ 100<\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e <code>Getters<\/code> and <code>Setters<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>getFuel<\/code> \u0438 <code>setFuel<\/code>. <a href=\"https:\/\/zellwk.com\/blog\/why-use-getter-and-setter-functions\/\"><u>\u0421\u0438\u043d\u0442\u0430\u043a\u0441 \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c.<\/u><\/a><\/p>\n<\/blockquote>\n<pre><code class=\"javascript\">class Car {   #fuel = 50    get fuel () {     return this.#fuel   }    set fuel (value) {     this.#fuel = value     if (value &gt; 100) this.#fuel = 100   } }  const car = new Car() console.log(car.fuel) \/\/ 50  car.fuel = 3000 console.log(car.fuel) \/\/ 100<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/h3>\n<p>\u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0445 \u0447\u043b\u0435\u043d\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043d\u0438\u0433\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<pre><code class=\"javascript\">function Car () {   const fuel = 50  }  const car = new Car()  console.log(car.fuel) \/\/ undefined  console.log(fuel) \/\/ Error: `fuel` is not defined<\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>getter<\/code> and <code>setter<\/code> \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">function Car () {   const fuel = 50     return {     get fuel () {        return fuel      },      set fuel (value) {       fuel = value        if (value &gt; 100) fuel = 100     }   } }  const car = new Car() console.log(car.fuel) \/\/ 50  car.fuel = 3000 console.log(car.fuel) \/\/ 100<\/code><\/pre>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a! \u041f\u0440\u043e\u0441\u0442\u043e \u0438 \u043b\u0435\u0433\u043a\u043e!<\/p>\n<h3>\u0412\u0435\u0440\u0434\u0438\u043a\u0442 \u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438<\/h3>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u041e\u043d\u0438 \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0444\u0435\u0440\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044f\u0437\u044b\u043a\u0430 JavaScript.<\/p>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>#<\/code> \u043a \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0449\u0438 \u043d\u0435\u0443\u043a\u043b\u044e\u0436\u0438\u043c\u0438.<\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u2014 \u044d\u0442\u043e \u0434\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u2014 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n<hr>\n<h2>\u041a\u043b\u0430\u0441\u0441\u044b \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u2014 this \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<\/h2>\n<p><code>this<\/code>&nbsp;\u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0442\u0438\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u0447\u0435\u043c\u0443? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>this<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443 \u043c\u043d\u043e\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 (\u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0445, \u0442\u0430\u043a \u0438 \u043e\u043f\u044b\u0442\u043d\u044b\u0445).<\/p>\n<p>\u041d\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f <code>this<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u044d\u0442\u0438 \u0448\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>this<\/code>.<\/p>\n<p>\u0428\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0412 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \/ \u043c\u0435\u0442\u043e\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/zellwk.com\/blog\/this\/\"><u>\u042f \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u044d\u0442\u0438 6 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445.<\/u><\/a> \u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c <code>this<\/code>.<\/p>\n<blockquote>\n<p><strong>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> <a href=\"https:\/\/zellwk.com\/blog\/should-you-use-this\/\"><u>\u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0443\u0447\u0438\u0442\u044c<\/u><\/a> this. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u044b \u043e\u0432\u043b\u0430\u0434\u0435\u0442\u044c JavaScript.<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0439\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0448\u044c \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043e\u0431 <code>this<\/code>. \u041c\u044b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>this<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445.<\/p>\n<p>\u0423\u0436\u0435 \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c? \u0425\u043e\u0440\u043e\u0448\u043e. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!&nbsp;<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 this \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445<\/h3>\n<p><code>This<\/code> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435. (\u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#171;\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\/\u043c\u0435\u0442\u043e\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430&#187;.) \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>constructor<\/code>.<\/p>\n<pre><code class=\"javascript\">class Human {   constructor (firstName, lastName) {     this.firstName = firstName     this.lastName = lastName     console.log(this)   } }  const chris = new Human('Chris', 'Coyier')<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e00\/4e2\/a47\/e004e2a47e25da0a84a9b0baba642f45.png\" width=\"1198\" height=\"352\"><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 This \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>this<\/code> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 <code>new<\/code> \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, <code>this<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440. \u0422\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   this.firstName = firstName    this.lastName = lastName   console.log(this)   }  const chris = new Human('Chris', 'Coyier')<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f45\/f04\/e72\/f45f04e72d634f70700e413cdf70e7cd.png\" width=\"1198\" height=\"352\"><figcaption><\/figcaption><\/figure>\n<p>\u042f \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code>&nbsp;\u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041d\u043e <code>this<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 Window (\u0438\u043b\u0438 <code>undefined<\/code> \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 ES6 \u041c\u043e\u0434\u0443\u043b\u0438, \u0438\u043b\u0438 \u043f\u0430\u043a\u0435\u0442\u044b \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a webpack).<\/p>\n<pre><code class=\"javascript\">\/\/ NOT a Constructor function because we did not create instances with the `new` keyword function Human (firstName, lastName) {   this.firstName = firstName    this.lastName = lastName   console.log(this)   }  const chris = Human('Chris', 'Coyier')<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ece\/2af\/ed3\/ece2afed360a0752d2b72dfce48c15f5.png\" width=\"1190\" height=\"400\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code> \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0437\u0430\u043c\u0438\u043d\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u044e\u0434\u0438 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u044e\u0442 \u0441 <code>this<\/code>. \u042f \u0445\u043e\u0442\u0435\u043b \u043e\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u043f\u0440\u043e\u044f\u0441\u043d\u0438\u0442\u044c \u0435\u0435.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 This \u0432 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438&nbsp;<\/h3>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>this<\/code> \u0432 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 &#171;\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\/\u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u044a\u0435\u043a\u0442\u0430&#187;.<\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   return {     firstName,     lastName,     sayThis () {       console.log(this)     }   } }  const chris = Human('Chris', 'Coyier') chris.sayThis()<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/77e\/636\/c51\/77e636c51b57c236e65f8172cda16ef8.png\" width=\"1200\" height=\"404\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code> \u0432 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043c\u0435\u0441\u0442\u043e <code>this<\/code>. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   const human = {     firstName,     lastName,     sayHello() {       console.log(`Hi, I'm ${human.firstName}`)     }   }    return human }  const chris = Human('Chris', 'Coyier') chris.sayHello()<\/code><\/pre>\n<p><code>human.firstName<\/code> \u044f\u0441\u043d\u0435\u0439 \u0447\u0435\u043c <code>this.firstName<\/code> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>human<\/code> \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440. \u0422\u044b \u0437\u043d\u0430\u0435\u0448\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0448\u044c \u043a\u043e\u0434.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a JavaScript, \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u0430\u0436\u0435 \u043f\u0438\u0441\u0430\u0442\u044c <code>human.firstName<\/code> \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e! \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e <code>firstName<\/code> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>firstName<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043b\u0435\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435. (\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 <a href=\"https:\/\/css-tricks.com\/javascript-scope-closures\/\"><u>\u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e<\/u><\/a> \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.)<\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   const human = {     firstName,     lastName,     sayHello() {       console.log(`Hi, I'm ${firstName}`)     }   }    return human }  const chris = Human('Chris', 'Coyier') chris.sayHello()<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/abf\/ff2\/5e8\/abfff25e8e5ef77a1d9c9941b61a1987.png\" width=\"854\" height=\"204\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043a\u0430 \u043e\u0445\u0432\u0430\u0442\u0438\u043b\u0438, \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0435\u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0448\u0438\u0442\u044c, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 <code>this<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e.<\/p>\n<h3>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/h3>\n<p>\u0412\u043e\u0442 \u0438 \u0441\u0445\u0435\u043c\u0430. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>Human blueprint<\/code>. \u0423 <code>Human<\/code> \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>firstName<\/code> \u0438 <code>lastName<\/code>, \u0438 \u043c\u0435\u0442\u043e\u0434 <code>sayHello<\/code>.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Developer <code>blueprint<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 <code>Human<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>code<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c <code>sayHello<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>I'm a Developer<\/code> \u043a \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. (\u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 <code>this<\/code> \u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0435\u0437 <code>this<\/code> \u0434\u043b\u044f \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439).<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443 \u043d\u0430 \u0435\u0441\u0442\u044c <code>Human blueprint<\/code>. \u0423 <code>Human<\/code> \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>firstName<\/code> \u0438 <code>lastName<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u0442\u043e\u0434&nbsp;<code>sayHello<\/code>.<\/p>\n<pre><code class=\"javascript\">class Human {   constructor (firstName, lastName) {     this.firstName = firstName     this.lastname = lastName    }    sayHello () {     console.log(`Hello, I'm ${this.firstName}`)   } }<\/code><\/pre>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>Developer blueprint<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 <code>Human<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043a\u043e\u0434\u0438\u0442\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>code<\/code>.<\/p>\n<pre><code class=\"javascript\">class Developer extends Human {   code (thing) {     console.log(`${this.firstName} coded ${thing}`)   } }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f\u0442 \u0437\u0430\u044f\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c <code>sayHello<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>I'm a Developer<\/code> \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u041c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434 <code>Human\u2018s sayHello<\/code>. \u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>super<\/code>.<\/p>\n<pre><code class=\"javascript\">class Developer extends Human {   code (thing) {     console.log(`${this.firstName} coded ${thing}`)   }    sayHello () {     super.sayHello()     console.log(`I'm a developer`)   } }<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0441&nbsp; this)<\/h3>\n<p>\u0422\u0430\u043a\u0436\u0435, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>Human blueprint<\/code>. \u0423 <code>Human<\/code> \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>firstName<\/code> \u0438 <code>lastName<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u0442\u043e\u0434 <code>sayHello<\/code>.<\/p>\n<pre><code class=\"javascript\">function Human () {   return {     firstName,     lastName,     sayHello () {       console.log(`Hello, I'm ${this.firstName}`)     }   } }<\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>Developer blueprint<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 <code>Human<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u0442\u043e\u0434 <code>code<\/code>.&nbsp;<\/p>\n<pre><code class=\"javascript\">function Developer (firstName, lastName) {   const human = Human(firstName, lastName)   return Object.assign({}, human, {     code (thing) {       console.log(`${this.firstName} coded ${thing}`)     }   }) }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f\u0442 \u0437\u0430\u044f\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c <code>sayHello<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>I'm a Developer<\/code> \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u041c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434 <code>Human\u2018s sayHello<\/code>. \u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>human<\/code>.<\/p>\n<pre><code class=\"javascript\">function Developer (firstName, lastName) {   const human = Human(firstName, lastName)   return Object.assign({}, human, {     code (thing) {       console.log(`${this.firstName} coded ${thing}`)     },      sayHello () {       human.sayHello()       console.log('I\\'m a developer')     }   }) }<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0431\u0435\u0437&nbsp;this)<\/h3>\n<p>\u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0441 <code>this<\/code>):<\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   return {     firstName,     lastName,     sayHello () {       console.log(`Hello, I'm ${this.firstName}`)     }   } }  function Developer (firstName, lastName) {   const human = Human(firstName, lastName)   return Object.assign({}, human, {     code (thing) {       console.log(`${this.firstName} coded ${thing}`)     },      sayHello () {       human.sayHello()       console.log('I\\'m a developer')     }   }) }<\/code><\/pre>\n<p>\u0412\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e <code>firstName<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043b\u0435\u043a\u0441\u0438\u043a\u0438 \u0443 \u043e\u0431\u043e\u0438\u0445 <code>Human<\/code> \u0438 <code>Developer<\/code>? \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>this<\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>firstName<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u043e\u0431\u043e\u0438\u0445 <code>blueprints<\/code><\/p>\n<pre><code class=\"javascript\">function Human (firstName, lastName) {   return {     \/\/ ...     sayHello () {       console.log(`Hello, I'm ${firstName}`)     }   } }  function Developer (firstName, lastName) {   \/\/ ...   return Object.assign({}, human, {     code (thing) {       console.log(`${firstName} coded ${thing}`)     },      sayHello () { \/* ... *\/ }   }) }<\/code><\/pre>\n<p>\u0412\u0438\u0434\u0438\u0442\u0435? \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>this<\/code> \u0438\u0437 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<h3>\u0412\u0435\u0440\u0434\u0438\u043a\u0442 \u0434\u043b\u044f this&nbsp;<\/h3>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u041a\u043b\u0430\u0441\u0441\u044b \u0442\u0440\u0435\u0431\u0443\u044e\u0442 <code>this<\/code>, \u0430 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u043d\u0435\u0442. \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:<\/p>\n<p>\u2022 \u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 this \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f (\u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443).<\/p>\n<p>\u2022 \u041a\u043e\u0434, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0440\u043e\u0447\u0435 \u0438 \u0447\u0438\u0449\u0435 (\u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0435\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f <code>this.#variable<\/code>).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b, \u0433\u0434\u0435 \u043c\u044b \u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0435\u043c \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0438 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n<h3>\u041a\u043b\u0430\u0441\u0441\u044b \u043f\u0440\u043e\u0442\u0438\u0432 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h3>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0431\u0435\u0437 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u042d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043d\u043e \u043e\u043d\u0438 \u043d\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u0420\u0430\u0431\u043e\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u2014 \u043f\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a <a href=\"https:\/\/zellwk.com\/blog\/this\/\"><u>\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u0435\u043d\u044f\u044e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/u><\/a> <code>this<\/code>, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n<p>\u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 <code>this<\/code> \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 <code>this<\/code> \u043a\u0430\u043a \u0432 \u041a\u043b\u0430\u0441\u0441\u0430\u0445, \u0442\u0430\u043a \u0438 \u0432 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. \u041c\u0430\u043b\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0442\u0430\u043a \u0447\u0442\u043e \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u043f\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<h3>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u2014 \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ol>\n<li>\n<p>\u0421\u0430\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c10\/e41\/ec0\/c10e41ec00467380be0b40dcaa45d85a.png\" width=\"966\" height=\"276\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 HTML \u0434\u043b\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;div class=\"counter\"&gt;   &lt;p&gt;Count: &lt;span&gt;0&lt;\/span&gt;   &lt;button&gt;Increase Count&lt;\/button&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430\u0439\u0442\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c HTML \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441 <code>Counter<\/code>.<\/p>\n<pre><code class=\"javascript\">class Counter () {   constructor (counter) {     \/\/ Do stuff    }  }  \/\/ Usage  const counter = new Counter(document.querySelector('.counter'))<\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u0421\u0447\u0435\u0442\u0447\u0438\u043a:<\/p>\n<ol>\n<li>\n<p><code>&lt;span&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u2014 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 <code>&lt;button<\/code>&gt; \u2014 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">Counter () {   constructor (counter) {     this.countElement = counter.querySelector('span')     this.buttonElement = counter.querySelector('button')   } }<\/code><\/pre>\n<p>\u041c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <code>count<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0435 \u0432 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>countElement<\/code>. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e <code>#count<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">class Counter () {   #count   constructor (counter) {     \/\/ ...      this.#count = parseInt(countElement.textContent)   }  }<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 <code>&lt;button&gt;<\/code>, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c <code>#count<\/code>. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430. \u041c\u044b \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 <code>increaseCount<\/code>.<\/p>\n<pre><code class=\"javascript\">class Counter () {   #count   constructor (counter) { \/* ... *\/ }    increaseCount () {     this.#count = this.#count + 1   } }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c DOM \u043d\u043e\u0432\u044b\u043c <code>#count<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>updateCount<\/code>. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c <code>updateCount<\/code> \u0438\u0437 <code>increaseCount<\/code><\/p>\n<pre><code class=\"javascript\">class Counter () {   #count   constructor (counter) { \/* ... *\/ }    increaseCount () {     this.#count = this.#count + 1     this.updateCount()   }    updateCount () {     this.countElement.textContent = this.#count   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h3>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 <code>this.buttonElement<\/code>. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>increaseCount<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443, \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">class Counter () {   \/\/ ...    constructor (counter) {     \/\/ ...     this.buttonElement.addEventListener('click', this.increaseCount)   }    \/\/ Methods }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f41\/d07\/172\/f41d07172aaf46662a3941602bc9d920.gif\" width=\"1000\" height=\"245\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>this<\/code>&nbsp;\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 <code>buttonElement<\/code>. (\u042d\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439.) \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 <code>buttonElement<\/code>, \u0435\u0441\u043b\u0438 \u0432\u043e\u0439\u0434\u0435\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/059\/d92\/0a2\/059d920a282e3b60798c85e43fdd70aa.gif\" width=\"1404\" height=\"418\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>this<\/code> \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0434\u043b\u044f <code>increaseCount<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. \u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e:<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>bind<\/code><\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438&nbsp;<\/p>\n<\/li>\n<\/ol>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 (\u043d\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0449\u0435).<\/p>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441 bind<\/h3>\n<p><code>Bind<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c <code>this<\/code> \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442. \u041e\u0431\u044b\u0447\u043d\u043e \u043b\u044e\u0434\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0432\u044b\u0437\u044b\u0432\u0430\u044f <code>bind(this)<\/code>.<\/p>\n<pre><code class=\"javascript\">class Counter () {   \/\/ ...    constructor (counter) {     \/\/ ...     this.buttonElement.addEventListener('click', this.increaseCount.bind(this))   }    \/\/ ... }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u0435\u043d \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>bind<\/code> \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f JavaScript.<\/p>\n<h4>\u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438&nbsp;<\/h4>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>this<\/code> \u0432 \u043b\u0435\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439 \u043f\u0438\u0448\u0443\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u0430\u043a \u044d\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">class Counter () {   \/\/ ...    constructor (counter) {     \/\/ ...     this.buttonElement.addEventListener('click', _ =&gt; {       this.increaseCount()     })   }    \/\/ Methods }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u044d\u0442\u043e \u0434\u043e\u043b\u0433\u0438\u0439 \u043f\u0443\u0442\u044c. \u0412\u043e\u043e\u0431\u0449\u0435-\u0442\u043e, \u0435\u0441\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043f\u0443\u0442\u044c.<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c <code>increaseCount<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u044d\u0442\u043e, \u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>increaseCount<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0441\u0440\u0430\u0437\u0443.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u0432\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d:<\/p>\n<pre><code class=\"javascript\">class Counter () {   \/\/ ...    constructor (counter) {     \/\/ ...     this.buttonElement.addEventListener('click', this.increaseCount)   }    increaseCount = () =&gt; {     this.#count = this.#count + 1     this.updateCounter()   }    \/\/ ... }<\/code><\/pre>\n<h2>\u041a\u043e\u0434&nbsp;<\/h2>\n<p>\u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439).<\/p>\n<p><strong>HTML<\/strong><\/p>\n<pre><code class=\"xml\"> &lt;div class=\"counter\"&gt;     &lt;p&gt;Count: &lt;span&gt;0&lt;\/span&gt;&lt;\/p&gt;     &lt;button&gt;Increase Count&lt;\/button&gt;   &lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS<\/strong><\/p>\n<pre><code class=\"css\">html {   font: 1em sans-serif; }  body {   padding: 1em; }  p {   font-size: 2em;   line-height: 1;   margin: 1rem 0; }  button {   font: inherit;   padding: 0.5em 0.75em;   background-color: #eee;   border: 1px solid #222;   color: black; }<\/code><\/pre>\n<p><strong>Babel<\/strong><\/p>\n<pre><code class=\"javascript\">class Counter {   #count = 0    constructor (counter) {     this.countElement = counter.querySelector('span')     this.buttonElement = counter.querySelector('button')      \/\/ Initializes count     this.#count = parseInt(this.countElement.textContent)      \/\/ Adds event listener     this.buttonElement.addEventListener('click', this.increaseCount)   }    updateCounter () {     this.countElement.textContent = this.#count   }    increaseCount = () =&gt; {     this.#count = this.#count + 1     this.updateCounter()   } }  const counter = new Counter(document.querySelector('.counter'))<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c7\/91a\/c78\/1c791ac783f25e8170316182ccb5f6c2.png\" width=\"1098\" height=\"583\"><figcaption><\/figcaption><\/figure>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/h3>\n<p>\u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0437\u0434\u0435\u0441\u044c. \u041c\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c HTML \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 <code>Counter<\/code>.<\/p>\n<pre><code class=\"javascript\">function Counter (counter) {   \/\/ ... }  const counter = Counter(document.querySelector('.counter'))<\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 <code>counter<\/code> \u2014 <code>&lt;span&gt;<\/code> \u0438 <code>&lt;button&gt;<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 (\u0431\u0435\u0437 <code>this<\/code>), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0443\u0436\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c\u0438. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">function Counter (counter) {   const countElement = counter.querySelector('span')   const buttonElement = counter.querySelector('button') }<\/code><\/pre>\n<p>\u041c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0432 HTML.<\/p>\n<pre><code class=\"javascript\">function Counter (counter) {   const countElement = counter.querySelector('span')   const buttonElement = counter.querySelector('button')    let count = parseInt(countElement.textContext) }<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>count<\/code> \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>increaseCount<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043d\u043e \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u0438 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">function Counter (counter) {   \/\/ ...    const counter = {     increaseCount () {       count = count + 1     }   } }<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0447\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>updateCount<\/code>. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u043c <code>updateCount<\/code> \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 <code>increaseCount<\/code>.<\/p>\n<pre><code class=\"javascript\">function Counter (counter) {   \/\/ ...    const counter = {     increaseCount () {       count = count + 1       counter.updateCount()     }      updateCount () {       increaseCount()     }   } }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>counter.updateCount<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>this.updateCount<\/code>? \u041c\u043d\u0435 \u044d\u0442\u043e \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>counter<\/code> \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u0435\u043d \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 <code>this<\/code>. \u042f \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u044e \u044d\u0442\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u0441 <code>this<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u043e\u0437\u0436\u0435).<\/p>\n<h3>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h3>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 <code>buttonElement<\/code>. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>counter.increaseCount<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 <code>this<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>this<\/code>.<\/p>\n<pre><code class=\"javascript\">function Counter (counterElement) {   \/\/ Variables     \/\/ Methods   const counter = { \/* ... *\/ }    \/\/ Event Listeners   buttonElement.addEventListener('click', counter.increaseCount) }<\/code><\/pre>\n<h3>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 this<\/h3>\n<p><code>this<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. \u041d\u043e \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code> \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u0430.<\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 <code>counter.increaseCount<\/code>, JavaScript \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 <code>counter.updateCount<\/code>. <code>this<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>counter<\/code>.<\/p>\n<pre><code class=\"javascript\">function Counter (counterElement) {   \/\/ Variables     \/\/ Methods   const counter = {     increaseCount() {       count = count + 1       this.updateCount()     }   }    \/\/ Event Listeners   buttonElement.addEventListener('click', counter.increaseCount) }<\/code><\/pre>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0435 \u0441\u043c\u043e\u0433 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a <code>this<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e. \u0412\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u043a \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u2014 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 <code>bind<\/code> \u0438\u043b\u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441\u043d\u043e\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>\u0418 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043c\u0435\u043d\u044f \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044e.<\/p>\n<h3>\u0412\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 this&nbsp;<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f<a href=\"https:\/\/zellwk.com\/blog\/this\/#this-in-a-simple-function\"><u> \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/u><\/a><\/p>\n<pre><code class=\"javascript\">function Counter (counterElement) {   \/\/ ...   const counter = {     \/\/ Do not do this.      \/\/ Doesn't work because `this` is `Window`     increaseCount: () =&gt; {       count = count + 1       this.updateCount()     }   }   \/\/ ... }<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>this<\/code>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0422\u0430\u043a \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h2>\u041a\u043e\u0434<\/h2>\n<p><strong>HTML<\/strong><\/p>\n<pre><code class=\"xml\">  &lt;div class=\"counter\"&gt;       &lt;p&gt;Count: &lt;span&gt;0&lt;\/span&gt;&lt;\/p&gt;       &lt;button&gt;Increase Count&lt;\/button&gt;     &lt;\/div&gt;<\/code><\/pre>\n<p><strong>CSS<\/strong><\/p>\n<pre><code class=\"css\">html {   font: 1em sans-serif; }  body {   padding: 1em; }  p {   font-size: 2em;   line-height: 1;   margin: 1rem 0; }  button {   font: inherit;   padding: 0.5em 0.75em;   background-color: #eee;   border: 1px solid #222;   color: black; }<\/code><\/pre>\n<p><strong>Babel<\/strong><\/p>\n<pre><code class=\"javascript\">function Counter (counterElement) {   const countElement = counterElement.querySelector('span')   const buttonElement = counterElement.querySelector('button')    let count = parseInt(countElement.textContent) || 0    const counter = {     updateCounter () {       countElement.textContent = count     },      increaseCount: (event) =&gt; {       count = count + 1       counter.updateCounter()     }   }    buttonElement.addEventListener('click', counter.increaseCount) }  const counter = Counter(document.querySelector('.counter'))<\/code><\/pre>\n<h3>\u0412\u0435\u0440\u0434\u0438\u043a\u0442 \u0434\u043b\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/h3>\n<p>\u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 <code>this<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>this<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u041a\u043b\u0430\u0441\u0441\u044b, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>bind<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>this<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0432\u0430\u0441 \u0441 \u0442\u043e\u043b\u043a\u0443. \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435!<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044f\u0445 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b<\/p>\n<\/li>\n<li>\n<p>OLOO<\/p>\n<\/li>\n<li>\n<p>\u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438&nbsp;<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043b\u0435\u0433\u0447\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043c\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u043b\u0438, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u041f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u044b \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u041f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u0440\u043e\u0449\u0435 \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u043d\u043e \u0421\u043e\u0441\u0442\u0430\u0432 \u043f\u0440\u043e\u0449\u0435 \u0441 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u043c\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u043b\u0438 \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430, \u043a\u0430\u043a \u0438 \u0432 JavaScript, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>#<\/code> \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412-\u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0445, \u043c\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>this<\/code> \u0432 \u041a\u043b\u0430\u0441\u0441\u0430\u0445 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445. \u042f \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u044e, \u0447\u0442\u043e \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044e\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>this<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e. \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 <code>this.#privateVariable<\/code> \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0430\u043c\u043e\u0439 <code>privateVariable<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0412\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u043e\u0431\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043e\u0431\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u044b\u0442\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432\u044b \u044d\u0442\u043e \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435!<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e \u043f\u0440\u043e\u043b\u044c\u0435\u0442 \u0441\u0432\u0435\u0442 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 JavaScript \u0434\u043b\u044f \u0432\u0430\u0441. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e JavaScript \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u043c \u0432 \u0446\u0435\u043b\u043e\u043c, \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c <a href=\"https:\/\/zellwk.com\/contact\"><u>\u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a\u043e \u043c\u043d\u0435<\/u><\/a>. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0435\u043c \u044f \u043c\u043e\u0433\u0443 \u043f\u043e\u043c\u043e\u0447\u044c!<\/p>\n<hr>\n<blockquote>\n<p><a href=\"https:\/\/otus.pw\/pZGk\/\"><strong>\u0423\u0437\u043d\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043a\u0443\u0440\u0441\u0435<\/strong><\/a><strong>&nbsp;&#171;JavaScript Developer. Basic&#187;.<br \/><\/strong><\/p>\n<p><a href=\"https:\/\/otus.pw\/1SnH\/\"><strong>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a \u043d\u0430 \u0442\u0435\u043c\u0443<\/strong><\/a><strong>&nbsp;&#171;\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 JavaScript&#187;<\/strong><a href=\"https:\/\/otus.pw\/1SnH\/\"><strong>.<\/strong><\/a><\/p>\n<\/p>\n<\/blockquote>\n<p><strong>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043c\u0435\u0436\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/otus.pw\/Egx4\/\"><strong>JavaScript&nbsp;<\/strong>Developer. Professional<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/otus.pw\/rOcE\/\"><strong>React.js&nbsp;<\/strong>Developer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/otus.pw\/c2u8\/\"><strong>Node.js&nbsp;<\/strong>Developer<\/a><\/p>\n<\/li>\n<\/ul>\n<hr>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c2e\/6c8\/aae\/c2e6c8aaeb035895d1cc63e4b5ba522a.jpg\" width=\"780\" height=\"300\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/otus.pw\/EipQ\/\"><strong>\u0417\u0410\u0411\u0420\u0410\u0422\u042c \u0421\u041a\u0418\u0414\u041a\u0423<\/strong><\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/532946\/\"> https:\/\/habr.com\/ru\/company\/otus\/blog\/532946\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p><strong>\u0414\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u043a\u0443\u0440\u0441\u0430 &#171;<\/strong><a href=\"https:\/\/otus.pw\/pZGk\/\"><strong>JavaScript Developer. Basic&#187;<\/strong><\/a><strong>&nbsp;\u0438 \u0432\u0441\u0435\u0445 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/strong><\/p>\n<\/p>\n<p><strong>\u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a \u043d\u0430 \u0442\u0435\u043c\u0443&nbsp;<\/strong><a href=\"https:\/\/otus.pw\/1SnH\/\"><strong>&#171;\u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 JavaScript&#187;.<\/strong><\/a><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<hr>\n<p><a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/532944\/\">\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u0432\u0430 \u0438\u0437 \u043d\u0438\u0445 \u2014 \u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n<p>\u041d\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f: \u041a\u0430\u043a\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c? \u0418 \u043f\u043e\u0447\u0435\u043c\u0443?<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u041a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0442\u0440\u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><code>this<\/code><\/p>\n<\/li>\n<\/ol>\n<p>\u041c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438.<\/p>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043b\u043e\u0432\u043e, \u043d\u043e \u043e\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u0430\u043a\u0442 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0449\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u0440\u0443\u0433\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0449\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u043e\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0440\u0443\u0436\u0443. \u041f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u043e\u0434\u0443 \u0432 \u0431\u0443\u0442\u044b\u043b\u043a\u0435. \u0411\u0443\u0442\u044b\u043b\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0442\u0435\u0447\u043a\u0443 \u0432\u043e\u0434\u044b.<\/p>\n<p>\u0412 JavaScript \u043c\u044b \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438), \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u043e\u0447\u0438\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435, \u043d\u043e \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 <a href=\"https:\/\/css-tricks.com\/javascript-scope-closures\/\"><u>\u0441\u0442\u0430\u0442\u044c\u044e<\/u><\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430\u0445.<\/p>\n<h3>\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u0421\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u2014 \u0431\u043b\u043e\u0447\u043d\u0430\u044f \u0441\u0444\u0435\u0440\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">{   \/\/ Variables declared here won't leak out }<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u0431\u043b\u043e\u043a\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0435 \u0431\u043b\u043e\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">const food = 'Hamburger'  {   console.log(food) }<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441&nbsp; <code>var<\/code> \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u044e\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/zellwk.com\/blog\/es6\/#let-and-const\"><u>&nbsp;\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c let or const<\/u><\/a> \u0434\u043b\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/h3>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u0431\u043b\u043e\u043a \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u043d\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u0442\u0435\u0447\u044c \u0438\u0437 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">function sayFood () {   const food = 'Hamburger' }  sayFood() console.log(food)<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">const food = 'Hamburger'  function sayFood () {   console.log(food) }   sayFood()<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u0437\u0436\u0435, \u0432\u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">function sayFood () {   return 'Hamburger' }  console.log(sayFood())<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h4>\u0424\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f<\/h4>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">\/\/ Here's a closure function outsideFunction () {   function insideFunction () { \/* ...*\/ } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 <code>outsideFunction<\/code> \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 <code>insideFunction<\/code>.<\/p>\n<pre><code class=\"javascript\">function outsideFunction () {   const food = 'Hamburger'   console.log('Called outside')    return function insideFunction () {     console.log('Called inside')     console.log(food)   } }  \/\/ Calls `outsideFunction`, which returns `insideFunction` \/\/ Stores `insideFunction` as variable `fn` const fn = outsideFunction()   \/\/ Calls `insideFunction` fn()<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 (\u0447\u0442\u043e\u0431\u044b \u043b\u044e\u0434\u0438 \u043c\u043e\u0433\u043b\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c). \u041d\u043e \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c\u0438 (\u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c \u0412\u0430\u0448\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e).<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0449\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>a Car<\/code> blueprint. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438, \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c 50 \u043b\u0438\u0442\u0440\u0430\u043c\u0438 \u0442\u043e\u043f\u043b\u0438\u0432\u0430.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     this.fuel = 50   } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0441\u043a\u0440\u044b\u043b\u0438 <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fuel<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u043f\u043b\u0438\u0432\u0430, \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0432 \u0438\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445.<\/p>\n<pre><code class=\"javascript\">const car = new Car() console.log(car.fuel) \/\/ 50<\/code><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043f\u043b\u0438\u0432\u0430.<\/p>\n<pre><code class=\"javascript\">const car = new Car() car.fuel = 3000 console.log(car.fuel) \/\/ 3000<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0438 \u0441\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c 100 \u043b\u0438\u0442\u0440\u043e\u0432. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0442\u043e\u043f\u043b\u0438\u0432\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c.<\/p>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <code>fuel<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<\/ol>\n<h3>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e<\/h3>\n<p>\u0412 JavaScript \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f<strong>.<\/strong> \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     \/\/ Denotes that `_fuel` is private. Don't use it!     this._fuel = 50   } }<\/code><\/pre>\n<p>\u041c\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>fuel<\/code> &#171;\u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439\u201d.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {      \/\/ Denotes that `_fuel` is private. Don't use it!     this._fuel = 50   }    getFuel () {     return this._fuel   }    setFuel (value) {     this._fuel = value     \/\/ Caps fuel at 100 liters     if (value &gt; 100) this._fuel = 100   } }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b <code>getFuel<\/code> \u0438 <code>setFuel<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">const car = new Car()  console.log(car.getFuel()) \/\/ 50   car.setFuel(3000) console.log(car.getFuel()) \/\/ 100 <\/code><\/pre>\n<p>\u041d\u043e <code>fuel<\/code>&nbsp;\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439. \u042d\u0442\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f. \u0412\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f, \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435, \u0438 \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0435\u044e (\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u044c\u044e).<\/p>\n<pre><code class=\"javascript\">const car = new Car()  console.log(car.getFuel()) \/\/ 50   car._fuel = 3000 console.log(car.getFuel()) \/\/ 3000<\/code><\/pre>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0438\u043c.<\/p>\n<h3>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u042d\u0442\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d.<\/p>\n<h4>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438<\/h4>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f <code>#<\/code> \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n<pre><code class=\"javascript\">class Car {   constructor () {     this.#fuel = 50   } }<\/code><\/pre>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>#<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>constructor<\/code><\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043d\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.<\/p>\n<pre><code class=\"javascript\">class Car {   \/\/ Declares private variable   #fuel    constructor () {     \/\/ Use private variable     this.#fuel = 50   } }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c <code>#fuel<\/code> \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 fuel \u043d\u0430 50.<\/p>\n<pre><code class=\"javascript\">class Car {   #fuel = 50 }<\/code><\/pre>\n<p>\u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a&nbsp;<code>#fuel<\/code> \u0438\u0437 <code>Car<\/code>. \u0423 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">const car = new Car() console.log(car.#fuel)<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>getFuel<\/code> \u0438\u043b\u0438 <code>setFuel<\/code>) \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e&nbsp; <code>#fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">class Car {   #fuel = 50    getFuel () {     return this.#fuel   }    setFuel (value) {     this.#fuel = value     if (value &gt; 100) this.#fuel = 100   } }  const car = new Car() console.log(car.getFuel()) \/\/ 50  car.setFuel(3000) console.log(car.getFuel()) \/\/ 100<\/code><\/pre>\n<blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e <code>Getters<\/code> and <code>Setters<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>getFuel<\/code> \u0438 <code>setFuel<\/code>. <a href=\"https:\/\/zellwk.com\/blog\/why-use-getter-and-setter-functions\/\"><u>\u0421\u0438\u043d\u0442\u0430\u043a\u0441 \u043b\u0435\u0433\u0447\u0435 \u0447\u0438\u0442\u0430\u0442\u044c.<\/u><\/a><\/p>\n<\/blockquote>\n<pre><code class=\"javascript\">class Car {   #fuel = 50    get fuel () {     return this.#fuel   }    set fuel (value) {     this.#fuel = value     if (value &gt; 100) this.#fuel = 100   } }  const car = new Car() console.log(car.fuel) \/\/ 50  car.fuel = 3000 console.log(car.fuel) \/\/ 100<\/code><\/pre>\n<h3>\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/h3>\n<p>\u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0445 \u0447\u043b\u0435\u043d\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043d\u0438\u0433\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<pre><code class=\"javascript\">function Car () {   const fuel = 50  }  const car = new Car()  console.log(car.fuel) \/\/ undefined  console.log(fuel) \/\/ Error: `fuel` is not defined<\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>getter<\/code> and <code>setter<\/code> \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>fuel<\/code>.<\/p>\n<pre><code class=\"javascript\">function Car () {   const fuel = 50     return {     get fuel () {        return fuel      },      set fuel (value) {       fuel = value        if (value &gt; 100) fuel = 100     }   } }  const car = new Car() console.log(car.fuel) \/\/ 50  car.fuel = 3000 console.log(car.fuel) \/\/ 100<\/code><\/pre>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a! \u041f\u0440\u043e\u0441\u0442\u043e \u0438 \u043b\u0435\u0433\u043a\u043e!<\/p>\n<h3>\u0412\u0435\u0440\u0434\u0438\u043a\u0442 \u043e\u0431 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438<\/h3>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435. \u041e\u043d\u0438 \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0444\u0435\u0440\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044f\u0437\u044b\u043a\u0430 JavaScript.<\/p>\n<p>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f <code>#<\/code> \u043a \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0449\u0438 \u043d\u0435\u0443\u043a\u043b\u044e\u0436\u0438\u043c\u0438.<\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u2014 \u044d\u0442\u043e \u0434\u043b\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u041a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u2014 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n<hr>\n<h2>\u041a\u043b\u0430\u0441\u0441\u044b \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u2014 this \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f<\/h2>\n<p><code>this<\/code>&nbsp;\u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0442\u0438\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u0447\u0435\u043c\u0443? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>this<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443 \u043c\u043d\u043e\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 (\u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0445, \u0442\u0430\u043a \u0438 \u043e\u043f\u044b\u0442\u043d\u044b\u0445).<\/p>\n<p>\u041d\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f <code>this<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>this<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0441\u0432\u043e\u0438\u0442\u0435 \u044d\u0442\u0438 \u0448\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>this<\/code>.<\/p>\n<p>\u0428\u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0412 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \/ \u043c\u0435\u0442\u043e\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/zellwk.com\/blog\/this\/\"><u>\u042f \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u044d\u0442\u0438 6 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445.<\/u><\/a> \u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c <code>this<\/code>.<\/p>\n<blockquote>\n<p><strong>\u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/strong> <a href=\"https:\/\/zellwk.com\/blog\/should-you-use-this\/\"><u>\u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0443\u0447\u0438\u0442\u044c<\/u><\/a> this. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u044b \u043e\u0432\u043b\u0430\u0434\u0435\u0442\u044c JavaScript.<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0439\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0448\u044c \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043e\u0431 <code>this<\/code>. \u041c\u044b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>this<\/code> \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445.<\/p>\n<p>\u0423\u0436\u0435 \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c? \u0425\u043e\u0440\u043e\u0448\u043e. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!&nbsp;<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 this \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445<\/h3>\n<p><code>This<\/code> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435. (\u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 &#171;\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\/\u043c\u0435\u0442\u043e\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430&#187;.) \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>constructor<\/code>.<\/p>\n<pre><code class=\"javascript\">class Human {   constructor (firstName, lastName) {     this.firstName = firstName     this.lastName = lastName     console.log(this)   } }  const chris = new Human('Chris', 'Coyier')<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 This \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>this<\/code> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 <code>new<\/code> \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, <code>this<\/code> \u0431\u0443\u0434\u0435\u0442<\/p>\n<\/hr>\n<\/hr>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-315040","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=315040"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315040\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=315040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=315040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}