this

메서드가 객체 프로퍼티의 값에 접근할 때 활용하는 방법.

 

메서드 내부에서 this 키워드를 사용.

 

https://ko.javascript.info/object-methods#ref-33

메서드와 this

 

---

1. 메서드를 먼저 만들어 봐 : 함수표현식으로 메서드 할당

let user = {
  name: "MichaelSnow",
  age: 30
};

user.sayHi = function() {
  alert("잘알려진 구조주의 실험영화의 거장이며 그의 영화 <this>는 여전히 내게 마음 속 부채로 남아있다.");
  }; //함수표현식

user.sayHi(); // 잘알려진 구조주의 실험영화의 거장이며 그의 영화 <this>는 여전히 내게 마음 속 부채로 남아있다.

1)함수표현식으로 객체 프로퍼티 sayHi 에 함수 할당.

2)이렇게 객체 프로퍼티에 할당된 함수가 메서드.

 

2.소문에 의하면, 메서드는 이미 정의된 함수로도 만들 수 있다네 : 함수선언문으로 메서드 등록

let user = {
  name: "MichaelSnow",
  age: 30
};

// 함수 선언
function sayHi() {
  alert("안녕하세요! 저는 문종현에게 이런 사람으로 기억되고 있습니다.");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;  // <-- 프로퍼티에 함수 이름을 넣어주는 문장을 하나 더 써야 하나 봐

user.sayHi(); // <-- 그리고 user.sayHi 가 user.sayHi() 로 바뀌는 거야.

---

3.메서드 단축구문 : 객체 리터럴 안에서 메서드를 선언

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

별 말 아니고 걍 직접 객체 안에 써넣는다는 뜻이다.

그러나 위의 1,2와 3의 단축 구문의 방법이 완전히 동일하진 않다. 

객체상속과 관련된 차이가 존재한다는데 이걸 또 안알려주네... 

 

---

4. this 

 

메서드가 객체 프로퍼티의 값에 접근할 때 활용하는 방법.

메서드 내부에서 this 키워드를 사용.

자세히 봐. 

name, age, sayHi()가 user 안에 담겨 있다.

그리고 '점 앞’의 this는 이 메서드를 호출할 때 사용된 객체를 가리킨다.

 

let user = {
  name: "MichaelSnow",
  
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // MichaelSnow

 

user.sayHi()가 실행되는 동안에 this는 user를 가리킴.

물론 this를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능. 아래와 같이.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용함
  }
};

user.sayHi();

 

---

5. 트러블 슈팅

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어씁니다.

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.

---

6.자유로운 this

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다릅니다.

자바스크립트에선 모든 함수에 this를 사용할 수 있습니다.

아래와 같이 코드를 작성해도 문법 에러가 발생하지 않습니다.

function sayHi() {
  console.log( this.name );
}

 

동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다.

 

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

규칙은 간단합니다. 

obj.f()를 호출했다면 this는 f를 호출하는 동안의 obj입니다.

위 예시에선 obj가 user나 admin을 참조하겠죠.