> 웹 프론트엔드 > JS 튜토리얼 > ES6 자바스크립트의 클래스 가져오기 및 집합 사용 예

ES6 자바스크립트의 클래스 가져오기 및 집합 사용 예

小云云
풀어 주다: 2018-01-04 09:17:53
원래의
12412명이 탐색했습니다.

이 글은 주로 ES6 자바스크립트에서 클래스의 get 및 set 사용법을 소개합니다. 구체적인 예를 바탕으로 클래스의 get 및 set 키워드 사용법을 분석한 내용이므로 모두에게 도움이 되기를 바랍니다. .

ES5와 마찬가지로 클래스 내에서 get 및 set 키워드를 사용하여 저장 기능을 설정하고 특정 속성에 대한 값 함수를 사용하여 속성의 액세스 동작을 가로챌 수 있습니다.


class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'
로그인 후 복사

위 코드에서 prop 속성에는 해당 저장 함수와 값 함수가 있으므로 할당 및 읽기 동작이 사용자 정의됩니다.

저장 함수와 값 함수는 속성의 설명자 개체에 설정됩니다.


class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html");
"get" in descriptor // true
  "set" in descriptor // true
로그인 후 복사

위 코드에서는 html 속성의 설명 객체에 저장 함수와 값 함수가 정의되어 있으며 이는 ES5와 완전히 일치합니다.

관련 권장사항:

get 및 set 함수 사용 방법을 설명하는 예

ES6가 Set 데이터 구조를 사용하여 배열을 작동하는 방법

mysql을 사용할 때 오프셋이 너무 큰 SQL 최적화 예 공유 페이지가 매겨져 있습니다

위 내용은 ES6 자바스크립트의 클래스 가져오기 및 집합 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿