해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.
this
this는 기본적으로 실행컨텍스트가 구성될 때thisBinding정보로 저장된다.
이는 즉, 함수가 실행될 때this가 만들어진다는 의미이다.- 기본적인 개념은 "호출한 주체에 대한 정보" 이다.
상황에 따라 달라지는 this
this개념은 함수가 실행되는 위치 뿐만 아니라 호출 방식에 따라서도 그 값이 다르다.
전역 객체 this
- 자바스크립트 런타임 환경에 따라
브라우저에서는window/ node.js 에서는global라고 나타낸다.
// 브라우저 환경
console.log(this === window); // true
// node.js 환경
console.log(this === global); // true- 전역 공간에서 변수를 선언하면 전역객체
this안의 프로퍼티로 할당된다.
(사실 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로써 동작한다)
var a = 1;
console.log(this.a); // 1
console.log(window.a); // 1
// 그리고 전역 객체에 직접 할당해줄 수도 있다
this.b = 2;
console.log(b); // 2- 하지만 위의 두 방식에 대해서는 '삭제' 상황에서 다르게 작동한다.
var a = 1;
this.b = 2;
delete a; // false
delete b; // true
// 변수 선언 방식은 삭제되지 않는 반면, 객체 할당 방식은 삭제된다.
/* 좀더 정확하게 말하자면, 전자의 방식은 configurable 속성으로 false 값을 할당하고
후자의 방식은 configurable 속성으로 true 값을 할당한다 */
// var로 선언한 전역변수와 전역객체의 프로퍼티는 호이스팅 여부 및 configurable(변경 및 삭제 가능성) 여부에서 차이를 보인다.함수 vs 메서드 호출시 this
- 함수는 그 자체로 독립적인 기능을 수행하는 반면,
메서드는 자신을 호출한 객체에 관한 동작을 수행한다. - 메서드를 대체로 '객체의 프로퍼티에 할당된 함수' 라고 정의하는데
정확하게 이해하려면, '객체의 프로퍼티로써 호출된 함수' 라고 하는 것이 좋다.
왜냐하면, 해당 함수가 호출되는 방식이 중요하기 때문이다.
let func = function () {
console.log(this);
};
var obj = {
method: func,
};
// 함수로서 호출 형태
func(); // window (전역 객체)
// 메서드로서 호출 형태
obj.method(); // {method : f} (obj 객체 변수)
/* 두 호출 모두 똑같이 func 함수를 가리키지만
호출하는 방식에 따라 console.log(this) 값이 다르다*/- 함수로서의 호출 방식 은 호출하는 주체가 없이 독립적으로 작동하기 때문에
this정보로 전역객체를 수집한다. 하지만 메서드 방식 은 객체의 프로퍼티로서 호출하기 때문에 자신을 호출한 객체의 정보를this정보로 수집한다. - 어떤 함수를 메소드 방식으로 호출하는 경우,
this(호출하는 주체) 정보는 해당 함수명(프로퍼티명) 앞의 객체이다(obj.propertyorobj['property'])
this를 우회하거나 설정하지 않는 방법
이런식으로 호출 방식에 따라this정보가 바뀜으로서 함수로서의 호출 방식의this값에 전역객체가 담긴다. 이 때문에 만약 해당 함수가 지역변수로 쓰일시this사용시 혼란을 줄 수 있다. 그래서this정보를 우회해서 담거나 설정하지 않는 방법이 있다.
1.this정보 우회
this를 사용하는 함수의 상위 환경에서 미리this를 특정 변수에 할당하면, 그 변수를 해당 함수의 내부 범위에서 활용할 수 있다.
2.this정보를 바인딩하지 않는 함수:arrow function
arrow function은this정보 생성하지 않는다. 그래서this값을 접근할 때에 상위 스코프의this정보를 가져온다.
콜백 함수 this
- 어떤 함수가 다른 함수의 인자로 활용될 때에 콜백 함수라 칭하는데
상위 함수가 콜백 함수에this정보를 지정할 수 있다.
setTimeout(function () {
console.log(this); // 전역객체
}, 300);
[1, 2, 3].forEach(function () {
console.log(this); // 전역객체
});
// 위의 두 함수는 콜백함수의 this 값을 따로 지정해주지 않는다.
document.body.innerHTML += '<button id="a">click</button>';
document.body.querySelector('#a').addEventListener('click', function (e) {
console.log(this); // <button>
});
// addEventListner 함수는 콜백함수의 this 값에 자신의 this 값을 상속해준다.- 이처럼 상위 함수에 따라 콜백함수의
this가 정의된다.
생성자 this
- 생성자 함수란?
어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수 - 객체지향 언어에서는 생성자를 클래스, 클래스를 통해 만든 객체를 인스턴스 라고 한다.
'생성자'는 구체적인 인스턴스를 만들기 위한 일종의 틀이라 할 수 있다.
// 생성자 함수
var Constructor = function (name, age) {
this.id = name;
this.pw = age;
};
// 인스턴스 만들기
var instance_1 = new Constructor('son', 28);
var instance_2 = new Constructor('yun', 25);
// 결과 확인(this)
console.log(instance_1); // Constructor { id: 'son', pw: 28 }
console.log(instance_2); // Constructor { id: 'yun', pw: 25 }
// 결과를 보면 this 값이 인스턴스 자신을 지칭한다는 것을 알 수 있다
https://castie.tistory.com