JavaScript 의 this 이해하기, TypeError: Cannot read property 'name' of undefined

this의 사용

this는 객체를 다시 호출할때 내가 호출하는 것이 이전에 정의되었던 '그' 객체를 호출하는 것이 맞다고 인식시켜주기 위한 것이다. 'this'의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정된다.

1. 함수가 객체의 메서드로 호출될 때: 'this'는 해당 메서드를 호출한 객체를 참조한다.
2. 함수가 일반 함수로 호출될 때: 'this'는 전역 객체인 'window'를 참조한다. (브라우저 환경에서)
3. 함수가 생성자 함수로 호출될 때: 'this'는 생성된 객체를 참조한다.
4. 화살표 함수 내에서: 'this'는 주변 스코프의 'this' 값을 유지한다.

'this'를 사용하여 메서드 내에서 객체의 속성이나 메서드에 접근할 수 있다. 

 

this

 

 

아래의 예시에서 sayName function은 선언된 name 의 값을 참조한다. 

const obj = {
  name: "John",
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName();  // 출력: "John"

 

 

 

 

const self = this;

아래와 같이 변수에 한번 담아주는 이유는 함수 내에서 'this' 값을 제대로 참조하기 어려운 상황이 발생하기 때문이다. 콜백 함수 내에서 'this'를 사용할 때 'this'는 콜백 함수를 호출한 객체가 아닌 다른 값을 가리킬 수 있다. 이 때 'self'와 같은 변수를 사용하여 원하는 'this' 값을 캡처하고 참조할 수 있다.

const self= this;

 

아래처럼 this 를 self 변수에 담아주었다. 'self' 변수를 사용하여 원래의 'this' 값을 캡처하고 함수 내에서 일관된 'this' 참조를 유지하는 것이다. 즉, 일관성 있고 안전하게 this 값을 참조하기 위해 변수에 담는 것이다. 

 

created: function () { //컴포넌트 실행될 때 한번 실행
    let token = sessionStorage.getItem('token')
    this.id = sessionStorage.getItem('loginId')
    const self = this;
    self.$axios.get('/members/' + self.id, { headers: { 'token': token } })//비동기요청
      //헤더에 토큰을 담아 보냄 검색함. 검색한 결과를 변수에 담으면 입력 양식에 출력됨 
      .then(function (res) { //요청 결과 받아옴. 파람 res 에 결과저장됨. res.data가 빽에서 전송한 데이터 
        if (res.status == 200) {

 

 

 

 

this를 변수에 담지 않았을 때 발생할 수 있는 에러

1. TypeError: Cannot read property 'name' of undefined (또는 Cannot read property 'name' of null):
   이 에러는 객체에 속성 'name'이 존재하지 않는데, this.name과 같이 this를 사용하여 접근하려고 할 때 발생합니다. this가 할당되지 않았거나 undefined 또는 null 값을 가지고 있다면 이런 에러가 발생합니다.
   
   
2. TypeError: Cannot set property 'name' of undefined (또는 Cannot set property 'name' of null):
   이 에러는 객체에 속성 'name'을 설정하려고 하는데, this.name = "John"과 같이 this를 사용하여 설정하려고 할 때 발생합니다. this가 할당되지 않았거나 undefined 또는 null 값을 가지고 있다면 이런 에러가 발생합니다.
   
   
3. TypeError: Cannot read property 'callMethod' of undefined (또는 Cannot read property 'callMethod' of null):
   이 에러는 객체의 메서드를 호출하려고 하는데, this.callMethod()과 같이 this를 사용하여 호출하려고 할 때 발생합니다. this가 할당되지 않았거나 undefined 또는 null 값을 가지고 있다면 이런 에러가 발생합니다.

 

 

 

 

Vue

Vue에서는 data 에서 선언한 변수에 값을 담고, 호출하기 위해 사용하였다.

 

 

https://skylarcoding.tistory.com/18#this%20%EC%B0%B8%EC%A1%B0%20%EB%B3%80%EC%88%98-1

[Java] 객체 지향 4, this

https://stackoverflow.com/questions/43505736/understanding-the-this-keyword-in-vue

Understanding the 'this' keyword in Vue

https://laracasts.com/discuss/channels/vue/why-using-let-self-this

https://laracasts.com/discuss/channels/vue/why-using-let-self-this