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

 {

代码示列!

  1. 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]

}

  1. //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;
    }
    //区别:前者返回的是一个数组,数组值为对象自身的属性,不能遍历继承的原型属性;
    // 后者遍历的是对象的可枚举的属性,包含自身的属性和可继承的原型属性
  2.  
  1. //get()和set();
  2.  
  3. 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. windows 2003一个网卡绑定多个IP地址

    1.打开“网络连接”,选中需要添加多个IP的“本地连接”-->右键-->“属性”: 2.从“常规”中找到“Internet 协议(TCP/IP)属性”: 3.选择手动设置IP地址.网关.掩 ...

  2. wcf--知识点

    WCF创建自托管服务 //自托管 WCF服务 //1.创建宿主 ServiceHost host = new ServiceHost(typeof(TaoBaoWCFServiceContract.T ...

  3. RecyclerView的使用(1)之HelloWorld

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

  4. WPF带cookie get/post请求网页,下载文件,图片,可保持会话状态

    直接写成啦一个MyNet.cs类方便使用 get/post方法请求 //get请求 MyNet.SendRequest("http://www.baidu.com"); //pos ...

  5. 数据结构之---C语言实现共享栈

    所谓共享栈是两个栈在一个顺序的存储空间中.两个栈的栈底各自是存储空间的首尾地址. 如图我们能够将两个栈构造成一个: 如图: 从这里也就能够分析出来,栈1为空时,就是top1等于-1时.而当top2等于 ...

  6. Object对象具体解释(二)之clone

    clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...

  7. 【待解决】maven创建web项目报错

    创建web项目时报错

  8. 安装多个版本号jdk后java -version不改变的问题解决

    1.问题 比方先安装了jdk7后,再安装jdk6,java -version就是显示java1.6,即使把JAVA_HOME和path改动为java7的路径,java -version依旧还是显示6. ...

  9. Linux下叹号!的用法

    在定义包含!的字符串变量时,出现了以下提示错误. 注意:在centos系统下错误,在Fedora系统可以正常运行. 修正方法有以下几种: (1)将整个字符串用单引号引起来. (2)在!后添加空格. ( ...

  10. oc19--继承1

    // // Phone.h // day13 #import <Foundation/Foundation.h> // 被继承的这个类我们称之为父类/ 超类 @interface Phon ...