• Object.defineProperty方法


    vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器

    Object.defineProperty() 
    方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象

    1 // 语法:
    2 /*
    3  * @param: obj:需要定义属性的对象; 
    4  *         prop:需要定义或修改的属性;
    5  *         descriptor:将被定义或修改属性的描述符
    6 */
    7 Object.defineProperty(obj,prop,descriptor)

    对象里目前存在的属性描述符主要有两种形式: 数据描述符和存取描述符.

    数据描述符: 拥有可写或不可写值的属性* 

    可选键值: 
    configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除 
    enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false 
    writable: 当且仅当该属性的值为true时,该属性才能被赋值运算符改变, 默认为false。 
    value: 该属性对应的值,可以是任意有效的javascript的值(数值,对象,函数等),默认为undefined

    存取描述符: 由一对getter-setter函数功能来描述的属性*

    可选键值: 
    configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除 
    enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false 
    get: 给属性提供getter的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该 方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined 
    set:设置属性值的方法, 如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法

    note:两者不能同时定义, 否则报错==

    实例:

     1 var a = {};
     2 Object.defineProperty(a, 'b', {
     3     set: function(newValue) {
     4         console.log('赋值操作, 赋值' + newValue);
     5     },
     6     get: function() {
     7         console.log('取值操作');
     8         return 2;
     9     }
    10 });
    11 a.b = 1;    // 赋值操作,赋值1
    12 a.b;       // 取值操作2

    Object对象有一个freeze的方法,用于实现对象属性和方法的不可更改

    1 // 使用方法:
    2 const arr = [1,2,3,4];
    3 Object.freeze(arr);  // 变量arr不可更改
    4 arr.push(5);  // 报错:不能添加属性

    Object.definePropperty也可以实现规定变量的不可更改

    1 const obj = { key: 'chris', vlaue: 'person' };
    2 Object.defineProperty(obj, 'key', {
    3     configurable: false,   // 不可删除
    4     writable: false, // 不可写
    5 });
    
    
  • 相关阅读:
    【PyQt5-Qt Designer】对话框系列
    【PyQt5-Qt Designer】界面布局
    【PyQt5-Qt Designer】PyQt5+eric6 安装和配置
    【PyQt5-Qt Designer】QMessageBox 弹出框总结
    【PyQt5-Qt Designer】鼠标+键盘事件
    【PyQt5-Qt Designer】猜数字(小项目)
    【PyQt5-Qt Designer】浅谈关闭窗口
    【PyQt5-Qt Designer】窗口操作
    【python基础】利用pandas处理Excel数据
    【python基础】os.path模块常用方法详解
  • 原文地址:https://www.cnblogs.com/jsonYoung/p/9625847.html
Copyright © 2020-2023  润新知