Object.defineProperty 基本使用

最新推荐文章于 2023-11-08 18:03:21 发布

敢问

最新推荐文章于 2023-11-08 18:03:21 发布

阅读量575

点赞数 1

分类专栏： VUE JS 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_41040445/article/details/113666010

版权

VUE 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

Object.defineProperty 该方法是在一个对象上定义一个新的属性，或者修改已有的属性，并返回这个对象

Object.defineProperty 方法的触发（vue 数据的双向绑定的本机理就是通过object.defineProperty()和发布-订阅模式（观察者模式）进行实现的）

创建input 和 span元素

<body>
    <input type="text" id="input">
    <span id="text"></span>
</body>

获取input 和 span

var inputVal = document.getElementById("input")
var text = document.getElementById("text")

设置一个对象 obj 为监听对象，定义或者修改的的属性内容的对象为obj

 var obj = {}

给obj设置方法

<script>
    var inputVal = document.getElementById("input")
    var text = document.getElementById("text")
    var obj = {}
    Object.defineProperty(obj,'hello',{
// set指的是设置的意思，该方法指的是当obj.hello属性被触发时，会执行set方法，该方法返回被触发的内容，可以设置相应的内容
        set:function(value){
            console.log('我是set方法')
// 在触发set方法的时候我们可以将input输入框和span的value设置得到的value值
            inputVal.value = value
            text.innerHTML = value
            name = value
        }
    })
    document.addEventListener('keyup',function (e) {
        obj.hello = e.target.value
        console.log(obj.hello)
    })
</script>

如果想要触发get方法，必须要对obj.hello属性进行设置

 document.addEventListener('keyup',function (e) {
 // 设置hello属性，该属性会触发set方法
        obj.hello = e.target.value
 // 获取hello属性，该属性会触发get方法
        console.log(obj.hello)
    })

set方法

<script>
    var inputVal = document.getElementById("input")
    var text = document.getElementById("text")
    var obj = {}
    Object.defineProperty(obj,'hello',{
 // get指的是设置的意思，该方法指的是当obj.hello属性被触发时候，get方法被执行
        get : function () {  
            console.log('get方法')
        },
        // set指的是设置的意思，该方法指的是当obj.hello属性被触发时，会执行set方法，该方法返回被触发的内容，可以设置相应的内容
        set:function(value){
            console.log("set 方法")
            inputVal.value = value
            text.innerHTML = value
            name = value
        }
    })
    document.addEventListener('keyup',function (e) {
        obj.hello = e.target.value
        console.log(obj.hello)
    })
</script>

此时，如果现在输入get方法的值是undefined，因为此时的get方法没有return

需要设置值的话，必须在get方法中有return结果

此时我们修改了一个get方法的获取结果

<script>
    var inputVal = document.getElementById("input")
    var text = document.getElementById("text")
    var obj = {}
    var name = ''
    Object.defineProperty(obj,'hello',{
        get : function () {  
            console.log('get 方法')
            return name
            
        },
        // set指的是设置的意思，该方法指的是当obj.hello属性被触发时，会执行set方法，该方法返回被触发的内容，可以设置相应的内容
        set:function(value){
            console.log("set 方法")
            inputVal.value = value
            text.innerHTML = value
            name = value
        }
    })
    document.addEventListener('keyup',function (e) {
        obj.hello = e.target.value
        console.log(obj.hello)
    })
</script>

Object.defineProperty参数的含义Object.defineProperty(obj,prop,des)

obj：需要定义的属性对象

prop: 需要被定义或者修改的属性名

des: 需要被定义或者修改的属性描述是一个对象

Object.defineProperty的其它参数

value:指的是配置相关对象属性的值，可以是任意类型

    <script>
        var obj = {}
        Object.defineProperty(obj,'name',{
            value:'我是张三'
        })
        console.log(obj)
    </script>

configurable:布尔值，如果为true的时候该属性能够被改变，也能被删除，默认为false

    <script>
        var obj = {}
        Object.defineProperty(obj, 'hello', {
            //configurable: true,
            value: '你好我是张三'
        })
        console.log(obj)
        //修改
        Object.defineProperty(obj, 'hello', {
            //configurable: true,
            //writable: true,
            value: '你好我是李四'
        })
        console.log(obj)
        //删除
        delete obj.hello
        console.log(obj)
    </script>

不设置或者设置为false的时候不能就行修改和删除

<script>
    var obj = {}
    Object.defineProperty(obj, 'hello', {
        configurable: true,
        value: '你好我是张三'
    })
    console.log(obj)
    //修改
    Object.defineProperty(obj, 'hello', {
        //configurable: true,
        //writable: true,
        value: '你好我是李四'
    })
    console.log(obj)
    //删除
    delete obj.hello
    console.log(obj)
</script>

enumerable 布尔值，该属性为true的时候可以出现在对象的枚举值当中，默认为false

<script>
    var obj = {}
    Object.defineProperty(obj, 'name', {
        enumerable: true,
        value: '你好我是张三'
    })
    Object.defineProperty(obj, 'age', {
        //enumerable: true,
        value: '30了'
    })
    Object.defineProperty(obj, 'sex', {
        enumerable: true,
        value: '男'
    })
    console.log(Object.keys(obj))
</script>

writable：布尔值，如果为true的时候该属性才能通过赋值运算法进行改变（=），默认为false

<script>
    var obj = {}
    Object.defineProperty(obj, 'name', {
        enumerable: true,
        value: '你好我是张三'
    })
    Object.defineProperty(obj, 'age', {
        enumerable: true,
        writable: true,
        value: '30了'
    })
    Object.defineProperty(obj, 'sex', {
        enumerable: true,
        value: '男'
    })
    obj.age = '35岁'
    obj.sex = '女'
    console.log(obj)
</script>

可以改变 age 无法改变sex

敢问

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Object.defineProperty 基本使用

Object.defineProperty 该方法是在一个对象上定义一个新的属性，或者修改已有的属性，并返回这个对象Object.defineProperty 方法的触发创建input 和 span元素<body> <input type="text" id="input"> <span id="text"></span></body>获取input 和 spanvar inputVal = docum
复制链接

扫一扫

专栏目录