This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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"

๊ตฌ๋ฌธ

js
    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๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

js
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 ๊ฐ’์œผ๋กœ ๊ฐ์ฒด ์ „๋‹ฌ์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ, ํ•ด๋‹น ์˜ˆ์ œ์—์„œ๋Š” ์„ค๋ช…์˜ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

js
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์— ๋ฐ”์ธ๋”ฉ๋ฉ๋‹ˆ๋‹ค.

js
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์˜ ๊ฐ’์€ ์ „์—ญ ๊ฐ์ฒด์— ๋ฐ”์ธ๋”ฉ๋ฉ๋‹ˆ๋‹ค.

js
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.

js
"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

๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ

์ฐธ์กฐ