js 에서 getter 와 setter 용법 사례 분석

본 논문 의 사례 는 js 에서 getter 와 setter 의 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
Vue 계산 속성 을 배 울 때"계산 속성 은 기본적으로 getter 만 있 지만 필요 할 때 setter 를 제공 할 수 있 습 니 다"라 는 말 이 있 습 니 다.
getter 와 setter 는 도대체 무엇 입 니까?그래서 나 는 자 료 를 찾 았 다.
Es5 에 서 는 getter 와 setter 부분 을 사용 하여 기본 동작 을 바 꿀 수 있 지만 하나의 속성 에 만 적용 되 며 전체 대상 에 적용 할 수 없습니다.getter 는 속성 값 을 가 져 올 때 호출 되 는 숨겨 진 함수 입 니 다.setter 도 숨겨 진 속성 입 니 다.속성 값 을 설정 할 때 호출 됩 니 다.
예:

var myObject = {
  get a(){
    return 2
  }
  };
  Object.defineProperty(
  myObject,       //    
  "b",          //   
  {  //   
    // b    getter
    get:function(){
    return this.a*2
     },
    //  b            
    enumerable:true
  }
);
console.log(myObject.a) //2
console.log(myObject.b) //4

온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 합 니 다.http://tools.jb51.net/code/HtmlJsRun테스트 결 과 는 다음 과 같 습 니 다.

대상 문자 문법get a( ) { ...... }이 든defineProperty(......)의 명시 적 정의 든 둘 다 대상 에 값 이 포함 되 지 않 는 속성 을 만 듭 니 다.이 속성 에 대한 방문 은 숨겨 진 함 수 를 자동 으로 호출 합 니 다.반환 값 은 속성 방문 의 반환 값 으로 사 용 됩 니 다.(즉myObject.a실행 괄호 를 추가 하지 않 아 도 되 고 vue 에서 계산 속성 은 기본적으로getter있 으 며 호출 계산 속성 은 뒤에'( )'를 추가 하지 않 아 도 된다 는 것 이다.

var obj = {
  // a    getter
  get a(){
  return 2;
  }
};
obj.a = 3;
console.log(obj.a); //2

온라인 HTML/CSS/JavaScript 코드 실행 도구 사용:http://tools.jb51.net/code/HtmlJsRun,테스트 결 과 는 다음 과 같 습 니 다.

a 에 대해 getter 만 정 의 했 기 때문에 a 에 대한 set 작업 은 할당 작업 을 무시 하고 잘못 던 지지 않 습 니 다.그리고 합 법 적 인 setter 가 있 더 라 도 사용자 정의 getter 는 2 만 되 돌아 오기 때문에 set 작업 은 의미 가 없습니다.
자 바스 크 립 트 와 관련 된 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,javascript 대상 입문 강좌,JavaScript 상용 함수 기법 집합,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.