JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.
- 青灯夜游앞으로
- 2019-11-29 14:39:242800검색
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 |
|---|---|---|---|---|
 |
 |
 |  |
 |
9.0+ |
지원 |
Support |
Support |
Support |
이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!
위 내용은 JavaScript 개체 접근자(Getter 및 Setter)에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!