FrontJavascript

call&apply&bind

javascript, weirdparts

자바스크립트 함수에는 앞서 언급한 code, name 외에도 call, apply, bind 라는 기본 메소드를 갖고 있다. 이 메소드들은 this 키워드를 조작해주는 역할을 한다.

bind()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var person = {
    firstname : 'John',
    lastname : 'Doe',
    getFullName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    } 
}

var logName = function(lang1, lang2) {
    console.log('Logged: ' + this.getFullName());
    console.log('Arguments: ' + lang1 + ' ' +. lange2);
    console.log('----------');
} 
// .bind(person) 해도 아래와 동일한 결과

logName(); // undefined error, 현재 this는 logName

//logPersonName 의 this를 person 으로 변경
var logPersonName = logName.bind(person);

logName(); // this가 person으로 변경, Logged John Doe

bind() 는 새로운 함수를 반환하는데 인자로 들어가는 객체를 함수의 this로 바꿔주는 역할을 한다.

call(), apply()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var person = {
    firstname : 'John',
    lastname : 'Doe',
    getFullName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    } 
}

var logName = function(lang1, lang2) {
    console.log('Logged: ' + this.getFullName());
    console.log('Arguments: ' + lang1 + ' ' +. lange2);
    console.log('----------');
} 

var logPErsonName = logName.bind(person);
logPersonName('en');

logName.call(person, 'en', 'es');
console.log('mmmmmmmmmmmmmmm');
logName.apply(person, ['en', 'es']);

//Logged: John Doe
//Arguments: en es
//----------------
//mmmmmmmmmmmmmmmm
//Logged: John Doe
//Arguments: en es
//----------------

//IIFE 로도 가능
(function(lang1, lang2) {
    console.log('Logged: ' + this.getFullName());
    console.log('Arguments: ' + lang1 + ' ' +. lange2);
    console.log('----------');
}).apply(person, ['en', 'es']);

//Logged: John Doe
//Arguments: en es
//----------------

call() 과 apply() 는 bind와 마찬가지로 this를 변경하고, 인자를 넘기고 함수를 실행까지 한다. 둘의 차이는 인자를 따로 넘기냐, 묶여서 배열로 넘기냐의 차이밖에 없다.

Why? When?

그럼 언제 이 메소드들을 활용할 수 있을까

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//1. function borrowing
var person2 = {  // getFullName() 없는 객체 생성
    firstname : 'John',
    lastname : 'Doe',
}

// person 의 getFullName() 빌려 올 수 있다
console.log( person.getFullName.apply(person2) );

//2. function currying
function multiply(a,b) {
    return a*b;
}

//인자 기본값을 넣은 새로운 함수 생성 효과
var multipleByTwo = multiply.bind(this, 2); 
console.log(multipleByTwo(4)); // 8

var multipleByThree = multiply.bind(this, 3);
console.log(multipleByTwo(4)); // 12

Functional programming

Closure part2

Share