zoukankan      html  css  js  c++  java
  • 了解 object.defineProperty 的基本使用方法(数据双向绑定的底层原理)

            

     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 这两个属性会报错!!
     
  • 相关阅读:
    Django REST framework+Vue 打造生鲜电商项目(笔记三)
    「数据结构与算法之链表(Python)」(四)
    微服务的注册中心
    git学习(十一) idea git pull 解决冲突
    git学习(十) idea git reset 操作
    git学习(九) idea git stash操作
    git学习(八) git stash操作
    git 学习笔记
    git学习(五) git diff操作
    git:Your branch and 'origin/master' have diverged
  • 原文地址:https://www.cnblogs.com/h1457883884/p/10557165.html
Copyright © 2011-2022 走看看