Java开发手册 微信商家收款 java 线程池 less types drupal Backbonejs lazyloadjs jq延时 math保留两位小数 mysql学习 python关键字 python文件 python图形界面开发 python基础代码 javaobject java语言基础教程 java集合 java字符串反转 java实现多线程 java将数据写入文件 java正则匹配数字 java遍历list集合 java调用接口 java文件读写 java文件输入输出 心理学与生活txt 狮子狗出装 机械下载 迅雷免费会员号共享 wscript 无限视距 摩斯密码翻译器 小票打印 工程html加密 ps去白底 dnf风神加点 倒计时定时器 php保留两位小数 苹果x怎么用
当前位置: 首页 > 学习教程  > 编程语言

ES5标准中的Object.create() 和 Object.defineProperties()

2020/10/16 18:28:28 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

ES5标准中的Object.create() 和 Object.defineProperties() JohnKeatinghhh ES5标准中的Object.create和Object.defineProperties Object.create(prototye,[description])Object.defineProperties(object,descriptors)Object.create(prototye,[description]) 【作用】&…

ES5标准中的Object.create() 和 Object.defineProperties()

JohnKeatinghhh

ES5标准中的Object.create和Object.defineProperties

  • Object.create(prototye,[description])
  • Object.defineProperties(object,descriptors)

 

Object.create(prototye,[description])

【作用】:以指定对象为原型,创建新的对象
【参数】:

  • prototype: 就是要作为原型的那个对象;
  • description 为新的对象指定新的属性,并对属性进行描述,可用的关键字:
    – value:新属性的值
    – writable: 是否可以修改,默认false
    – configurable: 是否可以删除,默认false
    – enumerable: 当前属性是否可以被for… in… 枚举到,默认false
    – get:属于accessors的一种,值是获取当前属性指的回调函数 (注意accessors与 valuewritable这两个冲突,逻辑上也很好理解)
    – set:属于accessors的一种,值是修改当前属性值触发的回调函数,并且实参即为修改后的值 (注意accessors与 valuewritable这两个冲突,逻辑上也很好理解)

【栗子】:

        var obj = {
            country : 'CN',
            race : 'HUM'
        }
        var new_obj = Object.create(obj,{// 最外层对象,键是要创建的新属性名称,值是一个对象,包括了value,writable等属性
            name:{
                value:'蔡徐坤',
                enumerable:true
            },
            gender:{
                value:'女',
                writable:true, //可以修改性别
                configurable:true, //可以不要性别
                enumerable:false //不要暴露自己的性别
            }
        })
        new_obj.name = 'ikun' //名字改不了
        new_obj.gender = '男' //厉不厉害你鲲哥
        for(var i in new_obj){
            console.log(new_obj[i])
        }

上面这个例子以我国著名音乐家、舞蹈家、篮球运动员蔡徐坤先生为例。

首先设置一个obj父类,包含了country属性和race属性,然后通过调用Object方法,以obj为原型构造一个新的对象new_obj,并定义两个新的属性:namegender,而 这两个属性也分别是两个对象,对象中包括了一些性质:
其中namewritableconfigurable默认是false,颇有行不更名坐不改姓的高风亮节;
genderwritableconfigurable则设为true,展现了她艺术人格中灵活多变的一面。

定义完new_obj之后,尝试修改姓名为'ikun',由于她行不更名坐不改姓的艺术风骨,这个改动失败了。
new_obj.gender = '男'则展现了性别的灵活多变,令人目不暇接。

最后通过for枚举new_obj的属性,会打印出name,countryage,唯独将gender神秘的一面留给了大家。(因为enumerable是false)

Object.defineProperties(object,descriptors)

【作用】:为指定对象扩展多个属性
【参数】:

  • object: 要扩展属性的对象;
  • descriptors 要扩展的属性,并对属性进行描述,可用的关键字:
    – value:新属性的值
    – writable: 是否可以修改,默认false
    – configurable: 是否可以删除,默认false
    – enumerable: 当前属性是否可以被for… in… 枚举到,默认false
    – get:属于accessors的一种,值是获取当前属性指的回调函数 (注意 accessors与 valuewritable这两个冲突,逻辑上也很好理解)
    – set:属于accessors的一种,值是修改当前属性值触发的回调函数,并且实参即为修改后的值 (注意 accessors与 valuewritable这两个冲突,逻辑上也很好理解)

【栗子】:

由于上一个例子演示了value和writable,这个例子就演示下get 和 set。
value/writable和 get/set是冲突的两组属性。
如果属性A设置了value/writable,那么这个属性A的属性可以直接通过obj.A访问,但是这样定义属性会有一个不方便的地方,那就是需要用到对象中其他属性的时候:
假设这样一个情景,一个对象的fullName属性需要通过firstNamelastName拼接而成,那么在定义的时候可能会写出这样的错误代码:

        var obj3 = {
            firstName : 'kobe',
            lastName : 'bryant',
            fullName : this.firstName + this.lastName
        }
        console.log(obj3)

最后的结果,obj3的fullName属性是NaN,为什么?
因为定义这个对象的时候,this指向的是window作用域,window里自然是没有firstNamelastName的,而我们用Object.defineProperties则可以解决这个问题:

        var obj2 = {
            firstName: 'kobe',
            lastName: 'bryant'
        }
        Object.defineProperties(obj2, { // 最外层对象,囊括要设置的属性
            fullName: {
                get: function () { //获取扩展属性的回调函数
                    return this.firstName + ' ' + this.lastName
                },
                set: function (data) { //监听扩展属性的回调函数,当扩展的属性发生变化时会自动调用
                    //此时扩展的属性的新值会作为实参传入到这个回调函数中
                    dataArr = data.split(' ')
                    this.firstName = dataArr[0]
                    this.lastName = dataArr[1]
                },
                // value: 'shabi',
                // writable: true,
                // configurable:true,
                enumerable: true
            }
        })
        obj2.fullName = 'steve jobs'
        for (var i in obj2) {
            console.log(obj2[i])  // steve jobs
        }

通过get属性绑定一个回调函数,来获取fullName属性。可能大家会有个疑问:为什么get回调函数里的this就指向obj2本身呢?这个就是get 底层的逻辑了。这个get实际上是一个异步的过程,每当 fullName成为右值的时候,get就会被调用。

同理,set通过绑定一个回调函数来监听 fullName的变化。每当fullName成为左值的时候,set方法就会别调用,并且会将赋给左值的东西(这个案例里是'steve jobs'字符串)作为实参(对应的形参就是data)传入到set函数中。在set函数里通过分割字符串分别修改firstNamelastName,这样下次再获取fullName的时候,就能根据新的firstNamelastName计算出新的fullName,也就是实现了对fullName的更新。


本文链接:
http://www.dtmao.cc/news_show_300438.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?