this 용법
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) sub3. 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()