JavaScript 문법 종합 3주차 (실행컨텍스트_명시적 this 바인딩)

명시적 this 바인딩

자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법

call
apply
bind

call 메서드

호출 주체인 함수를 즉시 실행하는 명령어로, 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있다.

var func = function (a, b, c) {
	console.log(this, a, b, c);
};

// no binding
func(1, 2, 3); // global{ ... } 1 2 3

var func = function (a, b, c) {
	console.log(this, a, b, c);
};

// 전역 객체를 바라보는 현상에서의
// 명시적 binding
// func 안에 this로서 bind하고 싶은 객체를 앞에 객체 모양으로 적어줌
// (this에는 {x: 1}이 binding됨)
func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 6

var obj = {
	a: 1,
	method: function (x, y) {
		console.log(this.a, x, y);
	}
};


obj.method(2, 3); // 1 2 3

// 호출 주체(obj.)가 있는 경우에서의
// 명시적 바인딩을 해봄
// 메서드 함수 안의 this는 항상 obj
obj.method.call({ a: 4 }, 5, 6); // 4 5 6

---

apply 메서드

call과 동일한데 this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열_[ ] 형태로 넣어준다.

var obj = {
	a: 1,
	method: function (x, y) {
		console.log(this.a, x, y);
	}
};

obj.method.apply({ a: 4 }, [5, 6]); // 4 5 6

---

call, apply메서드를 사용하는 것 보다 유용한 것

 

유사배열객체(array-like-object)에 배열 메서드를 적용

유사배열에는 조건이 있는데
1. 반드시 length가 필요해야한다. (이 조건은 필수이며, 없다면 유사배열이라고 인식하지 않는다.)
2. index 번호가 0부터 시작해서 1씩 증가해야한다.

// 객체에는 배열 메서드를 직접 적용할 수 없다.
// 유사배열객체에는 call 또는 apply 메서드를 이용해 배열 메서드를 차용할 수 있다.
var obj = {
	0: 'a',
	1: 'b',
	2: 'c',
	length: 3 // 길이확인
};

// this자리에 해당 유사배열객체(obj)를 넣어줌으로써, 이 기능을 수행하게끔 함

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' ]

---

Array.from 메서드(ES6)

//유사배열객체
var obj = {
	0: 'a',
	1: 'b',
	2: 'c',
	length: 3
};

// 객체 -> 배열
var arr = Array.from(obj);
console.log(arr); // [ 'a', 'b', 'c' ], 배열 출력

---

생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거)

// Student와 Employee의 공통된 부분을 가지고
// Person이라는 생성자 함수를 만듦
function Person(name, gender) {
	this.name = name;
	this.gender = gender;
}

function Student(name, gender, school) {
    // person을 즉시 실행(call메서드사용)해주면서 
    // this binding을 student의 this_school로 해줌(주석처리 한 이유)
    // name이랑 gender이 들어가면서 새로운 인스턴스 school를 생성하게 되는 것
	Person.call(this, name, gender); 
    // this.name = name;
    // this.gender = gender;
	this.school = school;
}

function Employee(name, gender, company) {
	Person.apply(this, [name, gender]); // 여기서 this는 employee 인스턴스!
    // this.name = name;
    // this.gender = gender;
	this.company = company;
}
var kd = new Student('길동', 'male', '서울대');
var ks = new Employee('길순', 'female', '삼성');

console.log(kd);
// Student { name: '길동', gender: 'male', school: '서울대' }
console.log(ks);
// Employee { name: '길순', gender: 'female', company: '삼성' }

---

여러 인수를 묶어 하나의 배열로 전달할 때 apply 사용

//비효율
var numbers = [10, 20, 3, 16, 45];
var max = min = numbers[0]; // 10

numbers.forEach(function(number) {
	// 현재 돌아가는 숫자가 max값 보다 큰 경우
	if (number > max) {
		// max 값을 교체
		max = number;
	}

	// 현재 돌아가는 숫자가 min값 보다 작은 경우
	if (number < min) {
		// min 값을 교체
		min = number;
	}
});

console.log(max, min);

▼

//효율
var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max, min); // 45 3

////////////////////

// 펼치기 연산자(Spread Operation)를 통하면 더 간편하게 해결도 가능해요
const numbers = [10, 20, 3, 16, 45];

// console.log(...numbers); 
// 10 20 3 16 45

const max = Math.max(...numbers);
const min = Math.min(...numbers);
console.log(max, min);
// 45 3

---

콜백함수의 매개변수

---

bind 메서드

this를 바인딩 하는 메소드이지만 앞 선 call, apply와는 다르다. 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.

함수에 this를 미리 적용
부분 적용 함수 구현할 때 용이하다.

var func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
func(1, 2, 3, 4); // window객체

// 1. 함수에 this 미리 적용
var bindFunc1 = func.bind({ x: 1 }); // 바로 호출되지는 않음 그 외에는 같아요.
bindFunc1(5, 6, 7, 8); // { x: 1 } 5 6 7 8

// 2. 부분 적용 함수 구현
var bindFunc2 = func.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
bindFunc2(6, 7); // { x: 1 } 4 5 6 7
bindFunc2(10, 11); // { x: 1 } 4 5 10 11

//////////////////////////////
// name 프로퍼티_bind메소드를 적용해서 만든 함수는
// name 프로퍼티에 bound라는 접두어가 붙는다.
console.log(func.name); // func
console.log(bindFunc1.name); // bound func
console.log(bindFunc2.name); // bound func