get/set访问器是属性的特性;
特性只有内部才用,因此在javaScript中不能直接访问他们;
(1)数据属性——包含一个数据值的位置。这个位置可以读入和写入值。
数据属性有描述其行为的四个特性:
[[Configurable]]:是否可配置
[[Enumerable]]:是否可枚举
[[Writable]]:是否可读
[[Value]]: 属性值
(2)访问器属性属性——不包含数据值,包含一个getter和setter函数(这两个函数不是必须的)
访问器属性也有描述其行为的四个特性:
[[Configurable]]:是否可配置
[[Enumerable]]:是否可枚举
[[Get]]:在读取属性时调用的函数,默认是undefined
[[Set]]:在写入属性时调用的函数,默认是undefined
get/set访问器行为特点:
get/set访问器可以不用定义,不定义也可以读写属性值。也可以只定义一个。只定义get,则被描述的属性只可读,不可写。只定义set,则被描述的属性只可写,不可读。
总结
只声明了get pro(){}属性 可读不可写;
只声明 set pro(){}属性可写不可读。
如果都不声明,属性可读可写;
如果都声明就按照,get set 定义的方法,读写;
如果都声明了,但是定义的读写方法不能正确读写,get/set失效。变成默认的可读可写
在prototype里面定义的value属性,定义了get 特性。依然可以控制value属性的读写 。也就是说obj.value访问属性时,会调用get方法,先在对象本身寻找,如果没有,再到prototype寻找,如果都没有才算没有定义,默认的既可读又可写。
get是得到,一般是要返回的,set是设置,不用返回;
如果调用对象内部属性约定的命名方式是 _名称;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>get/set</title>
</head>
<body>
<input id="both" type="text" placeholder="请输入你的出生年,比如1989">
<button id="btn">计算</button>
结果:<p id="text"></p>
</body>
</html>
<script>
var myV = document.getElementById("both");
var btn = document.getElementById("btn");
var age = 18;
var test = {
get age (){
return age;
},
set age (value){
if(value > 100) age= new Date().getFullYear() - value;
else age = value;
}
};
console.log(test.age);//18 btn.onclick = function(){
test.age = myV.value;
console.log("age值:"+test.age); cart.wheels = myV.value;
console.log("wheels值:"+cart.wheels);
} const cart = {
_wheels:4,
// get wheels(){
// return this._wheels;
// },
// set wheels(value){
// if(value < this._wheels){
// throw new Error('小了');
// }
// this._wheels = value;
// }
get wheels (){
return this._wheels;
},
set wheels (value){
if(value > 100) this._wheels= new Date().getFullYear() - value;
else this._wheels = value;
}
}
console.log(cart);//{_wheels: 4}
console.log(cart.wheels);//4 </script>