【JS】数据双向绑定原理

Moon里

已于 2024-04-03 11:12:55 修改

阅读量460

点赞数 10

分类专栏： JS 文章标签： javascript 前端 vue.js

于 2024-03-24 17:00:23 首次发布

本文链接：https://blog.csdn.net/qq_57567877/article/details/136990681

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

数据双向绑定原理

<body>
	<div id="demo"></div>
	<input type="text" id="inp">

<script>
	let obj2={};
	let demo=document.querySelector("#demo")
	let inp=document.querySelector("#inp")

	Object.defineProperty(obj2,"name",{
		get:function () {
			return ;
		},
		set:function (newVal) {
			inp.value=newVal;
			demo.innerHTML=newVal;
		}
	})

	inp.addEventListener("input",function (e) {
		obj2.name=e.target.value;
	})

	obj2.name="lmy";


/*
	双向数据绑定原理：Object.defineProperty()，会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回该对象

		语法：
			Object.defineProperty(obj,prop,descriptor)

			参数：
				obj：要定义属性的对象
				prop：要定义的属性名称
				descriptor：描述符，通常设置为一个对象，默认包含一些属性和方法
							{
								configurable:false（默认）
								enumerable:false（默认）
								value:undefined（默认）
								writable:false（默认）

								get:undefined（默认），可选
								set:undefined（默认），可选
							}
*/


	//writable（可改写）
	const object1={};
	// object1.name="lmy"（从前的添加属性方式）
	Object.defineProperty(object1,"property1",{
		value:42,
		writable:false, //false时，value不能被赋值
	})

	console.log(object1.property1); //42
	object1.property1=72; //尝试重新赋值
	console.log(object1.property1); //赋值不成功



	//enumerable（可枚举）
	const object2={};
	Object.defineProperty(object2,"property2",{
		value:42,
		writable:true,
		enumerable:false, //false时，属性不可枚举
	})

	console.log(object2)
	console.log(object2.property2)
	let obj={
		name:"月月"
	}

	for(let i in object2){
		//这个属性是否允许被找出来
		console.log(i,object2[i])
	}



	//get、set（使用get和set时不能同时使用value或者writable会报错）
	const object3={};
	Object.defineProperty(object3,"property3",{
		get:function () {
			console.log("感应到正在获取属性property3")
		},
		set:function () {
			console.log("感应到正在设置属性property3")
		}
	})

	object3.property3=33;
	let val=object3.property3;


</script>

Moon里

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【JS】数据双向绑定原理

双向数据绑定原理：Object.defineProperty()，会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回该对象。//get、set（使用get和set时不能同时使用value或者writable会报错）// object1.name="lmy"（从前的添加属性方式）set:undefined（默认），可选。writable:false（默认）//false时，value不能被赋值。//enumerable（可枚举）//writable（可改写）//false时，属性不可枚举。
复制链接

扫一扫

专栏目录