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. java extend 和 implements 的区别

    1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extends 是继承某个类, 继承之后可以使用父类的方法, 也可以重 ...

  2. C#--委托的同步,异步,回调函数

    原文地址 同步调用 委托的Invoke方法用来进行同步调用.同步调用也可以叫阻塞调用,它将阻塞当前线程,然后执行调用,调用完毕后再继续向下进行. using System; using System. ...

  3. [Javascript Crocks] Recover from a Nothing with the `coalesce` Method

    The alt method allows us to recover from a nothing with a default Maybe, but sometimes our recovery ...

  4. 阿里巴巴集团2014年校园招聘系统project师北京笔试题

    第一部分 单选题(前10题,每题2分;后10题,每题3分;共50分.选对得满分,选错倒扣一分,不选得0分.) 1.字符串"alibaba"有 个不同的排列. A. 5040 B. ...

  5. TI C66x DSP 系统events及其应用 - 5.6(INTMUX)

    系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...

  6. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

  7. 网页设计——Dreamweaver

    在看ASP.NET视频时,讲到了一款编写HTML代码的软件--Dreamweaver.它是一款专门进行网页设置的软件.通过它能够设计出多彩的界面,相对于vs中自带的设计方式来说,他不须要知道太多的技术 ...

  8. Linux下开启vim高亮

    默认是不高亮的. [root@local ~]# vi ~/.vimrc 没有则新建这个文件. 或者修改 [root@local vim74]# vi /etc/vimrc 添加一行. syntax ...

  9. redis安装及连接(入门)

    安装 环境:本地win10,虚拟机里ubuntu, 在ubuntu安装redis服务,本地java连接. 本教程使用的最新文档版本为 4.0.9,下载并安装: 安装步骤: 1,进入ubuntu合适目录 ...

  10. 最详细的CentOS 6与7对比(一):常见设置对比

    本主题将从3个角度进行对比 常见设置(CentOS 6 vs CentOS 7) 服务管理(Sysvinit vs Upstart vs Systemd) 性能测试(cpu/mem/io/oltp) ...