Skip to content

Commit 48184ae

Browse files
committedJun 5, 2024
docs: add new topic on call and apply methods
1 parent aae2803 commit 48184ae

File tree

2 files changed

+67
-0
lines changed

2 files changed

+67
-0
lines changed
 

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,4 @@ Below is a list of our publications for easier navigation:
8282
58. [**Հետաքրքիր փաստեր հանրաճանաչ և սիրված ցանցային դիտարկիչ Firefox-ի մասին: Ուրիշ ի՞նչ նորարարական նախագծեր են ստեղծվել Mozilla ընկերության կողմից**](./publications/Firefox%20-%20The%20Browser%20That%20Pioneered%20Open-Source%20Web%20Browsing.hy.md)
8383
59. [**Արժեքների ո՞ր տիպին են պատկանում ֆունկցիաները: Բարձր կարգի ֆունկցիաներն (higher-order functions) ու ծրագրավորման ֆունկցիոնալ հայեցակարգը**](./publications/Functional%20Programming%20in%20Modern%20JavaScript%20Development.md)
8484
60. [**Ֆունկցիաների շաղկապումը կոնտեքստի հետ՝ bind մեթոդի օգնությամբ**](./publications/Advanced%20Functional%20Patterns.hy.md)
85+
61. [**Ֆունկցիայի կանչը՝ հստակորեն նշված կոնտեքստով: call և apply մեթոդների տարբերությունը**](./publications/Manipulating%20Context.hy.md)
+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
![Jokes about Backend Programmers](../assets/function_methods.jpg)
2+
3+
# Ֆունկցիայի կանչը՝ հստակորեն նշված կոնտեքստով: call և apply մեթոդների տարբերությունը:
4+
5+
Մենք գիտենք, որ [this-ը](./The%20Dynamic%20Nature%20of%20this%20in%20JavaScript.hy.md) դա հղում է դեպի օբյեկտ, որի կոնտեքստում կանչվել է մեթոդը՝ կետ օպերատորի միջոցով։ this-ը նաև հղում է դեպի նոր օբյեկտ, եթե այն ստեղծվել է new օպերատորի օգնությամբ՝ [կոնստրուկտոր ֆունկցիաների](./Creating%20Objects%20with%20Constructor%20Functions.hy.md) կանչի արդյունքում։ Մենք ծանոթացել ենք նաև ֆունկցիայի շաղկապմանը this-ի հետ՝ ֆունկցիաների [bind](./Advanced%20Functional%20Patterns.hy.md) մեթոդի օգնությամբ։ Այսօր կխոսենք այն մասին, թե ի՞նչպես կանչել ֆունկցիաները՝ հստակորեն նշելով this-ը, այսինքն ի՞նչպես պարտադրել ֆունկցիաներին աշխատել՝ տալով մեր ուզած կոնտեքստը։
6+
7+
Ֆունկցիաների **call** մեթոդն ունի հետևյալ ընդհանրական սինթաքսը՝
8+
9+
- `func.call(context, arg1, arg2, ...)`
10+
11+
call մեթոդն աշխատեցնում է func ֆունկցիան՝ context անունով արգումենտին հաղորդելով this-ը, այսինքն այն օբյեկտը՝ որի կոնտեքստում մենք ուզում ենք ֆունկցիան աշխատեցնել։ arg1, arg2 ... argn-ն արդեն անմիջականորեն func ֆունկցիայի արգումենտներն են։ Խճճված ստացվե՞ց, ոչինչ, կդիտարկենք օրինակի վրա, և ամեն ինչ պարզ կլինի։
12+
13+
Ստեղծենք greeting ֆունկցիան, որը որպես արգումենտ կստանա ողջույնի խոսք, և կախված թե որ օբյեկտի կոնտեքստում կկանչենք նրան, alert կանի ողջույն՝ ուղղված տվյալ օբյեկտին։
14+
15+
```js
16+
"use strict";
17+
18+
function greeting(greet) {
19+
alert(greet + " " + this.firstName + " " + this.lastName);
20+
}
21+
```
22+
23+
Ֆունկցիայի greet արգումենտը կարող է լինել մարդկանց ողջունելու տարբեր բառեր։ Օրինակ "hi", "hello", "bonjour", "բարև" և այլն։
24+
25+
```js
26+
greeting("hello"); // Uncaught TypeError
27+
```
28+
29+
Հիմա եթե կանչենք այս ֆունկցիան, կստանանք սխալ, քանի-որ այն չի կանչվում որևէ օբյեկտի կոնտեքստում, հետևաբար this-ն անորոշ է։ Ընդհանրապես մինչև խիստ ռեժիմի ի հայտ գալը՝ ցանցային դիտարկիչների միջավայրում գլոբալ ստեղծված ֆունկցիան սկզբնապես հանդիսանում էր window գլոբալ օբյեկտի մեթոդ, և նրա կանչի ժամանակ this-ը հանդիսանում էր հենց window օբյեկտը։ Խիստ ռեժիմն աշխատում է բոլորովին այլ տրամաբանության մեջ, և գլոբալ ստեղծված ֆունկցիան այլևս կապված չէ գլոբալ օբյեկտի հետ, և նրա this-ի արժեքը undefined է։
30+
31+
Ֆունկցիայի կանչի ժամանակ սխալն առաջանում է հենց այն պահին, երբ ինտերպրետատորը փորձում է «կարդալ» this.firstName-ը։ Քանի-որ this-ը undefined է, այսինքն արժեքի հատուկ պրիմիտիվ տիպ՝ նա ուղղակի չի կարող ունենալ ոչ մի հատկություն, այդ թվում նաև firstName անունով։
32+
33+
Այժմ ստեղծենք երկու տարբեր օբյեկտներ, և փորձենք greeting ֆունկցիան կանչել այդ օբյեկտների կոնտեքստում։
34+
35+
```js
36+
const person1 = {
37+
firstName: "John",
38+
lastName: "Smith",
39+
};
40+
41+
const person2 = {
42+
firstName: "Joseph",
43+
lastName: "Biden",
44+
};
45+
```
46+
47+
Ունենք երկու միանման օբյեկտներ, և այժմ ուզում ենք greeting ֆունկցիան կանչել նրանց կոնտեքստում, որպեսզի դիտարկիչի պատուհանում alert արվի ողջույնի խոսք՝ ուղղված այդ օբյեկտներին։ Ենթադրենք ուզում ենք ողջունել "hello" բառով։ Դրա համար կարող ենք օգտագործել ֆունկցիաների ներդրված call մեթոդը։ Վերևում արդեն ծանոթացել ենք այդ մեթոդի օգտագործման ընդհանրական սինթաքսին։ Այսինքն գրում ենք ֆունկցիայի անունը, ապա կետ, հետո call մեթոդը։ call մեթոդին որպես առաջին արգումենտ տալիս ենք this-ը, օրինակ person1-ը, դրանով մենք հասկացնում ենք greeting ֆունկցիային, որ իր ներսում գրված this-ի արժեքը այժմ հանդիսանում է person1 օբյեկտը։ Իսկ որպես հաջորդ արգումենտ, call մեթոդին հաղորդում ենք greeting ֆունկցիայի արգումենտը, մեր պարագայում քանի-որ ուզում ենք ողջույնի խոսքը սկսվի "hello" բառով, ուղղակի տալիս ենք "hello" տեքստը։
48+
49+
```js
50+
greeting.call(person1, "hello"); // hello John Smith
51+
```
52+
53+
Մենք greeting ֆունկցիային call մեթոդի օգնությամբ կանչեցինք person1 օբյեկտի կոնտեքստում։ Ոչինչ մեզ չի խանգարում նույն greeting ֆունկցիան կանչել նաև person2 օբյեկտի կոնտեքստում՝ ընդ որում մեկ այլ պարամետրով։ Բերեք այս անգամ թող ողջույնի խոսքը սկսվի "hi" բառով։
54+
55+
```js
56+
greeting.call(person2, "hi"); // hi Joseph Biden
57+
```
58+
59+
**apply** մեթոդը շատ նման է **call** մեթոդին։ Միակ տարբերությունն այն է, որ call մեթոդի մեջ մենք ֆունկցիայի արգումենտները տալիս ենք իրարից ստորակետերով բաժանելով, իսկ apply-ի մեջ՝ զանգվածի տեսքով։ Բացի զանգվածից՝ կարելի է նաև տալ զանգվածանման օբյեկտներ՝ այսինքն այնպիսի օբյեկտներ, որոնց հատկությունների բանալիները կարող են փոխակերպվել թվերի` նմանակելով զանգվածների ինդեքսները, և որոնք կունենան length հատկություն՝ որը հստակորեն ցույց կտա օբյեկտի հատկությունների քանակը։ Ի տարբերություն զանգվածների՝ apply մեթոդի մեջ զանգվածանման օբյեկտների օգտագործումը կարող է հասկանալի լինել ոչ բոլոր ցանցային դիտարկիչների, մասնավորապես դեռևս օգտագործվող և բոլորի կողմից «սիրելի» Internet Explorer 9-րդ տարբերակի համար։
60+
61+
```js
62+
greeting.apply(person1, ["bonjour"]); // bonjour John Smith
63+
greeting.apply(person2, ["բարև"]); // բարև Joseph Biden
64+
```
65+
66+
Այս բոլոր թեմաները այն հիմքն է, որը հասկանալով կարելի է լիարժեք պատկերացնել JavaScript ծրագրավորման լեզվում this-ի վարքագիծը։ Մնացած նյուանսները հեշտությամբ կընկալվեն ժամանակի ընթացքում:

0 commit comments

Comments
 (0)