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  这两个属性会报错!!

转载于:https://www.cnblogs.com/h1457883884/p/10557165.html

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

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

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

  2. 小猿圈解析vue数据双向绑定的缺点

    vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...

  3. 数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定

    近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...

  4. vue数据双向绑定的原理

    vue数据双向绑定的原理 一 复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包 当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...

  5. 数据双向绑定_手写 Vue3 数据双向绑定 理解Proxy

    前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...

  6. Vue源码学习(三)——数据双向绑定

    在Vue中我们经常修改数据,然后视图就直接修改了,那么这些究竟是怎么实现的呢? 其实Vue使用了E5的语法Object.defineProperty来实现的数据驱动. 那么Object.defineP ...

  7. vue2数据双向绑定的原理

    vue2的数据双向绑定原理使用的是es5的数据劫持object.defineProperty,如果读取数据就会触发get,修改数据就会触发set,达到数据和视图的响应和更新,但是因为js固有的特性,不 ...

  8. Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

    目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...

  9. Vue数据双向绑定原理(vue2向vue3的过渡)

    众所周知,Vue的两大重要概念: 数据驱动 组件系统 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...

最新文章

  1. es获取最大时间的记录_ES查询一段时间内某一循环时间段的数据
  2. 第十五届全国大学生智能车竞赛各分赛区赛道数量以及比赛系统数量
  3. python macd背离_Python 精简多品种 MACD 趋势策略
  4. JSP中内置对象pageContent的使用
  5. java线程同步的实现_Java并发编程(三) - 实战:线程同步的实现
  6. android studio入门
  7. 正则表达式 6. 存在(或)
  8. Newtonsoft 反序列化字符串
  9. Java基础:继承的综合案例 —— 群主发普通红包
  10. Python 单例模式实现的五种方式
  11. 破解网址_中国目前的破解组织大全
  12. C语言求阶乘尾数零的个数
  13. 软件工程考研笔记整理(三小时速成)(3)
  14. 椭圆机的减肥效果怎么样
  15. 新零售赋能最古老产业 看阿里巴巴的农产品上行布局
  16. 我的世界Java版最大村庄_我的世界:java版完美种子,开局两村庄齐铁套
  17. android把音乐存到sd卡上,如何将音乐文件从原始文件夹保存到SD卡中android
  18. 前景理论、灰靶决策的直觉模糊多属性决策方法及matlab应用
  19. 如何让你开发的游戏赚钱
  20. Ubuntu20.04安装nVidia显卡遇到的各种坑

热门文章

  1. ios捕捉键盘view
  2. ARM GIC-400 寄存器
  3. Python——调用shell命令的三种方法
  4. AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
  5. C/C++面试之算法系列--去除数组中的重复数字
  6. memcached 内存管理 分析(转)
  7. Vue使用vue-cli基于脚手架编写项目_自己编写一个vue基本项目_认识项目结构---vue工作笔记0019
  8. SpringCloud工作笔记058---springBoot项目maven命令打包部署
  9. VS2010 转VS2008
  10. c++ 加载库错误问题解决