8.1 call ๋ฉ์๋
JavaScript์์ call
, bind
, apply
๋ฉ์๋๋ ํจ์ ์คํ ์ปจํ
์คํธ ๊ด๋ฆฌ๋ฅผ ํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํด. ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ํจ์๋ฅผ ํธ์ถํ ๋ this
๊ฐ์ ์ง์ ํ ์ ์๊ฑฐ๋ . ์ด ๋ฉ์๋๋ค์ ๊ฐ์ฒด ๋ฐ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์์
์์ ์ ์ฉํ๋ฉฐ, ์ ์ฐํ ์ฝ๋ ๊ด๋ฆฌ๋ฅผ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํด. ๊ฐ๊ฐ ๋ ์์ธํ ์ดํด๋ณด๊ณ ์ฌ์ฉ ์์๋ค์ ํ๋ฒ ๋ด
์๋ค.
call
๋ฉ์๋๋ ์ฃผ์ด์ง this
๊ฐ๊ณผ ์ฝค๋ง๋ก ๊ตฌ๋ถ๋ ์ธ์๋ก ํจ์๋ฅผ ํธ์ถํด. ์ด๋ ๊ฒ ํ๋ฉด ํจ์๊ฐ ์คํ๋์ด์ผ ํ๋ ์ปจํ
์คํธ๋ฅผ ๋ช
์์ ์ผ๋ก ์ง์ ํ ์ ์์ด.
๋ฌธ๋ฒ:
func.call(thisArg, arg1, arg2 ...);
์์:
์ด ์์์์ greet
ํจ์๋ person
์ปจํ
์คํธ๋ก ํธ์ถ๋์ด ๊ฐ์ฒด person
์ name
์์ฑ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 apply ๋ฉ์๋
apply
๋ฉ์๋๋ call
๊ณผ ๋น์ทํ์ง๋ง ์ธ์๋ฅผ ๋ฐฐ์ด๋ก ์ ๋ฌํด. ์ธ์ ๋ฐฐ์ด์ด ์์ ๋ ํจ์๋ฅผ ํธ์ถํ๊ณ ์ถ์ ๋ ํธ๋ฆฌํด.
๋ฌธ๋ฒ:
func.apply(thisArg, [argsArray]);
์์:
์ด ์์๋ ์ด์ ์์์ ๋น์ทํ์ง๋ง ์ธ์๋ ๋ฐฐ์ด๋ก ์ ๋ฌ๋๋ค๋ ์ ๋ง ๋ค๋ฅด์ง.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 bind ๋ฉ์๋
bind
๋ฉ์๋๋ ์๋ก์ด ํจ์๋ฅผ ์์ฑํ๋๋ฐ, ์ด ํจ์๋ ํธ์ถ๋ ๋ ์ฃผ์ด์ง this
๊ฐ์ ์ค์ ํด. bind
์ ์ ๋ฌ๋ ์ธ์๋ ์๋ก์ด ํจ์์ ๊ณ ์ ๋์ง. ์ด ๊ธฐ๋ฅ์ ๊ณ ์ ๋ ์ปจํ
์คํธ์ ํจ์๋ฅผ ์์ฑํ๋ ๋ฐ ์ ์ฉํด.
๋ฌธ๋ฒ:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
์์:
์ด ์์์์๋ boundGreet
๋ผ๋ ์๋ก์ด ํจ์๊ฐ ์์ฑ๋๊ณ , ์ด ํจ์๋ ํญ์ person
๊ฐ์ฒด์ ์ปจํ
์คํธ์์ ์คํ๋ผ.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 ๋ฉ์๋ ์ฌ์ฉ์ ๋ํ ์์ธ ์ค๋ช
1. ๋ฉ์๋ ์์์ call ์ฌ์ฉ:
call
๋ฉ์๋๋ ํ ๊ฐ์ฒด์ ๋ฉ์๋๋ฅผ ๋ค๋ฅธ ๊ฐ์ฒด๊ฐ ์์๋ฐ๋๋ก ํ ๋ ์ฃผ๋ก ์ฌ์ฉ๋ผ. ์ด๋ ๊ฒ ํ๋ฉด ๋ช
์์ ์ธ ์์ ์์ด ๋ฉ์๋์ ์์ฑ์ ์ฐจ์ฉํ ์ ์์ด.
์ด ์์์์๋ Product
์์ฑ์๊ฐ Food
๊ฐ์ฒด์ ์ปจํ
์คํธ์์ ํธ์ถ๋์ด name
๊ณผ price
์์ฑ์ ์์ํ ์ ์๊ฒ ํด์ค.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. ๋ฐฐ์ด ์ธ์ ์ ๋ฌ์ apply ์ฌ์ฉ:
apply
๋ฉ์๋๋ ์ธ์ ๋ฐฐ์ด์ ํจ์์ ์ ๋ฌํ๊ณ ์ ํ ๋ ์ ์ฉํด. ํจ์๋ ๊ฐ๋ณ ์ธ์๋ฅผ ์๊ตฌํ์์.
์ฌ๊ธฐ์ numbers
๋ฐฐ์ด์ sum
ํจ์์ ๊ฐ๋ณ ์ธ์๋ก ์ ๋ฌ๋ผ.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. ๊ณ ์ ๋ ์ปจํ ์คํธ ํจ์ ์์ฑ์ bind ์ฌ์ฉ:
bind
๋ฉ์๋๋ ๊ณ ์ ๋ ์ปจํ
์คํธ์ ํจ์๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ฉฐ, ํนํ ์ด๋ฒคํธ ๋ฐ ์ฝ๋ฐฑ์์ ์ ์ฉํด.
์ฌ๊ธฐ์ getX
ํจ์๋ bind
๋ฅผ ํตํด module
๊ฐ์ฒด์ ๊ณ ์ ๋์ด ํจ์ ํธ์ถ ์ x ๊ฐ์ ์ฌ๋ฐ๋ฅด๊ฒ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ํด์ค.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 ์ค์ ์ํ์ ์
๋ฉ์๋ ๋ฐฐ์ด ์ฐจ์ฉ์ call ์ฌ์ฉ ์์:
์ฌ๊ธฐ์ call
์ ์ฌ์ฉํ์ฌ arguments
๊ฐ์ฒด์ ๋ฐฐ์ด forEach
๋ฉ์๋๋ฅผ ์ฌ์ฉํด.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
๋ฐฐ์ด ๊ฒฐํฉ์ apply ์ฌ์ฉ ์์:
์ฌ๊ธฐ์ apply
๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋ฐฐ์ด์ ๋ฐฐ์ด push
๋ฉ์๋๋ฅผ ํตํด ๊ฒฐํฉํด.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
๋ถ๋ถ ํจ์ ์์ฑ์ bind ์ฌ์ฉ ์์:
double
ํจ์๋ bind
๋ฅผ ํตํด ์ฒซ ๋ฒ์งธ ์ธ์๊ฐ 2๋ก ๊ณ ์ ๋ ์ฑ๋ก ์์ฑ๋ผ.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION