Javascript-Practice/namastejsPractice4.js at main · Alakhdeepsingh/Javascript-Practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
//22) call, apply, bind
//23) Currying
//24) Prototype and Prototypal Inheritance
//25) event bubbling, capturing aka trickling
//26) Event Delegation in JS
//27) Debouncing
//28) Throttling
//29) Debouncing vs Throttling
//30) CORS
//31) async vs defer
//32) Polyfill for bind method

// 22) call, apply , bind

// let name = {
//     firstName: 'Alakhdeep',
//     lastName: 'Singh',
//     printFullName: function(){
//         console.log(this.firstName + ' ' + this.lastName);
//     }
// }
// name.printFullName();
// Alakhdeep Singh

// each and every function has access to this keyword over here the this keyword will point to the name object, so console will print Alakhdeep Singh as output because this.firstName will point to name.firstName and this.lastName will point to name.lastName

// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh',
//      printFullName: function(){
//          console.log(this.firstName + ' ' + this.lastName);
//      }
//}
// name.printFullName();

// let name2 = {
//     firstName: 'Rahul',
//     lastName: 'Kumar'
//      printFullName: function(){
//         console.log(this.firstName + ' ' + this.lastName);
//      }
//};
// name.printFullName();
//so you can see that we have two objects name and name2 and both have same printFullName method, so we have to call the printFullName method for both the objects, which is not good practice to write the same method for each and every object, so we can use call, apply and bind method to solve this problem

// call method

// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh',
//      printFullName: function(){
//          console.log(this.firstName + ' ' + this.lastName);
//      }
//}
// name.printFullName();

// let name2 = {
//     firstName: 'Rahul',
//     lastName: 'Kumar'
//};

// name.printFullName.call(name2);
//so over here we are calling the printFullName method of name object and we are passing name2 object as an argument to the call method, so the this keyword will point to the name2 object and it will print Rahul Kumar as output
// using call method we can borrow the function from one object to another object and use the data of another object so in the above example we are borrowing the printFullName method from name object to name2 object and using the data of name2 object to print the output.
// name.printFullName.call(name2);
// so now this will print Rahul Kumar as output because this keyword will point to name2 object by writing name.printFullName.call(name2);

// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh',
//}
// let printFullName = function(){
//          console.log(this.firstName + ' ' + this.lastName);
// }
// name.printFullName.call(name);

// let name2 = {
//     firstName: 'Rahul',
//     lastName: 'Kumar'
//};

// name.printFullName.call(name2);

// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh ',
//}
// let printFullName = function(hometown, state){
//          console.log(this.firstName + ' ' + this.lastName+ ' ' + hometown + ' ' + state);
// }
// name.printFullName.call(name, 'Delhi', 'Delhi');

// let name2 = {
//     firstName: 'Rahul',
//     lastName: 'Kumar'
//};

// name.printFullName.call(name2, 'Pune', 'Maharashtra');

// const a = {
//     name:"alakh",
//     age:20,
// }
// var b = function(state){
//         console.log(this.name, this.city, state);
// }

// const z = {
//     name:"alakhdeeepp",
//     age:23,
// }

// const p = {
//     name:"alp",
//     age:23,
//     city:"kanpur"
// }

// b.call(z,"up");
// b.call(p,"upsc");

//apply method
// difference between call and apply method is that in call method we pass the arguments one by one and in apply method we pass the arguments in the form of array
// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh',
//}
// let printFullName = function(hometown, state){
//          console.log(this.firstName + ' ' + this.lastName+ ' ' + hometown + ' ' + state);
// }
// name.printFullName.apply(name, ['Delhi', 'Delhi']);
// so over here we are passing the arguments in the form of array to the apply method
// const a = {
//     name:"alakh",
//     age:20,
// }
// var b = function(state,pincode){
//         console.log(this.name, this.city, state, pincode);
// }

// const z = {
//     name:"alakhdeeepp",
//     age:23,
// }

// const p = {
//     name:"alp",
//     age:23,
//     city:"kanpur"
// }

// b.apply(z,["up",208022]);
// b.apply(p,["upsc",208922]);

//bind method
// let name={
//      firstName: 'Alakhdeep',
//      lastName: 'Singh',
//}
// let printFullName = function(hometown, state){
//          console.log(this.firstName + ' ' + this.lastName+ ' ' + hometown + ' ' + state);
// }
// let printMyName = printFullName.bind(name, 'Delhi', 'Delhi');
// console.log(printMyName);
//so in console.log we will get the printFullName method
// function(hometown, state){
//          console.log(this.firstName + ' ' + this.lastName+ ' ' + hometown + ' ' + state);
// }
// printMyName();
// so over here we are binding the printFullName method to the name object and we are passing the arguments to the bind method, so the output will be the function printFullName with the arguments passed to the bind method,
//bind method does not call the function, it just returns the copy of the function with the arguments passed to the bind method, so we have to call the function separately after binding the function to the object