찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.

JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.

青灯夜游
青灯夜游앞으로
2019-11-29 14:39:242854검색

JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.

JavaScript 접근자(Getter 및 Setter), ECMAScript 5(2009)에서는 Getter 및 Setter를 도입했습니다. Getter 및 Setter를 사용하면 객체 접근자(계산된 속성)를 정의할 수 있습니다.

【관련 강좌 추천: JavaScript 동영상 튜토리얼】

JavaScript Getter(키워드 가져오기)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2>JavaScript Getters和Setters</h2>

<p> Getters和setter允许您通过方法获取和设置属性。</p>

<p>此示例使用lang属性获取语言属性的值。</p>

<p id="demo"></p>

<script>
    // 新建一个对象。
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "en",
        get lang() {
            return this.language;
        }
    };
    // 使用getter显示来自对象的数据：
    document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

JavaScript Setter(키워드 설정)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Getters和Setters</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p> Getters和setter允许您通过方法获取和设置属性。</p>

<p>此示例使用lang属性设置语言属性的值。</p>

<p id="demo"></p>

<script>
    // Create an object:
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "NO",
        set lang(value) {
            this.language = value;
        }
    };
    // Set a property using set:
    person.lang = "en";
    // Display data from the object:
    document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

JavaScript 기능을 사용하시나요, 아니면 Getter를 사용하시나요?

이 두 예의 차이점은 무엇인가요?

예 1: 

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用方法显示对象的数据：
document.getElementById("demo").innerHTML = person.fullName();

예 2: 

var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

예 1 함수로 fullName에 액세스합니다: person.fullName(). 예제 2에서는 fullName을 person.fullName 속성으로 액세스합니다. 두 번째 예는 더 간단한 구문을 제공합니다.

데이터 품질

JavaScript는 getter 및 setter를 사용할 때 더 나은 데이터 품질을 보장합니다. lang 이 예에서 속성 언어는 속성 값을 대문자로 반환하는 데 사용됩니다. 

// 创建一个对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

lang 이 예에서 속성 언어는 언어 속성에 대문자 값을 저장하는 데 사용됩니다. 

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// 使用setter设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

Getter를 사용하는 이유 그리고 세터?

● 더 간단한 구문을 제공합니다.

● 속성과 메서드가 동일한 구문을 가질 수 있습니다.

● 더 나은 데이터 품질을 보장합니다.

● 뒤에서 작업하는 데 유용합니다. 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p>完美的创建反对象：</p>

<p id="demo"></p>

<script>
    var obj = {
        counter : 0,
        get reset() {
            this.counter = 0;
        },
        get increment() {
            this.counter++;
        },
        get decrement() {
            this.counter--;
        },
        set add(value) {
            this.counter += value;
        },
        set subtract(value) {
            this.counter -= value;
        }
    };
    // Play with the counter:
    obj.reset;
    obj.add = 5;
    obj.subtract = 1;
    obj.increment;
    obj.decrement;
    // Display the counter:
    document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

Object.defineProperty( )

Object.defineProperty() 메소드를 사용하여 Getter 및 Setter를 추가할 수도 있습니다. 

// 定义对象
var obj = {counter : 0};
// 定义 setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

브라우저 지원

Getters 및 Setter는 Internet Explorer 8 이하에서는 지원되지 않습니다.

Internet Explorer Chrome FireFox Safari Opera

JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요. JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요. JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요. JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.
9.0+
지원
Support
Support
Support

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 51cto.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：three.js는 GPU를 사용하여 객체를 선택하고 교차 위치를 계산합니다.다음 기사：three.js는 GPU를 사용하여 객체를 선택하고 교차 위치를 계산합니다.

관련 기사

더보기