Function.prototype.call()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itโs been available across browsers since โจ2015๋ 7์โฉ.
call()
๋ฉ์๋๋ ์ฃผ์ด์ง this
๊ฐ ๋ฐ ๊ฐ๊ฐ ์ ๋ฌ๋ ์ธ์์ ํจ๊ป ํจ์๋ฅผ ํธ์ถํฉ๋๋ค.
์ฐธ๊ณ :
์ด ํจ์ ๊ตฌ๋ฌธ์ apply()
์ ๊ฑฐ์ ๋์ผํ์ง๋ง, call()
์ ์ธ์ ๋ชฉ๋ก์, ๋ฐ๋ฉด์ apply()
๋ ์ธ์ ๋ฐฐ์ด ํ๋๋ฅผ ๋ฐ๋๋ค๋ ์ ์ด ์ค์ํ ์ฐจ์ด์ ์
๋๋ค.
์๋ํด ๋ณด๊ธฐ
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = "food";
}
console.log(new Food("cheese", 5).name);
// Expected output: "cheese"
๊ตฌ๋ฌธ
func.call(thisArg[, arg1[, arg2[, ...]]])
๋งค๊ฐ๋ณ์
thisArg
-
func
ํธ์ถ์ ์ ๊ณต๋๋this
์ ๊ฐ.
์ฐธ๊ณ :
this
๋ ๋ฉ์๋์ ์ํด ๋ณด์ด๋ ์ค์ ๊ฐ์ด ์๋ ์ ์์์ ์ฃผ์ํ์ธ์: ๋ฉ์๋๊ฐ ๋น์๊ฒฉ ๋ชจ๋ ์ฝ๋ ๋ด ํจ์์ธ ๊ฒฝ์ฐ,null
๋ฐundefined
๋ ์ ์ญ ๊ฐ์ฒด๋ก ๋์ฒด๋๊ณ ์์๊ฐ์ ๊ฐ์ฒด๋ก ๋ณํ๋ฉ๋๋ค.arg1, arg2, ...
๊ฐ์ฒด๋ฅผ ์ํ ์ธ์.
๋ฐํ๊ฐ(Return Value)
this
์ arguments ๋ฅผ ๋งค๊ฐ๋ก ํธ์ถ๋ ํจ์์ ๋ฐํ๊ฐ
์ค๋ช
call()
์ ์ด๋ฏธ ํ ๋น๋์ด์๋ ๋ค๋ฅธ ๊ฐ์ฒด์ ํจ์/๋ฉ์๋๋ฅผ ํธ์ถํ๋ ํด๋น ๊ฐ์ฒด์ ์ฌํ ๋นํ ๋ ์ฌ์ฉ๋ฉ๋๋ค. this
๋ ํ์ฌ ๊ฐ์ฒด(ํธ์ถํ๋ ๊ฐ์ฒด)๋ฅผ ์ฐธ์กฐํฉ๋๋ค. ๋ฉ์๋๋ฅผ ํ๋ฒ ์์ฑํ๋ฉด ์ ๊ฐ์ฒด๋ฅผ ์ํ ๋ฉ์๋๋ฅผ ์ฌ์์ฑํ ํ์ ์์ด call()
์ ์ด์ฉํด ๋ค๋ฅธ ๊ฐ์ฒด์ ์์ํ ์ ์์ต๋๋ค.
์
๊ฐ์ฒด์ ์์ฑ์ ์ฐ๊ฒฐ์ call
์ฌ์ฉ
Java์ ๋น์ทํ๊ฒ, ๊ฐ์ฒด์ ์์ฑ์ ์ฐ๊ฒฐ(chain)์ call
์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์ ์์์, Product
๊ฐ์ฒด์ ์์ฑ์๋ name
๋ฐ price
๋ฅผ ๋งค๊ฐ๋ณ์๋ก ์ ์๋ฉ๋๋ค. ๋ค๋ฅธ ๋ ํจ์ Food
๋ฐ Toy
๋ this
๋ฐ name
๊ณผ price
๋ฅผ ์ ๋ฌํ๋ Product
๋ฅผ ํธ์ถํฉ๋๋ค. Product
๋ name
๋ฐ price
์์ฑ์ ์ด๊ธฐํํ๊ณ , ํน์ํ ๋ ํจ์(Food ๋ฐ Toy)๋ category
๋ฅผ ์ ์ํฉ๋๋ค.
function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError(
"Cannot create product " + this.name + " with a negative price",
);
}
}
function Food(name, price) {
Product.call(this, name, price);
this.category = "food";
}
function Toy(name, price) {
Product.call(this, name, price);
this.category = "toy";
}
var cheese = new Food("feta", 5);
var fun = new Toy("robot", 40);
์ต๋ช
ํจ์ ํธ์ถ์ call
์ฌ์ฉ
์ด ์์ ์์๋ ์ต๋ช
ํจ์๋ฅผ ๋ง๋ค๊ณ ๋ฐฐ์ด ๋ด ๋ชจ๋ ๊ฐ์ฒด์์ ์ด๋ฅผ ํธ์ถํ๊ธฐ ์ํด call
์ ์ฌ์ฉํฉ๋๋ค. ์ฌ๊ธฐ์ ์ต๋ช
ํจ์์ ์ฃผ๋ชฉ์ ์ ๋ฐฐ์ด ๋ด ๊ฐ์ฒด์ ์ ํํ ์ธ๋ฑ์ค๋ฅผ ์ถ๋ ฅํ ์ ์๋ ๋ชจ๋ ๊ฐ์ฒด์ print ํจ์๋ฅผ ์ถ๊ฐํ๋ ๊ฒ ์
๋๋ค.
์ฐธ๊ณ :
this
๊ฐ์ผ๋ก ๊ฐ์ฒด ์ ๋ฌ์ด ๋ฐ๋์ ํ์ํ์ง๋ ์์ง๋ง, ํด๋น ์์ ์์๋ ์ค๋ช ์ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ์ต๋๋ค.
var animals = [
{ species: "Lion", name: "King" },
{ species: "Whale", name: "Fail" },
];
for (var i = 0; i < animals.length; i++) {
(function (i) {
this.print = function () {
console.log("#" + i + " " + this.species + ": " + this.name);
};
this.print();
}).call(animals[i], i);
}
ํจ์ ํธ์ถ ๋ฐ 'this
'๋ฅผ ์ํ ๋ฌธ๋งฅ ์ง์ ์ call
์ฌ์ฉ
์๋ ์์ ์์, greet
์ ํธ์ถํ๋ฉด this
๊ฐ์ ๊ฐ์ฒด obj
์ ๋ฐ์ธ๋ฉ๋ฉ๋๋ค.
function greet() {
var reply = [this.animal, "typically sleep between", this.sleepDuration].join(
" ",
);
console.log(reply);
}
var obj = {
animal: "cats",
sleepDuration: "12 and 16 hours",
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
์ฒซ๋ฒ์งธ ์ธ์ ์ง์ ์์ด ํจ์ ํธ์ถ์ call
์ฌ์ฉ
์๋ ์์ ์์, display
ํจ์์ ์ฒซ๋ฒ์งธ ์ธ์๋ฅผ ์ ๋ฌํ์ง ์๊ณ ํธ์ถํฉ๋๋ค. ์ฒซ๋ฒ์งธ ์ธ์๋ฅผ ์ ๋ฌํ์ง ์์ผ๋ฉด, this
์ ๊ฐ์ ์ ์ญ ๊ฐ์ฒด์ ๋ฐ์ธ๋ฉ๋ฉ๋๋ค.
var sData = "Wisen";
function display() {
console.log("sData value is %s ", this.sData);
}
display.call(); // sData value is Wisen
์ฐธ๊ณ :
์๊ฒฉ ๋ชจ๋(strict mode)์์, this
๋ undefined
๊ฐ์ ๊ฐ์ง๋๋ค. See below.
"use strict";
var sData = "Wisen";
function display() {
console.log("sData value is %s ", this.sData);
}
display.call(); // Cannot read the property of 'sData' of undefined
๋ช ์ธ์
Specification |
---|
ECMAScriptยฎ 2026 Language Specification # sec-function.prototype.call |
๋ธ๋ผ์ฐ์ ํธํ์ฑ
Loadingโฆ