본문 바로가기
this기술 정리

this 용법

1분기술 정리티스토리에서 옮긴 글

1. 일반 함수로 실행

js
function a() {
  console.log(this);
  return ;
}
a(); // window

함수를 그냥 실행하게 되면 this의 값은 전역 객체(window)를 참조하게 됩니다.

2. 메서드로 실행

  • 메서드는 객체 안에 있는 함수로, 객체명.함수명 형태로 .이 붙어있는 형태로 함수를 호출하는 경우입니다.
js
const obj = {
  func() {
    console.log(this);
    return ;
  },
  sub: {
    subFunc() {
      console.log(this);
      return ;
    }
  }
}
obj.func(); // (1) obj
obj.sub.subFunc(); // (2) sub

3. apply/ call / bind

  • apply/call/bind는 명시적으로 this값을 개발자가 원하는 객체로 지정할 수 있도록 도와주는 메서드입니다.

4. new 연산자 - 생성자 함수

js
function Person(name,age) {
  this.name = name,
  this.age = age,
  // return 문이 없음을 유의
}

function PersonReturn(name, age) {
  this.name = name,
  this.age = age,

  return {
    name: "고릴라",
    age: 13
  }
}

const 영희 = new Person("영희", 23); // (1)
const 의섭 = new Person("의섭", 26); // (2)

const 고릴라 = new PersonReturn("원숭이", 31);
console.log(고릴라.name); // 고릴라
  • this는 함수를 호출할 때 결정되는 것
  • 전역 범위에서 사용될 때 this는 전역객체를 가르킴
  • 함수에서 사용될때도 전역객체를 가르킴
  • 객체에 속한 메서드에서 사용될 때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킴
  • 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킴
  • 생성자에서 사용될 때 생성자로 인해 생성된 새로운 객체를 가르킴

출처 : https://amyhyemi.tistory.com/224

https://velog.io/@uiseop/this%EC%9A%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

  • #프론트엔드 개발자 엄성준
  • #제로베이스
  • #오토위니
  • #프론트엔드
  • #제로베이스 프론트엔드 스쿨
  • #프론트엔드 개발자
  • #autowini
  • #프로그래머스
  • #ViTE
  • #Number()
  • #sort()
  • #WiniLogis
  • #프론트엔드 스쿨
  • #String()
  • #forEach()
  • #join()
  • #react
  • #next.js
  • #split()

기술 정리의 다른 글