Object.defineProperty
给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象

语法:
  Object.defineProperty(参数1,参数2,参数3)
  参数1:目标对象   参数2:要修改或者添加的属性名称   参数3:目标对象属性的一些特征 (是一个对象)
      
      参数1:
        value:属性值
      参数2:
        writable:对象属性值是否可以被修改 true允许 false不允许
      参数3:
        configurable:对象属性是否可以被删除 true允许 false不允许
      参数4:
        enumerable:对象属性是否可被枚举
      参数5:
        get():给一个属性提供getter方法,当访问这个对象的属性值得时候触发该方法
      参数6:
        set():给一个属性提供setter方法,当设置属性值得时候触发该方法
    

 {

代码示列!

   var obj = {sex:"男",nation:"汉"};
Object.defineProperty(obj,"name",{
value :"张三",
writable:false,//属性值不允许被修改
configurable:false,//属性不允许被删除
});
Object.defineProperty(obj,"age",{
value:24,
writable:true,//属性值允许被修改
configurable:true,//属性允许被删除
});
obj.name = "李四";//输出为张三;
delete obj.age;
onsole.log(obj.age);//输出为空
Object.defineProperty(obj,"sex",{
enumerable :false,//对象属性不可被枚举
})
Object.defineProperty(obj,"nation",{
enumerable :true,//对象属性可被枚举
})
console.log(object,keys(obj));//[name,age,nation]

}

  //object.keys()和for in  的区别?
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
sex :"男"
}
var man = new Person();
object.keys(man);//["name","age"];
for(var key in man){
console.log(key);// name,sge sex;
}
//区别:前者返回的是一个数组,数组值为对象自身的属性,不能遍历继承的原型属性;
// 后者遍历的是对象的可枚举的属性,包含自身的属性和可继承的原型属性
 //get()和set();

 var obj = {live: "打球"};
Object.defineProperty(obj,"live",{
get(){
console.log("被访问了");//被访问时触发get方法;
} ,
set(newLive){
console.log("被设置了"+"newLive");//被设置时触发set方法;
}
})
obj.live;//被访问;
obj.live = "健身" // 被设置
//注意 使用set 和get 方法时不能使用value 和 writable 这两个属性会报错!!
 

了解 object.defineProperty 的基本使用方法(数据双向绑定的底层原理)的更多相关文章

  1. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  2. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  3. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

  4. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  5. Vue双向绑定的实现原理系列(一):Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  6. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  7. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  8. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

随机推荐

  1. 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  2. $GPRMC解析

    http://blog.csdn.net/zccst/article/details/4235068 由于$GPRMC比较重要,所以重点讲解: $GPRMC(Recommended Minimum S ...

  3. Spring Boot错误:Unable to start embedded container...的问题解决

    解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...

  4. String 经常用法最优算法实现总结 (一)

    <pre name="code" class="java"><span style="font-family: Arial, Hel ...

  5. 初探BurpSuite

    BurpSuite这套渗透软件.或者已经能够说是渗透攻击平台了吧,玩的好.确实非常方便. 就像是玩英雄联盟的ADC,一開始玩VN.感觉非常难上手,玩多了肯定会爱上VN(啊,貌似提到了什么奇怪的东西). ...

  6. 杭电1879继续畅通project

    继续畅通project Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  7. CF D. Beautiful numbers (数位dp)

    http://codeforces.com/problemset/problem/55/D Beautiful Numbers : 这个数能整除它的全部位上非零整数.问[l,r]之间的Beautifu ...

  8. 深入理解groupByKey、reduceByKey区别——本质就是一个local machine的reduce操作

    下面来看看groupByKey和reduceByKey的区别: val conf = new SparkConf().setAppName("GroupAndReduce").se ...

  9. html5之文件操作

    用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6 ...

  10. docker(部署常见应用):docker部署nginx

    上回说到centos安装docker. 这次用实战,docker部署运行常见的应用. docker常用命令 参看:docker命令大全.这里不做赘述. docker部署nginx 1.docker h ...