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. [bzoj1708][Usaco2007 Oct]Money奶牛的硬币_动态规划_背包dp

    Money奶牛的硬币 bzoj-1708 Usaco-2007 Oct 题目大意:在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币 ...

  2. Python之Mysql及SQLAlchemy操作总结

    一.Mysql命令总结 1.创建库 create database test1; 2.授权一个用户 grant all privileges on *.* to 'feng'@'%' identifi ...

  3. C++研究之在开发中你可能没有考虑到的两个性能优化

     1:多余的存储引用导致性能减少. 2:利用局部性提高程序性能: 先来说说引用是怎么减少程序性能.个人觉得减少程序性能主要有两个原因,一是数据结构选择不合理,二是多层嵌套循环导致部分代码被多余反复 ...

  4. C++编程-&gt;pair(对组)

    pair 是 一种模版类型.每一个pair 能够存储两个值.这两种值无限制,能够是tuple.vector ,string,struct等等. 首先来看一下pair的函数 初始化.复制等相关操作例如以 ...

  5. RecyclerView的使用(1)之HelloWorld

    原创文章.转载请注明 http://blog.csdn.net/leejizhou/article/details/50670657 RecyclerView是伴随Android 5.0公布的新控件, ...

  6. 【转】selenium自动化测试环境搭建

    转:http://blog.csdn.net/mao1059568684/article/details/17347853 第一步 安装JDK JDk1.7. 下载地址:http://www.orac ...

  7. Linux命令(一)——简单命令

    一.简单命令 1.pwd命令 显示当前工作的全路径名. 2.date命令 显示系统当前的日期和时间. 3.who命令 显示当前已登录到系统的所有用户名,及其终端名和登录到系统的时间. 4.cal命令 ...

  8. LDA解决的问题

    人类是怎么生成文档的呢?LDA的这三位作者在原始论文中给了一个简单的例子.比如假设事先给定了这几个主题:Arts.Budgets.Children.Education,然后通过学习训练,获取每个主题T ...

  9. B1965 [Ahoi2005]SHUFFLE 洗牌 数论

    这个题的规律很好找,就是奇数直接除二,偶数除二加n/2.把这个规律整理一下就是(x * 2) % (n + 1),然后就直接求逆元就行了.一直30分的原因是qpow函数传参的时候用的int,然而变量是 ...

  10. 软件-集成开发环境:IDE

    ylbtech-软件-集成开发环境:IDE 集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器.编译器. ...