본문 바로가기
Javascript/jQuery

Function.prototype.call()

by 카리3 2020. 6. 13.

Function.prototype.call()

call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. this는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 call()을 이용해 다른 객체에 상속할 수 있습니다.

func.call(thisArg[, arg1[, arg2[, ...]]])

thisArg : func 호출에 제공되는 this의 값.

arg1, arg2, ... : 객체를 위한 인수.

 

객체 생성 연결자에 call 사용

<!DOCTYPE html>
<html>
<body>

<script>

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);

</script>

</body>
</html>

 

익명 함수 호출에 call 사용

<!DOCTYPE html>
<html>
<body>

<script>

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);
}

</script>

</body>
</html>

 

함수 호출 및 'this'를 위한 문맥 지정에 call 사용

<!DOCTYPE html>
<html>
<body>

<script>

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

</script>

</body>
</html>

 

첫번째 인수 지정없이 call 사용

아래 예제에서, display 함수에 첫번째 인수를 전달하지 않고 호출합니다. 첫번째 인수를 전달하지 않으면, this의 값은 전역 객체에 바인딩됩니다.

<!DOCTYPE html>
<html>
<body>

<script>

var sData = 'Wisen';            
function display(){
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

</script>

</body>
</html>

주의: 엄격 모드(strict mode)에서, this 는 undefined값을 가집니다. See below.

<!DOCTYPE html>
<html>
<body>

<script>

'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

</script>

</body>
</html>

'Javascript > jQuery' 카테고리의 다른 글

jQuery 플러그인  (0) 2020.06.28
Function.prototype.bind()  (0) 2020.06.13
Function.prototype.apply()  (0) 2020.06.13
jQuery.fn.extend()  (0) 2020.06.13
jQuery.extend()  (0) 2020.06.13