JavaScript 개체에서 사용되는 Getter 및 Setter....어떻게?

일반적인 객체 패러다임은 getter 및 setter 메서드를 속성으로 포함하는 것입니다. Getter 및 Setter 메서드는 개체의 속성을 가져오고 설정합니다.

이점:

속성을 설정하기 전에 새 데이터가 유효한지 확인할 수 있습니다

.

속성에서 가져오거나 설정하는 데이터에 대해 작업을 수행할 수 있습니다.

저장하고 검색할 수 있는 속성을 제어할 수 있습니다.

Setter가 사용되는 방법을 보여주는 예는 다음과 같습니다.

let person = {
    _name: 'Johnson Ogwuru',
    _age: 137,

    set age(newage){
      if(typeof newage === 'number'){
           this._age = newage;
            console.log('valid input')
      }
      else{
           console.log ('Invalid input');
      }
    }

  };

속성 이름 앞에 밑줄_을 붙였습니다. 개발자는 밑줄을 사용하여 속성이나 값을 다른 코드로 직접 수정해서는 안 됨을 나타냅니다. 여기서 setter는 유효한 값만 특정 속성에 추가되도록 합니다. 여기서 유효성은 값이 숫자여야 하지만 이 속성에 문자열을 추가하려고 하면 어떻게 됩니까? 코드 아래에 이 줄을 추가하면 어떤 일이 일어나는지 봅시다.

  person.age = 'Thirty-nine';//returns invalid input

  console.log(person._age);

위에서 우리는 응용 프로그램을 실행할 때 콘솔 '잘못된 값'에 로그인했으며 age 속성 값이 변경되지 않았음을 확인했습니다. 하지만 이제 올바른 값으로 age 매개변수를 수정해 보는 것은 어떻습니까? 무슨 일이 일어나는지 보자. 이전 코드의 문자열을 원하는 숫자로 변경한다.

   person.age = 'Thirty-nine';//returns invalid input

   console.log(person._age);

위의 이미지에서 우리의 값이 유효한 것으로 승인되었으며 age 속성 값도 성공적으로 수정되었습니다. 그게 다야 Setters .

Getter는 개체 내부의 속성 값을 가져오는 데 사용됩니다. 이전 예제에 getter 메서드를 추가하면 다음과 같은 결과가 나타납니다.

let person = {
    _name: 'Johnson Ogwuru',
    _age: 137,

    set age(newage){
      if(typeof newage === 'number'){
        this._age = newage;
        console.log('valid input')
      }
      else{
        return 'Invalid input';
      }
    },

    get age(){
      console.log(`${this._name} is ${this._age} old`);
      return this._age
    }

  };

  person.age = 'Thirty-nine';
  person.age = 39;
  console.log(person.age);

우리가 가진 위의 코드를 실행하십시오.



요약해서 말하자면:Getter 및 Setter 메서드를 사용하면 속성 값에 액세스하거나 설정하기 전에 데이터를 처리할 수 있습니다.

다음 게시물에서 Es6 클래스에서 setter 및 getter 메서드를 사용하는 방법을 살펴보겠습니다. ㅋㅋㅋ