JavaScript 익히기 #21 this

Sunki-Kim·2023년 6월 3일
0

JavaScript 익히기

목록 보기
21/22

this는 실행컨텍스트 문맥에 직결되는 부분이기도 하다.
실제 함수를 작성할때 꽤나 자주 사용하지만, this가 환경에 따라 참조값이 달라지는 부분이 있어 짚고 넘어가려 작성해본다.

this에 대하여,
this는 JavaScript 예약어다.

  • this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
  • this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조
  • this는 자바스크립트 엔진에 의해 암묵적 생성
  • this는 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있음
  • this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정
  • 크게 전역에서 사용할 때와 함수 안에서 사용할 때로 나눈다.
바인딩

식별자와 값을 연결하는 과정으로 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하며 this 바인딩은 this와 this가 가리킬 객체를 바인당한다.

전역에서 선언된 함수 this

// 전역 환경

function Sunki(){
    this.name = 'Sunki'
    return this;
}


const sunki = new Sunki();

console.log(sunki); // Sunki { name: 'Sunki' }


function MyFn() {
    this.title = 'Sunki!';
    return this;
}
// new 연산자를 이용해서 새로운 객체를 얻는다.
const myfn = new MyFn();
myfn // MyFn {title: 'Sunki!'}

function -> global 인 경우와 new 연산자를 사용해서 생성자 함수 방식으로 인스턴스를 생성한 경우이다.
myFn가 빈객체를 만들어 이 생성자 함수에서 this가 빈 객체를 가르킨다.


// obj

const climb = {
    title : 'bolder',
    showTitle() {
        console.log(this.title)
    }
}

climb.showTitle(); // bolder -> 객체 메소드




// 고차 함수의 콜백함수 안에서 this
const fn = {
    title: 'climbing',
    tags: ['red','orange','yellow', 'green'],
    showTags() {
        this.tags.forEach(function (tag) {
            console.log(tag); // red, orange, yellow, green
            console.log(this) // 윈도우 객체 출력
        })
    }
}

fn.showTags();



// 객체 메소드 함수 this 해결방안
const fn2 = {
    title: 'climbing',
    tags: ['red', 'orange', 'yellow', 'green'],
    showTags() {
        this.tags.forEach(function(tag) {
            console.log(tag);
            console.log(this); // fn
        }, this); // 여기는 일반 함수 바깥, fn 객체를 참조할 수 있다.
    }
}
fn2.showTags();

method-> obj인 경우이며, showTitle이 fn객체의 메소드이기 때문에 this는 fn 객체를 참조한다.

고차함수 경우에는 콜백함수 안에서 this가 콜백함수가 일반 함수이기 때문에 전역 객체를 참조한다.

이 경우에는 콜백함수 다음 인자로 참조할 객체를 전달한다.

this는 이처럼 어떤 위치에 있고, 어디에서 호출하며, 어떤 함수에 있는지에 따라 참조 값이 달라지는 특성을 가지고 있어서 사용할 때 유의를 해야한다.

소스코드

profile
당신에게 가치있는 Developer가 되고자

0개의 댓글