当前位置:网站首页>setter与getter访问器属性——数据驱动显示
setter与getter访问器属性——数据驱动显示
2022-08-09 22:05:00 【勇敢*牛牛】
setter与getter访问器属性
- Getters和Setters使你可以快速获取或设置一个对象的数据。
- 一个对象拥有两个方法,分别用于获取和设置某个值,你可以用它来隐藏那些不想让外界直接访问的属性。一个对象内,每个变量只能有一个getter或setter。(因此value可以有一个getter和一个setter,但是value绝没有两个getters)
- 删除getter或setter的唯一方法是:delete object[name]。delete可以删除一些常见的属性,getters和setters。
- 1、对数据的访问限制:a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问
- 2、对dom变量进行监听:window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的setter实现则可以实现跨页面的内存异步通信
属性 值
方法 语句块
属性可以用来获取,存储值
方法可以用来执行多个语句块内容,实现某个功能
可以综合属性和方法特征的实现方式就是访问器属性
setter 设置值,并且执行语句块,
set属性必须包含一个参数,且仅有一个参数
使用 set 属性名(value){
}
getter 获取值,并且执行语句块
get必须使用一个无参数的方法,并且必须返回一个值
get 属性名(){
return 属性值
}
set 和 get设置的属性名必须相同
set和get并不能直接存储值,需要借助一个第三个临时变量来存储这个值
并且这个临时变量尽量不暴露出现
如果只设置set,不设置get 则为只写,不可读
如果只设置get,不设置set 则为只读 ,不可写
基本样式:
var obj={
_age:10,
set age(value){
this._age=value;
},
get age(){
return _age;
}
}
setter
每个setter设置一个属性的时,必须有一个参数value,并且,我们需要用一个外部变量来接收这个参数,用于保存。因此setter写法基本固定于
set 属性名(value){
存储用的内部属性名=value;
。。。。当设置这个属性后随之需要的操作
}
s = {
_a:0,
set a(value){
this._a = value
},
get a(){
return this._a
}
}
s.a = 3
console.log(s.a);//3
getter
每个getter是获取一个属性,因此,必须有一个return返回内部存储的值
get 属性名(){
。。。当获取这个属性时需要操作的内容
return 内部存储的这个属性;
}
s = {
_a:0,
set a(value){
this._a = value
},
get a(){
return this._a
}
}
s.a = 3
console.log(s.a);//3
注意
注意setter和getter设置的属性一般是成对出现,对应的相应属性。
如果仅出现set,没有使用get,表示该属性只写,不能获取,如果仅出现get没有出现set,表示该属性只读,不可写值。
最后说明,setter和getter虽然很好用,但是目前ie不支持,使用的时候要注意。
其他写法:
var o = {
a:1,
b:2,
_step:1,
}
Object.defineProperty(o,"_step",{
enumerable:false,
writable:true,
value:1
})
console.log(o);
Object.defineProperty(o,"step",{
get(){
return this._step;
},
set(value){
this._step = value;
}
})
o.step = 10
console.log(o.step);//10
var o = {
}
Object.defineProperties(o,{
_data:{
enumerable:true,//可枚举
configurable:false,//不可删除
writable:true,
value:1
},
updata:{
enumerable:false,
set(value){
this._data = value;
},
get(){
return this._data;
},
}
})
数据驱动显示
var div=document.querySelector("div");
Object.defineProperties(div,{
_x:{
writable:true,
value:0
},
_y:{
writable:true,
value:0
},
x:{
enumerable:true,
set(value){
value=~~value;
this._x=value;
this.style.left=value+"px";
},
get(){
return this._x;
}
},
y:{
enumerable:true,
set(value){
value=~~value;
this._y=value;
this.style.top=value+"px";
},
get(){
return this._y;
}
}
})
setInterval(function(){
div.x++;
div.y++;
},16);
边栏推荐
- Swift 需求 如何防止把view重复添加到win里面
- [WeChat applet development (8)] Summary of audio background music playback problems
- 【微信小程序开发(八)】音频背景音乐播放问题汇总
- Install win7 virtual machine in Vmware and related simple knowledge
- 18-GuliMall 压力测试与性能监控
- 十步以内,用小程序快速生成App!
- leetcode 38. 外观数列
- 【TS技术课堂】时间序列预测
- Analyze the Add() method in Fragment management from the source code
- MySQL——JDBC
猜你喜欢
随机推荐
小程序+自定义插件的关键性
Qt 消息机制和事件
OSS文件上传
PyQt5:入门使用教程
Basic operations of openGauss database (super detailed)
HBuilder X 不能运行到内置终端
R语言ggplot2可视化:使用ggplot2可视化散点图、使用labs参数自定义Y轴的轴标签文本(customize Y axis labels)
p5.js实现的炫酷星体旋转动画
量化交易接口系统有哪些稳定性?
Js fifteen interview questions (with answers)
JuiceFS 在多云存储架构中的应用 | 深势科技分享
leetcode:323. 无向图中连通分量的数目
为什么这么多人都想当产品经理?
阿里云架构师金云龙:基于云XR平台的视觉计算应用部署
Redis
B. Neighbor Grid
OSG笔记:使用setFontResolution设置字体分辨率
月薪5K的运维小白如何成为月薪5W的高级架构师?
R语言patchwork包将多个可视化结果组合起来、使用plot_annotation函数以及tag_level参数将组合图用大写字母进行顺序编码、为组合图的标签添加自定义前缀信息
What is the stability of the quantitative trading interface system?