자바스크립트 12 this, call, apply, bind

1. 현재의 무드: 처음으로 스터디원분을 오프라인으로 만나서 카공을 했다! 연예인 실물로 본 느낌 ㅋㅋㅋㅋ 그리고 같이 온라인으로 열심히 하던 분이랑 만나서 그런지 주말인데 의욕이 뿜뿜

 

그리고 붙캠 시작하고 section 1 동안은 mdn만 읽고도 어느 정도 궁금증이 해결되는 경우가 많아서 이외의 매체를 이용하는 일이 드물었다. 하지만 section 2 시작하고부터는 모르는 개념이 대거 등장하는 바람에... 문서 읽으면 머리가 어질어질한 경우가 많아서 프로그래밍 언어에 대한 짧은 강의를 오려주는 유툽 강의를 많이 활용하게 되었는데, 모르는 개념을 처음 접해보고 기초적인 내용을 이해하는데에 많은 도움을 받고 있다.

 

2. 오늘 학습한 내용 중 키워드: this, call, apply, bind

3. 오늘 학습한 내용 요약

 

.this는 클래스와 인스턴스 배울 때 썼던 건데, 사실 뭔지는 잘 모르고 썼다. 그리고 찾아보던 중 'this가 바인딩 어쩌구..' 이런 식으로 써있는 글이 이해가 안되서 this와 bind에 대해 공부해보게 되었다. 

 

1. Object, method, this

 

메서드란?

const superman = {
	name: 'gyuri',
    age: 23
    fly: function() {
    	console.log('날아갑니다.')
        }
 }

// method: 객체 프로퍼티로 할당 된 함수

superman.fly(); // '날아갑니다.'

 

 

this란? 

 

const sayHello = function() {
    console.log(`Hello, Im ${this.name}`)
}

let boy = {
	name: 'Mike',
    sayHello // 함수를 각 객체의 메서드로 넣어줌
    }

let girl = {
	name: 'Anna',
    sayHello
    }
    
boy.sayHello() // Hello, Im Mike 
girl.sayHello() // Hello, Im Anna

// this는 런타임에 결정되므로, 15번 코드가 실행될 때 this는 boy 객체, 16번 코드가 실행될 때 this는 girl 객체

 

* 주의: 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음. 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴. 

 

let boy = {
	name: 'Mike',
    sayHello() => {      // 화살표함수로 메서드 생성
    console.log(`Hello, Im ${this.name}`) // this가 전역 객체를 가르킴
	}
}

boy.sayHello(); // this !== boy 

// 브라우저 환경에서 전역객체: window
// Node.js 환경에서 전역객체: global

 

2. call, apply, bind

: 함수의 메서드로, 함수 호출 방식과 관계없이 함수의 this를 지정할 수 있음

 

call이란?

// call 메서드: 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있음

const mike = {
	name: 'Mike',
};

const tom = {
	name: 'Tom',
};

function showThisName() {
	console.log(this.name);
}

showThisName(); // 여기서 this는 window
showThisName.call(mike); // Mike 

function.call(Object, 매개변수 1, 2 ... ) // 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있음.

 

위의 코드에 아래의 함수를 추가로 작성한다면? 

 

 

function update(birthYear, occupation) {
	this.birthYear = birthYear;
    this.occupation = occupation;
}

update.call(mike, 1999, 'singer');
// update라는 함수의 this를 mike 객체로 지정하고, birthYear과 occupation에 각각 1999, 'singer'를 전달해줌

console.log(mike)
// { name: 'Mike',
	birthYear: 1999,
    occupation: 'singer'
    }
// mike객체에 각 key와 value가 생김

 

apply란? 

-> 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 동일함. 함수의 매개변수를 전달해줄 때 배열 타입으로 받음. 

 

update.apply(mike, [1999, 'singer']) // 위와 동일한 값이 나옴

const nums = [3, 10, 1, 6, 4];

const minNum = Math.min.apply(null, nums); // apply: 배열로 매개변수 전달
const maxNum = Math.max.call(null, ...nums); // call: spread 문법으로 배열 해제 후 매개변수 전달

 

this란?

함수의 this 값을 영구히 바꿀 수 있음

 

 

사용 예시

const user = {
	name: 'Mike',
    showName: function() {
    	console.log(`hello, ${this.name}`)
    },
}

user.showName() // hello, Mike
let fn = user.showName
fn() // hello,
// this 값을 잃어버림

fn.call(user) // this를 user로 지정
fn.apply(user) // this를 user로 지정
// fn() 시 hello, Mike 출력

let boundFn = fn.bind(user);

boundFn() // hello, Mike

 

 

아래 두 영상을 참고했습니다. 

 

https://www.youtube.com/watch?v=ZXQA4gRHqe0 

https://www.youtube.com/watch?v=KfuyXQLFNW4