명시적으로 this를 바인딩 하는 방법

call

사용법

Function.prototype.call(thisArgs[, arg1], arg2[, ...]]);

call 메서드의 첫 번째 인자는 this로 바인딩 하고, 이후 인자들은 호출할 함수의 매개변수로 들어간다.

함수를 그냥 호출하면 this 는 window 전역 객체를 참조하지만 call메서드를 이용하면 임의의 객체를 this로 지정할 수 있다.

apply

Function.prototype.apply(thisArgs[, argsArray]);

apply 메서드는 call 메서드와 기능적으로 완전히 동일하지만 호출할 함수의 인자를 배열로 넣느냐의 차이이다.

call / apply 활용법

유사배열객체에 배열 메서드 적용(1)

var obj = {
	0: 'a',
	1: 'b',
	2: 'c',
 length: 3,
};
Array.prototype.push.call(obj, 'd');
console.log(obj);   // {0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4}

var arr = Array.prototype.slice.call(obj);
console.log(arr);   // ['a', 'b', 'c', 'd']

유사배열객체에 배열 메서드 적용(2)

function a(){
	var argv = Array.prototype.slice.call(arguments);
	argv.forEach(function(arg){
		console.log(arg);
	});
}
a(1, 2, 3);

document.body.innerHTML = '<div>a</div><div>b</div><div>c</div>';
var nodeList = document.querySelectorAll('div');
var nodeArr = Array.prototype.slice.call(nodeList);
nodeArr.forEach(function (node){
	console.log(node);
});

배열처럼 index, length 프로퍼티를 지닌 문자열 (string)에도 마찬가지로 적용할 수 있다. 근데 읽기전용이므로 변경을 가능하는 메서드(push, pop, 등) 은 에러가난다. 문자열에 안되니까 ..

근데 이런거 .. slice.call()하는거 그냥 배열 메서드 적용하려고 만든건데 모르는 사람이 보면 알아차리지 못한다. 그래서 ES6에서 유사배열객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 전환하는 Array.from 메서드를 도입했다.

위 에 예제들 전부 Array.from(obj) 하면 같음 .

생성자 내부에서 다른 생성자 호출

생성자 내부에서 공통으로 사용되는 내용이 있을 경우 call, apply를 이용해 다른 생성자를 호출하면 반복을 줄일 수 있다.

function Person(name, gender){
    this.name = name;
    this.gender = gender;
}

function Student(name, gender, school){
    Person.call(this, name, gender);
    this.school = school;
}

function Employee(name, gender, company){
    Person.apply(this, [name, gender]);
    this.company = company;
}

var dw = new Student('대원', 'M', '단국대');
// this: Student {'대원', 'M', '단국대'}
음 .. 근데 

function Student(name, gender, school){
    console.log('this1 : ', this);
    
    Person.call(this, name, gender);
    console.log('this2 : ', this);

    this.school = school;
    console.log('this3: ', this);
}

이렇게 this일일히 다른 코드를 수행 할 때마다 출력해보면 다름 이유는 머임 

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply활용

음 . . 일단 Math.max, Math.min 메서드에 대해 알아봐야함. 인자로 배열이 들어가는 것 같은데 일반 배열은 안들어가고 스프레드 연산자나 아래 코드와 같이 apply 메서드를 사용해야됨.

var numbers = [10, 20, 30, 40, 50];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);

// ES6 에서의 spread 연산자 사용하면
const numbers = [10, 20, 30, 40, 50];
const max = Math.max(...numbers);
const min = Math.min(...numbers);