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. Ubuntu下的Apache、Mysql、PHP环境搭建

    由于刚学习Linux,选择了界面比较友好的Ubuntu进行研究.命令行+可视化对于初学者来说组合还是比较不错的,图形界面作为命令行的一个过渡能比较直观的看到效果.在应用中学习是一个比较好的办法,我就是 ...

  2. Map 遍历取值及jstl的取值

    Map 遍历取值及jstl的取值 学习了:http://blog.csdn.net/yanjiaye520/article/details/17354239 1.Java map的便利取值 Java代 ...

  3. solaris x86安装ORACLE 11.2.0.3软件时因SWAP不足报错: INFO: ld: fatal: mmap anon failed

    1.ORACLE软件安装到86%时报错,图忘截了.日志例如以下: /oracle/u01/app/oracle/product/11.2.0/ INFO: db_1/lib/sysliblist` - ...

  4. 详解Dialog(二)——有关列表的构建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 前言:这段时间真是忙啊忙啊忙,元旦三天假加了两天班,已经连续六周只放一天了,天天加班到十点多,真是有一口血吐在屏幕上的感觉了,博 ...

  5. motion程序的移植和安装【转】

    本文转载自:http://blog.csdn.net/guozhiyuan20095318/article/details/7310486 motion是一个开源的用于移动图像监控的程序.我在做博创杯 ...

  6. global cache cr request

    当一个进程访问需要一个或者多个块时,它会首先检查自己的CACHE是否存在该块,如果发现没有,就会先通过global cache赋予这些块 共享访问的权限,然后再访问.假如,通过global cache ...

  7. JS 中构造函数和普通函数的区别(详)

    1.构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写 2.构造函数和普通函数的区别在于:调用方式不一样.作用也不一样(构造函数用来新建实例对象) 3.调用方式不一样. 普通 ...

  8. Python金融量化

    Python股票数据分析 最近在学习基于python的股票数据分析,其中主要用到了tushare和seaborn.tushare是一款财经类数据接口包,国内的股票数据还是比较全的 官网地址:http: ...

  9. BZOJ 2659 数学

    思路: 一开始以为是真·欧几里德 a,b来回消 (其实用不了那么麻烦) 我们发现 这是一个矩形 求一下整点数 完了.. 要特判 p=q的情况 //By SiriusRen #include <c ...

  10. 关于FastIo

    由于你的驱动将要绑定到文件系统驱动的上边,文件系统除了处理正常的IRP 之外,还要处理所谓的FastIo.FastIo是Cache Manager 调用所引发的一种没有irp 的请求.换句话说,除了正 ...