zoukankan      html  css  js  c++  java
  • Object 的静态方法之 defineProperties 以及数据劫持效果

    再提一下什么是静态方法:
      静态方法:在类身上的方法,
      动态方法:在实例身上的方法
    Object.defineProperties(obj, props)

    obj:被添加属性的对象
    props:添加或更新的属性对象

    给对象定义属性,
    如果存在该属性,则用新定义的属性更新已存在的属性,
    如果不存在该属性,则添加该属性。

    如果是新添加的属性,一定要设置是否可枚举,不然为false
    enumerable(是否可枚举):默认为false
    writable(是否可写):默认为false
    configurable:是否可删除delete

    Object.defineProperty()
    在对象上定义新属性,或修改对象现有属性,并返回该对象。

    Object.defineProperty(obj, 属性名字, {设置属性})

    例子1:
     1      let obj = {
     2          name:'xx',
     3          num:0
     4      };
     5      Object.defineProperties(obj,{
     6          name:{
     7              value:'yy',
     8              writable: false,//是否可重新赋值
     9              enumerable: false,//是否可遍历(枚举)
    10              configurable:false//是否可(配置)删除
    11          },
    12          age:{
    13              value:20,
    14              enumerable: true
    15          }
    16      });
    17 
    18      obj.age = 30;
    19      console.log(obj.age);//默认不可写,所以此处依然是  20
    20      delete obj.name;//此处删了一个不可删除的属性
    21      console.log(obj.name);//当然能显示 yy

    例子2:数据劫持 效果

     1      let obj = {
     2          num:4
     3      };
     4      let n = 2;
     5      Object.defineProperty(obj,'num',{
     6          get:function(){   //取 obj.num 属性时会触发 get 方法
     7              /*数据劫持*/
     8              //当你获取这个属性的时候,会调用
     9              n += 2;
    10              return n;
    11          },
           set(val){ //给 obj.num 赋值时会触发 set 方法
             //val 是给 obj.num 赋值时的那个值

           }
    12 }); 13 console.log(obj.num < 5 && obj.num > 5);//true 14 /*num即小于5,又大于,就是应为,第一次判断obj.num时num=(n+=2)=4,符合了第一个条件,此时的n=4。 15 读到第二个判断的时候,再次触发函数,此时n+=之后为6,又符合了第二个判断条件,所以出现了true*/
  • 相关阅读:
    通用权限管理设计 之 数据库结构设计
    jQuery LigerUI 插件介绍及使用之ligerDateEditor
    jQuery LigerUI 插件介绍及使用之ligerTree
    jQuery LigerUI V1.01(包括API和全部源码) 发布
    jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
    jQuery LigerUI V1.1.5 (包括API和全部源码) 发布
    jQuery LigerUI 使用教程表格篇(1)
    jQuery LigerUI V1.0(包括API和全部源码) 发布
    jQuery LigerUI V1.1.0 (包括API和全部源码) 发布
    nginx keepalived
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/9938505.html
Copyright © 2011-2022 走看看