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 |