Java教程

JavaScript中的Object.defineProperty方法

本文主要是介绍JavaScript中的Object.defineProperty方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先看一下官方的定义：
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中的Object.defineProperty方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航