4주차 위클리페이퍼 (this, 렉시컬 스코프)

this

this의 용도

this는 쉽게 말하면 실행하는 객체 자신에게 접근하기 위해 사용합니다.

 

this가 가리키는 것

this는 크게 6가지 경우에서  다르게 인식됩니다.   (JS / Node.js)

1. 전역 컨택스트	전역 객체 (window / global)
2. 함수 내	전역 객체
3. 객체 메소드 내	호출한 객체
4. 생성자 함수 내	새로 생성된 객체
5.이벤트 핸들러 내	이벤트를 받는 element(요소)
6. 화살표 함수 내	함수를 만든 객체 (함수가 생성된 시점의 실행 컨택스트의 객체)

 

전역 컨택스트 this

전역 객체를 가리킵니다. JS => winow, Node.js => global

console.log(this); // 브라우저에서는 window 객체를 출력

 

함수 this

기본적으로 전역 객체를 가리킵니다. 하지만 엄격 모드('use strict')에서는 undefined를 나타냅니다.

function regularFunction() {

    console.log(this); // window 또는 global 객체

}

function strictFunction() {

    'use strict';

    console.log(this); // undefined

}

regularFunction();

strictFunction();

 

객체 메소드 this

객체의 메소드로서 호출되면, 그때 그 객체에 바인딩됩니다. this는 호출한 객체를 가리킵니다.

const obj = {

    name: 'JavaScript',

    getName: function() {

        console.log(this.name);

    }

};

obj.getName(); // 'JavaScript'

 

생성자 함수 this

새로 생성되는 객체를 가리킵니다. new로 만들어 질 때 this가 가리키는 객체가 정해집니다.

function Person(name) {

    this.name = name;

}

const person = new Person('John');

console.log(person.name); // 'John'

 

이벤트 핸들러 this

이벤트를 받는 요소를 가리킵니다. click 이벤트면 this는 클릭된 요소를 가리킵니다. (요소도 객체)

document.getElementById('myButton').addEventListener('click', function() {

    console.log(this); // 클릭된 버튼 요소

});

 

화살표 함수 this

일반 함수는 this가 호출한 객체를 가리키지만, (단순히 스크립트에서 쓰면 전역 객체를 가리킵니다.)

화살표 함수는 this가 함수가 만들어진 위치의 객체를 가리킵니다.

const obj = {

    name: 'JavaScript',

    regularFunction: function() {

        setTimeout(function() {

            console.log(this.name); // undefined (전역 객체의 name 속성)

        }, 100);

    },

    arrowFunction: function() {

        setTimeout(() => {

            console.log(this.name); // 'JavaScript'

        }, 100);

    }

};

obj.regularFunction();

 (호출 위치와 상관없이 객체의 변수에 접근 할수 있어서 객체 지향 설계를 할 때 좋아보인다.)

 

렉시컬 스코프

렉시컬 스코프란, 변수의 스코프 범위가 함수 호출 시점이 아니라, 함수 선언 시점에 정해지는 것을 말합니다.

정적 스코프라고 부릅니다.

JS는 렉시컬 스코프를 따릅니다.

var x = 1;

function a(){

  var x = 10;

  b();

}

function b(){

  console.log(x);

}

a(); //1

b(); //1

함수를 어디서 호출하였는지는 상관이 없습니다.

함수 a는 전역 스코프에서 선언되었기 때문에 상위 스코프인 전역 스코프를 따릅니다.

a는 var x를 안에서도 10으로 선언했지만 이미 전역 스코프에 같은 이름 x변수가 선언되어 있어서 재선언은 하지 못합니다.

b도 a에서 호출했지만 스코프는 선언된 위치인 전역 스코프를 따릅니다. 

 

var는 함수 스코프

let, const는 블록스코프

그리고 JS 변수는  모두 다  렉시컬 스코프를 따릅니다.