Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 전역변수
- text-align
- 중앙정렬
- 동기적
- 단락회로평가
- 비구조화
- 이벤트위임
- 이벤트리스너
- 비동기적
- git
- 논리연산자
- 자바스크립트
- truthy
- falsy
- icoMoon
- map()
- 지역변수
- 돔조작
- 어웨이트
- 버블링
- js
- addEventListener
- 리액트
- 프론트엔드
- 캡쳐링
- async
- 자바스크립트기초
- INCLUDES
- Await
- 코딩공부
Archives
- Today
- Total
피리부는 사나이 (pied piper)
메서드와 This 본문
자바스크립트에서는 객체 프로퍼티에 함수 할당할 수 있음, (동적인 능력)
var cat = {
name : "야옹이"
weight : 3.3
};
//객체 cat에게 동적인 능력을 부여해보자
cat.meow = function () {
console.log("야옹~");
};
cat.meow(); //야옹~
객체 프로퍼티 meow에 ‘야옹~’이라는 것을 말해주는 함수 할당
‘객체 프로퍼티’에 할당된 함수가 메소드이다.
객체 리터럴 안에 선언할 때 문법 두 가지
//첫 번째 방법 (기본)
cat = {
meow: function() {
console.log("야옹~");
}
};
//좀 더 깔끔한 문법 두 번째
cat = {
meow() {
console.log("야옹~");
}
};
//function 생략해도 동작은 다를 바 없음
this
<aside> 💡 메소드는 this와 매우 친하다. 대부분의 메소드가 객체 프로퍼티 값을 이용함 this를 이용해 적절하게 해당 객체에 접근 할 수 있다.
</aside>
let cat = {
name: "야옹이",
weight: 3.3,
meow() {
console.log(this.name);
}
};
cat.meow();
//결과 야옹이
다시말하지만 this는 런타임에 결정된다 cat.meow가 실행될 때 name앞에 객체 ‘this’는 현재 객체를 나타낸다.
<aside> 💡 그렇다면 This를 왜 쓰는걸까? 안 쓰면 어떤 안 좋은 일이 발생할까?
</aside>
this를 안 쓰면 외부 변수의 값을 이용할 가능성이 있기때문에 의도와 다른 결과가 나올 수 있기 떄문에 this를 쓰는 것이 의도를 확실히 나타낼 수 있음
<aside> 💡 또한 this는 자유롭다. ‘런타임’에 결정되기때문에 문맥에 따라 달라진다는 말이다. 동일한 함수라도 객체 (문맥)가 다르다면 당연히 접근하는 객체도 달라지고 값이 달라질 것
</aside>
let cat = {name :"야옹이"};
let master = {name: "인간"};
function meow() {
console.log (this.name);
}
//별개의 객체에서 동일한 함수 사용
cat.f = meow;
master.f = meow;
cat.f(); // 야옹이
master.f(); //인간
this는 점 앞에 있는 객체 참조,
동일한 함수라도 객체가 다르면 값이 달라짐
이런 의미에서 자유롭다고 봄
재사용할 수 있는 장점은 있겠지만, 실수로 이어질 가능성 농후
'Java Script' 카테고리의 다른 글
[JS] 함수 표현식 VS 함수 선언식 (0) | 2022.02.17 |
---|---|
[JS] 배열과 객체의 차이 (0) | 2022.02.16 |
[JS] 콜백 함수 (0) | 2022.02.16 |
[자바스크립트] 객체안에 프로퍼티 유무 확인법 (0) | 2022.01.11 |
지역변수와 전역변수 (0) | 2022.01.06 |
Comments