js中的存取器及双向数据绑定的实现

最新推荐文章于 2022-12-14 11:25:08 发布

吴莉

最新推荐文章于 2022-12-14 11:25:08 发布

阅读量177

点赞数

分类专栏： es6 文章标签： js存取器 vue 双向数据绑定

本文链接：https://blog.csdn.net/kgcwuli/article/details/95596962

版权

es6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当使用存取器描述属性的特性的时候，允许设置get和set属性：

		var obj = {};
		Object.defineProperty(obj,"newKey",{
		    get:function (){} | undefined,
		    set:function (value){} | undefined
		});

es5写法：

		var obj = {};
		var initValue = '张三';
		Object.defineProperty(obj,"name",{
			get:function (){
				//当获取值的时候触发的函数
				return initValue;    
			},
			set:function (value){
				//当设置值的时候触发的函数,设置的新值通过参数value拿到
				initValue = value;
			}
		});
		//设置值
		obj.name = '李四';
		console.log( obj.name ); 
		//注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined

es6写法

		var oo = {
			name : '贤心',
			get sex(){
				return 'man';
			}
		};
		//显然这是不允许的，因为贤心并不希望外界去改变他是男性的事实，所以对于sex只设置了只读功能
		oo.sex = 'woman';
		console.log(oo.sex); //结果依然是man
		
		var oo = {
			name : '贤心',
			get sex(){
				if(this.sexx){
					return this.sexx; 
				}else{
					return 'man'; 
				}
			}, set sex(val){
				this.sexx = val; 
			}
		};
		//噢，他如此包容，乃至于人们改变他的性别，他也接受
		oo.sex = 'woman';
		console.log(oo.sex); //结果woman

应用：实现双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<body>
  手写一个简单双向绑定<br/>
  <input type="text" id="model"><br/>
  <div id="modelText"></div>
</body>
<script>
var user = {};
var defaultName = "狂奔的蜗牛";
 
document.querySelector("#model").value = defaultName;
document.querySelector("#modelText").textContent = defaultName;
 
//定义属性 监控改变
Object.defineProperty(user,"name",{
  get:function(){
    console.log("你是不是来获取值啦");
    return defaultName;
  },
  set:function(newValue){
    console.log("设置新值");
    defaultName = newValue;
    console.log("实现 模型 => 视图");
    document.querySelector("#model").value = newValue;
    document.querySelector("#modelText").textContent = newValue;
  }
})
 
document.querySelector("#model").onkeyup = function(){
	user.name = this.value;
	console.log(user.name)
}
</script>
</html>

吴莉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的存取器及双向数据绑定的实现

当使用存取器描述属性的特性的时候，允许设置get和set属性： var obj = {}; Object.defineProperty(obj,"newKey",{ get:function (){} | undefined, set:function (value){} | undefined });es5写法： var obj = {}; var...
复制链接

扫一扫