关于Object.defineProperty()

最新推荐文章于 2024-01-17 15:29:23 发布

小李想瘦

最新推荐文章于 2024-01-17 15:29:23 发布

阅读量174

点赞数 2

分类专栏： vue 文章标签： javascript 前端

李耀书要瘦

本文链接：https://blog.csdn.net/weixin_49320962/article/details/115978902

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、什么是`Object.defineProperty()`

是vue2.0的基础语法，利用Object.defineProperty()能够实现数据的双向绑定

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

2、语法

Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需，目标属性所拥有的的特性

3、描述符

对象中存在数据描述符和存取描述符，这两中属性描述符。

数据描述符是一个具有值的属性，该值是可写的，也可以是不写的。
存取描述符是由geeter和setter函数描述的属性

数据描述符：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认是undefined

    var user = {};
    // 1、
    Object.defineProperty(user, "name", {
        value: '奔跑的蜗牛'
    })
    console.log(user);//{name: "奔跑的蜗牛"}
    //2、
       Object.defineProperty(user, "name", {
        value: {
            name1: '奔跑的蜗牛'
        }
    })
    console.log(user); //{name: {name1: "奔跑的蜗牛"}}

confirgurable：

如果该属性的confirgurable的键值为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。

默认是false

    // 当confirgurable为false时
    var user = {
        name: "奔跑的蜗牛",
        age: 25
    };
    Object.defineProperty(user, "sex", {
        value: "男",
        configurable: false
    })
    // //删除一下
    delete user.sex;
    console.log(user); //{name: "奔跑的蜗牛", age: 25, sex: "男"}

   // 当confirgurable为true时
    var user = {
        name: "奔跑的蜗牛",
        age: 25
    };
    Object.defineProperty(user, "sex", {
        value: "男",
        configurable: false
    })
    // //删除一下
    delete user.sex;
    console.log(user); //{name: "奔跑的蜗牛", age: 25,}

writable

当该属性的writable键值为true是，属性的值，也就是上面的value，才会被赋值运算符所改变

默认值是false

 // 当writable为false时
    var user = {
        name: "奔跑的蜗牛",
        age: 25
    };
    Object.defineProperty(user, "sex", {
        value: "男",
        writable: false
    })
    // 修改，重写一下
   user.sex='女'
    console.log(user); //{name: "奔跑的蜗牛", age: 25}

   // 当writable为true时
    var user = {
        name: "奔跑的蜗牛",
        age: 25
    };
    Object.defineProperty(user, "sex", {
        value: "男",
        writable: true
    })
     // 修改，重写一下
     user.sex='女'
    console.log(user); //{name: "奔跑的蜗牛", age: 25, sex:'女'}

enumerable

如果该属性的enumerable键值为true时，该属性才会出现在对象的可枚举属性中

额、首先什么是可枚举属性

枚举指对象的属性是否可以遍历出来，简单点说就是是否可以被列举出来。可枚举性决定了这个属性能否被for…in查找遍历到。
js中基本包装类型的原型属性是不可枚举的

   var user = {
        name: "奔跑的蜗牛",
        age: 25
    };

    //es6
    var keys = Object.keys(user)
    console.log(keys); // ['name','age']
    //es5
    var keys = [];
    for (key in user) {
        keys.push(key);
    }
    console.log(keys); // ['name','age']

其次

    var user = {
        name: "狂奔的蜗牛",
        age: 25
    };
    //定义一个性别 可以被枚举
    Object.defineProperty(user, "sex", {
        value: "男",
        enumerable: false
    })
    //定义一个出生日期 不可以被枚举
    Object.defineProperty(user, "data", {
        value: "1956-05-03",
        enumerable: true
    })
    //es6
    var keys = Object.keys(user)
    console.log(user);// {name: "狂奔的蜗牛", age: 25, data: "1956-05-03", sex: "男"}
    console.log(keys);// ["name", "age", "data"]

存取描述符

get

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。

set

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。

<body>
    <div id="app"></div>
    <input type="text" id="example">
</body>
</html>
<script>
    let test = {}
    Object.defineProperty(test, 'value', {
        get() { // 取值
            return test.val;
        },
        set(Value) { //存值
            test.val = Value;
            document.getElementById('example').value = Value;
        }
    });
    // 监听input框变化
    document.getElementById('example').addEventListener('input', function (event) {
        test.val = event.target.value
        document.getElementById('app').innerText = test.val
    })
    console.log(test);
</script>

注意：

一个属性描述符只能是这两种其中的一种，不能同时写两种

小结：

value: 设置属性的值
writable：值是否可以重写，true|false
enumerable：目标属性是否可以被枚举。true|false
configurable：目标属性是否可以被删除或是否可以再次修改特性 true|false
set: 目标属性设置值的方法
get：目标属性获取值得方法

小李想瘦

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于Object.defineProperty()

1、什么是Object.defineProperty()是vue2.0的基础语法，利用Object.defineProperty()能够实现数据的双向绑定Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。2、语法Object.defineProperty(obj, prop, descriptor)参数说明：obj：必需。目标对象prop：必需。需定义或修改的属性的名字descriptor：必需
复制链接

扫一扫