defineProperty详解

charles_paul 发布于2019-08-23 14:30 / 2511人阅读

摘要：搁置了几天我还是决定再次重写下边我们来具体聊聊先从开始说起有个定义属性的功能，应该没几个人用，因为相对于这种方式简直不能再难用。

搁置了几天我还是决定再次重写！

下边我们来具体聊聊先从defineProperty开始说起

defineproperty

//defineproperty 有个定义object属性的功能，应该没几个人用，因为相对于obj.a = 1这种方式简直不能再难用。

//通常我们定义obj属性
let obj = {
      a:1
}
obj.b = 2
obj["c"] = 3
console.log(obj)//{a: 1, b: 2,c: 3}  

Object.defineProperty(obj,"d",{
      value: 4
})

console.log(obj)//{a: 1, b: 2,c: 3,d:4}  //defineProperty可以定义对象属性

//也可以修改
Object.defineProperty(obj,"b",{
      value: 5
})
console.log(obj)//{a: 1, b: 5, c: 3, d: 4}

//对你没看错defineProperty有这个功能，不知可以定义新的属性还可以修改，这么逆天难用的功能为什么还要造出来？说这个有什么用？别急往下看

descriptor详解

defineProperty 接收三个参数

object （必须有操作的对象本身这个很容易理解不传它操作谁？）

propertyname (必须有属性名添加修改属性得有属性名)

descriptor （必须有官方说的我理解不了，我理解的是属性描述
1、简单点就是设置属性的值value，
2、是否可操作属性值 writable，
3、是否可修改配置configurable如果值为false descriptor内的属性都不可操作）
4、是否可枚举enumerable

*descriptor内配置可有可无，value默认undefind，其余默认为false

先做了介绍我们下边来证明下

writable

//栗子还是这个栗子
        let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            writable: false//不可修改
        })

        obj.b = 3
        console.log(obj) //{a: 1, b: 2} 还真是不可以
        //难道是姿势不对？
        Object.defineProperty(obj, "b", {
            value: 3
        })
        console.log(obj)//{a: 1, b: 2} 一样的效果 和姿势无关。

configurable

//configurable 这个比较厉害控制descriptor内属性都不可改变不知道是不是真的

//还是这个栗子

       let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            //writable: false//不可修改
            configurable: false
        })
        obj.b = 5
        console.log(obj)//[1,2]

enumerable

对否可枚举

 let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            //writable: false//不可修改
            //configurable: false
            enumerable: false
        })
        //obj.b = 5
        console.log(Object.keys(obj))//["a"]

接了下来说到重点： set和get这也是vue3.0前observe的实现原理

let obj = {
            a: 1
        }

        let newValue = 45
        Object.defineProperty(obj, "b", {
            get(value) {
                console.log("获取")
                return value
            },
            set(newValue) {
                console.log("设置")
                value = newValue
            }
        })
        obj.b = 6 //设置

        obj.b //获取

知道用法了我们来实践一下

      //html
      
      
      //js
      //类似 vue的data
        let obj = {}

        /*
         *obj      要劫持的对象
         *name     要劫持对象的属性
         *callback 劫持以后的操作
         */
        function watch(obj, name, callback) {
            let value = obj.name
            Object.defineProperty(obj, name, {
                set(msg) {
                    // 触发setter给obj赋值
                    value = msg
                        //执行劫持后的操作
                    callback(value)
                },
                get() {
                    //返回获取属性值
                    return value
                }
            })
        }

        //
        function doSomething(value) {
            document.querySelector("div").innerHTML = value
            document.querySelector("input").value = value
        }
        //监听input变化 
        //可以参考全兼容版：https://segmentfault.com/a/1190000017524278
        document.querySelector("input").addEventListener("input", (e) => {
            obj["msg"] = e.target.value
        })

        watch(obj, "msg", doSomething)

效果：
1、input输入改变div内容

2、改变obj name属性

3、获取改变后的obj属性name

简单的用defineProperty实现了双向绑定

欢迎吐槽！您的点赞是我继续的动力！谢谢

GPU云服务器云服务器 defineProperties defineProperty 判断详解日志详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100710.html

详解Object.defineProperty()

摘要：前言是新增的一个，其作用是给对象的属性增加更多的控制。使用方法提供了一种直接的方式来定义对象属性或者修改已有对象属性。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对函数功能来描述的属性。这也是实现双向数据绑定的关键。前言 Object.defineProperty是ES5新增的一个API，其作用是给对象的属性增加更多的控制。在我们日常的coding中，这个API用到的地...

HtmlCssJs 2019-08-19 18:05 评论0 收藏0
详解JavaScript之神奇的Object.defineProperty

摘要：与当与同时为时，属性不能重新使用定义，严格模式下会报错示例云麒报错当或者为时，属性可以重新使用定义，这一点读者不妨自行测试。摘要： JavaScript有个很神奇的Object.defineProperty()，了解一下？ =与Object.defineProperty 为JavaScript对象新增或者修改属性，有两种不同方式：直接使用=赋值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 评论0 收藏0
JavaScript对象详解

摘要：属性描述符升级打怪必备技能对象有自己的属性和方法，对于我们对象的属性来讲，属性还有自己的属性，又称为属性描述符。这个方法接受三个参数，第一个是指定的对象，第二个是指定的对象参数，第三个当然是要修改的属性描述符了。对象的声明有俩种：字面量通过new一个构造函数Object 两者唯一的区别就是，字面量形式，可以一次赋值多个，通过new Object就得一个一个赋值数据类型 ...

fancyLuo 2019-08-26 12:14 评论0 收藏0
Javascript Object方法详解

摘要：创建对象创建一个普通对象创建一个没有原型的新对象不继承任何属性和方法返回对象中可枚举的自我属性的名称的数组返回对象中所有自我属性的名称的数组属性的特性属性有两种特性数据属性和存取器属性数据属性存取器属性可以获得某个对象特定自有属性的属性描述 Object.create(o) 创建对象 Object.create({x: 1}) //创建一个普通对象 Object.create(null...

sushi 2019-08-21 10:52 评论0 收藏0
【前端基础进阶】JS-Object 功能详解

摘要：可以用来处理数组，但是会把数组视为对象。返回指定对象的原型内部属性的值，即，而非对象的。判断一个对象是否存在于另一个对象的原型链上。该方法返回被冻结的对象。密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。 showImg(https://segmentfault.com/img/bVboKpP?w=796&h=398); Object.assign(targe...

tangr206 2019-08-23 15:25 评论0 收藏0