JavaScript中的Object.defineProperty方法

2022-08-16 12:30:09 阅读：194 来源： 互联网

标签：JavaScript false Object defineProperty OBJ true 属性

首先看一下官方的定义：
Object.defineProperty()
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。
语法

Object.defineProperty(obj,prop,descriptor)

对象添加属性---以前的修改添加对象属性的方法 OBJ.parice=500; OBJ.address='北京' console.log(OBJ) 现在可以用 Object.defineProperty();方法来重新定义对象属性 Object.defineProperty(obj,prop,descrioptor)
现在可以用 Object.defineProperty();方法来重新定义对象属性三个属性： value:设置属性值默认为undefined writable:值是否可以重写 true|false 默认为false enumerable:目标属性可以是否被枚举 true|false 默认为false configurable:目标属性可以是否被删除或是否看再次修改特性 true|false 默认为false

var OBJ = {
    name: '',
    age: 23,
    sex: '男',
    college: '北京大学',
    jobs: 'customer'
  }
  // 对象里添加的num的属性且值为999；
  Object.defineProperty(OBJ, 'num', {
    value: 999
  })
  // 修改了对象的age属性，值为100
  Object.defineProperty(OBJ, 'age', {
    value: 100
  })
  Object.defineProperty(OBJ,'age',{
    //不允许修改这个属性的，最后修改属性试试OBJ.age=33;，一直不变的,true可以修改
      writable:true,
  })   // OBJ.age=33;
 Object.defineProperty(OBJ,'address',{
   value:'天津市南开区',
   writable:false,
   enumerable:false  //改属性不允许遍历出来
 })
  Object.defineProperty(OBJ,'color',{
    // value:设置属性值  默认为undefined
    value:'黑色',
    // writable:值是否可以重写 true|false  默认为false
    writable:true,
    // enumerable:目标属性可以是否被枚举 true|false  默认为false
    enumerable:true,
    // configurable:目标属性可以是否被删除或是否看再次修改特性 true|false 默认为false
    configurable:true
  })

  console.log(OBJ)

get
一个给属性提供 getter 的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法。
要注意：在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。

get和set是我们今天要重点讨论的两个方法，先看一下他们的简单实例：

虽然我将a.b的值设置成了1，但是因为我在get方法中始终返回了2，所以a.b的值一直是2。

我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，是不是很熟悉？是的，vue .js的核心思想就是这个

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>test</title> 
 </head> 
 <body> 
 <div id="test">这是一个测试</div> 
 <script> 
 var view = document.getElementById("test"); 
 var data = {}; 
 var i=0; 
 Object.defineProperty(data, "b", { 
 set: function(newValue) { 
 //当data.b的值改变的时候更新＃test的视图 
 view.textContent=newValue; 
 }, 
 get: function() { 
 } 
 }); 
 setInterval(function(){ 
 i++; 
 data["b"] = "data.b的值更新了，我要更新视图"+i; 
 },1000); 
 </script> 
 </body> 
</html>

视图变化

最开始的视图

1秒后的视图

2秒后的视图

使用js实现简单的双向数据绑定

<input type="text" id="aa"></input>
<span id="bb"></span>
var obj={}
Object.definedProperty(obj,"hello",{
   set:function(val){
    document.getElementById("bb").innerHTML=val
    document.getElementById("aa").value=val
  }
});
document.getElementById("aa").onkeyup=function(e){
obj.hello=e.target.value
}
obj.hello=""

标签：JavaScript,false,Object,defineProperty,OBJ,true,属性
来源： https://www.cnblogs.com/mahmud/p/16591150.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript中的Object.defineProperty方法

视图变化