JS : 함수 호출 패턴 기초

함수를 호출하는 네 가지 패턴

함수는 네 가지 시나리오나 패턴을 사용해 호출할 수 있습니다.

• 함수로서 호출하기
• 메소드로서 호출하기
• 생성자로서 호출하기
• apply() 또는 call() 을 사용해서 호출하기

다음 코드에서 이러한 네 가지 패턴을 사용해 함수를 호출해 보도록 합니다.

함수 패턴

javascript

// 함수 패턴
var myFn = function () {
    return 'jaehee';
};
console.log(myFn()); // jaehee 가 기록된다.

메소드 패턴

javascript

// 메소드 패턴
var myObj = {
    myFn: function () {
        return '메소드 패턴입니다.'
    }
};
console.log(myObj.myFn());

생성자 패턴

javascript

// 생성자 패턴
var MyConstructor = function () {
    this.str = '생성자 패턴입니다.';
    this.constFn = function () {
        return this.str;
    };
};
var myConst = new MyConstructor(); // MyConstructor 생성자를 통해 호출
console.log(myConst.constFn());

apply() 와 call() 패턴

javascript

// apply() 와 call() 패턴
var obj = {
    method: function () {
        console.log(this.name, arguments[0], arguments[1]);
    }
};

var objA = {name: 'foo'};
var objB = {name: 'bar'};

// method 함수가 마치 objA 객체의 메소드인 것처럼 호출된다.
obj.method.call(objA, 'call', '패턴입니다.');

// method 함수가 마치 objB 객체의 메소드인 것처럼 호출된다.
obj.method.apply(objB, ['apply', '패턴입니다.']);

call() 과 apply() 차이점은 호출한 함수에 매개변수를 전달하는 방식입니다.

apply() 는 매개변수를 배열로 전달하는 방식입니다.

Related Info

1. call()과 this
2. apply()와 this
3. call/apply & this 값 설정
4. Function 상속과 call,apply

Jaehee's WebClub