Js-set和get访问器属性
Ⅰ- 壹 - set和get访问器属性
一 什么是set和get
-
Getters和Setters使你可以快速获取或设置一个对象的数据。
-
一个对象拥有两个方法，分别用于获取和设置某个值，
-
你可以用它来隐藏那些不想让外界直接访问的属性。一个对象内，每个变量只能有一个getter或setter。（因此value可以有一个getter和一个setter，但是value绝没有两个getters）
删除getter或setter的唯一方法是：delete object[name]。delete可以删除一些常见的属性，getters和setters。 -
和变量属性同等重要。存储值还能存储语句块，介于属性和方法的存在
set和get缺陷
只能处理值字符串，引用类型的类型不可以处理，同一引用地址，会认为值相同，不会发生改变
二 get和set的使用方法：
-
get和set是方法，只有一个参数而且必须有一个，因为是方法，所以可以进行判断，
-
get一般是要返回的；不允许有参数，而set是设置，不用返回
-
如果调用对象内部的属性约定的命名方式是变量名前加_ 临时变量. 一个临时变量有set和get
-
如果仅有set,没有get，这个属性就是一个只写属性，不可以获取
-
如果仅有get没有set，这个属性就是一个只读属性，不可以修改
var p={
_age:18,
get age(){
return this._age;
},
set age(val){
this._age=val;
}
}
p.age; // 18
p.age=20; // 20
p.age; // 20
var obj = {
_c: 0,
b: function () {
},
// set有且仅有一个参数
set c(value) {
//对value进行操作
this._c = value;
},
// 不允许有任何参数
get c() {
return this._c;
},
};
//使用
obj.c = 44
console.log(obj.c)
三 在ES6中当做常量使用 ，在ES6中没有const这个变量，可以通过get
class Box{
//static const EVENT_ ID="Event_ Id";
constructor(){
}
static get EVENT_ ID(){
return” EVENT_ID" ;
}
}
cosnole.log(box.EVENT_ID);//只能获取不能设置
四 document中set个get,使用Object.definePreoperty(),
-
configurable，是否可删除属性并且是否可以重定义该属性的属性描述对象，默认值是false；
-
enumerable，是否可以遍历，是否可枚举（该对象在使用for in遍历时，不可枚举属性是不能被遍历，也不能被Object.assign()复制），默认值是false；
-
writable，是否可写，是否能够修改值，默认值是false；
-
value，设置值；
-
set:function(){}:设置属性 和value冲突 只能存在一个
-
get:function(){}:获取属性，和writable冲突 只能存在一个
var div = document.querySelector("div");
cosnole.log(div._width=0;)
Object.defineProperty(div,"width",{
enumerable:true,
set:function(_value){
this.style.width=_value.toString().indexOf("px")>-1 ? _value :_value+"px";
this._width=_value;
},
get:function(){
return this._width;
}
});
Ⅱ - 贰 - 案例
一改变背景颜色和高度动画
var div = document.querySelector("div");
Object.defineProperties(div, {
_width: {
writable: true,
value: 0,
},
_height: {
writable: true,
value: 0,
},
_bgColor: {
writable: true,
value: 0,
},
width: {
enumerable: true,
set: function (_value) {
this.style.width =
_value.toString().indexOf("px") > -1 ? _value : _value + "px";
this._width = _value;
},
get: function () {
return this._width;
},
},
height: {
enumerable: true,
set: function (_value) {
this.style.height =
_value.toString().indexOf("px") > -1 ? _value : _value + "px";
this._height = _value;
},
get: function () {
return this._height;
},
},
bgColor: {
enumerable: true,
set: function (_value) {
this.style.backgroundColor =
typeof _value === "string" ?
_value :
"#" + _value.toString(16).padStart(6, "0");
this._bgColor = _value;
},
get: function () {
return this._bgColor;
},
},
});
//设置间隔器让宽高背景进行改变
setInterval(function(){
div.width++;
div.height++;
div.bgColor++;
},100)
二 对象比较
class Box {
_data = {
a: 1,
b: 2,
c: {
a: 2,
b: 5,
d: {
a: 1,
b: 2,
c: [1, 2, 3],
},
},
};
constructor() {
}
set data(value) {
console.log(this.compareData(value, this._data))
if(this.compareData(value, this._data))return;
this.render();
this._data = value;
}
get data() {
return this._data;
}
render() {
}
compareData(target, source) {
for (var prop in target) {
if (typeof target[prop] === "object" && target[prop] !== null) {
return this.compareData(target[prop], source[prop]);
} else {
if (target[prop] !== source[prop]) return false;
}
}
return true;
}
}
let b = new Box();
b.data = {
a: 1,
b: 2,
c: {
a: 2,
b: 5,
d: {
a: 1,
b: 2,
c: [1, 2, 3],
},
},
};