this는?
"this" 키워드는 모든 함수 대부에서 별도의 변수 선언 없이 사용이 가능.
->화살표 함수에서는 일반 변수와 동일하게 스코프 체인을 따라 탐색하게 된다.
함수 실행 방식에 따라 this의 의미가 달라진다.
1. Regular Function Call
2. Dot Notation(Object Method Call)
3. Call, Apply, Bind
4. "new" keyword
1️⃣. 일반함수 실행
var age = 30;
function log () {
console.log(this.age);
}
log();
=> 여기서 this는 전역 변수를 찾게 된다.
but, strict mode에서는 undefined이 나온다.
(strict : 자바 스크립트가 묵인해왔던 에러를 엄격하게 잡는다. 사용법 'use strict';)
2️⃣. Dot notation
var andy = {
age: 21,
foo: function ( ) {
console.log(this.age);
}
var func = ken.foo;
//Dot Natation
andy.foo();
//Regular Function call
func();
=> 여기서 this는 andy라는 객체가 되어 21이 출력된다.
*고민해볼 문제
verifyAge가 화살표 함수에서 this는 존재하지 않는다. 그래서 상위 함수를 찾게 되는데
makePerson에 age가 정의되지 않았기 때문에 undefined가 나올 것이다.
3️⃣. Call, Apply, Bind
Explicit Binding
이라고 부르는 방식. 함수의 .call, .apply, .bind라는 메소드를 사용하는 방식.
*explicit binding: 명시적 바인딩
call
call은 첫번째 인자를 함수의 this으로 설정한고 실행한다.
여기서는 person의 this를 andy로 설정하고 실행했다.
Apply
call 메소드와 유사하지만, apply배열에 arguments를 넘겨줄때 배열로 넘겨줘야 한다.
Bind
Function.prototype.bind
andy를 넣어 foo를 바인드해서 반환해준다.
여기서this는 andy
*this를 null, undefined로 설정했다면
비엄격모드라면 null및 undefined는 전역 객체로 대체되고 원시값은 객체로 변환된다.
4️⃣. "new"keyword
이 때 this는 새로운 객체를 만들어 준다.
**
함수명은 소문자로 시작해야하지만 생성자 함수는 대문자로 시작한다.
binding
javascript의 함수는 각자 자신만의 this라는 것을 정의한다. 예를 들어 자기소개를 하는 함수를 만들기 위해 say()이라는 함수를 만든다고 하자.
const say = function() { console.log(this); // 여기서 this는 뭘까?
console.log("Hello, my name is " + this.name); };
say();결과 값으로 window가 나온다.
window객체가 나타난다. 기본적으로 this는 window이기 때문이다. 사실 참 어려운게, 꼭 window라고만 말할 수는 없다. this는 객체 내부, 객체 메서드 호출시, 생성자 new 호출시, 명시적 bind시에 따라 바뀌기 때문이다.
어찌되었든 우리는 say함수에서 Window객체를 사용하고 싶지 않다. 즉, this를 그때 그때 알맞은 객체로 바꿔서 this값에 따라 인사말이 할 것이다. 이 것이 this의 binding이다.
