자바스크립트 - this

임하나·2023년 4월 30일

[자바스크립트]

목록 보기

2/2

this -> {?}
자바스크립트에서 this는 어떤 객체를 가리킨다.

"this는 함수를 호출한 객체이다"

전역문맥

console.log(this);

this는 window가 된다.

엄격모드를 활성화해도, this는 window

'use strict';

console.log(this);

엄격모드란? (use strict)

자바스크립트 문법을 조금 더 엄격하게 검사해준다.

예를 들어, 변수를 선언하지않고

x = 1;

상단처럼 써준다면, 에러가 발생하지않는다.
그러나 use strict를 써주면 에러가 발생한다.

'use strict';
x = 1;

함수문맥

function main(){
  console.log(this);
}

main();

여기서 this는 함수 main을 가리킨다.

"this는 함수를 호출한 객체이다"

main은 window.main 임으로, main안에 this는 window가 된다.

'use strict';

function main(){
  console.log(this);
}

main();

use strict 써주면 this는 undefined가 출력된다.
위에처럼 window를 나타내려면 window.main() 이렇게 상세하게 적어주어야한다.

'use strict';

function main(){
  console.log(this);
}

window.main();

객체문맥

const object = {
  name : '별코딩',
  main:function(){
    console.log(this); // {name: '별코딩', main: ƒ}
  }
}

object.main();

"this는 함수를 호출한 객체이다"

main이 가리키고 있는 것은 object이다.
객체에 다른 속성에 접근 할 때 굉장히 유용하다.

const object = {
  name : '별코딩',
  main:function(){
    console.log(this.name);//별코딩
  }
}

object.main();

main함수를 object밖에 써줬었도, 똑같이 출력된다.

function main(){
  console.log(this);
}

const object = {
  name : '별코딩',
  main,
}

object.main(); //{name: '별코딩', main: ƒ}

main 이후에 추가해 줘도, 값은 동일하다.

function main(){
  console.log(this);
}

const object = {
  name : '별코딩',
}

object.main = main
object.main(); //{name: '별코딩', main: ƒ}

function main(){
  console.log(this);
}

const object = {
  name : '별코딩',
  smallObject : {
    name:'작은별코딩',
    main,
  },
}

object.smallObject.main(); //{name: '작은별코딩', main: ƒ}

main함수를 직접적으로 호출한 객체는 smallObject 임으로 smallObject 값이 나온다.

동적으로 바뀌는 this값을 바뀌지않고, 고정적으로 나오게 하려면 bind를 사용하면된다.

bind

function main(){
  console.log(this);
}

const mainBind = main.bind({ name:'h1' });
mainBind();

bind 새로운 함수를 반환해준다.
bind 는 또 bind를 할 수 없다. 한번 더 bind해준 것을 무시하고, 처음 bind해준값만 반환된다.

function main(){
  console.log(this);
}

const mainBind = main.bind({ name:'h1' });
const mainBindBind = mainBind.bind({});
mainBindBind(); //{name: 'h1'}

const object = {
  name:'별코딩',
  main:function(){
    console.log(this);
  }.bind({ name : '멋진 객체' })
}

object.main(); //{name: '멋진 객체'}

이벤트 처리하기

 <button type="button" id="btn">버튼</button>

(function(){
  const button = document.querySelector('#btn');

  button.addEventListener('click', function(e){    
    console.log(e.target === this); //true
  })
})()

임하나

이전 포스트

자바스크립트 - this