피리부는 사나이 (pied piper)

메서드와 This 본문

Java Script

메서드와 This

코더 451 2022. 2. 15. 12:06

자바스크립트에서는 객체 프로퍼티에 함수 할당할 수 있음, (동적인 능력)

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는 점 앞에 있는 객체 참조, 
동일한 함수라도 객체가 다르면 값이 달라짐 

이런 의미에서 자유롭다고 봄 

재사용할 수 있는 장점은 있겠지만, 실수로 이어질 가능성 농후

Comments