双向数据传递

对象是由多个键值对的无序集合。定义新属性或者修改原有的属性可以使用“=”重新赋值,也可以使用Object.defineProperty定义。


语法:

Object.defineProperty(obj,prop,descriptor);

obj:必需,目标对象;

prop:必需,定义或者修改的属性名称;

descriptor:必需,目标属性所拥有的特性;


用例:

var obj={test:'val'};

bject.defineProperty(obj,'test',{

    configurable:true|false,

    enumerable:true|false,

    value:任意类型的值,

    writable:true|false,

    get:function(){}|undefined,

    set:function(){}|undefined

});


value(属性对应的值,默认undefined)

var obj={};

Object.defineProperty(obj,'txt',{});

console.log(obj.txt);//undefined

Object.defineProperty(obj,'txt',{

    value:'name'

});

console.log(obj.txt);//name


writable(是否可以被重写);


enumerable(是否可以被枚举);


configurable(是否可以删除目标属性或者是否可以再次修改属性的特性---->configurable,enumerable,writable);

这个属性起到两个作用:

1.目标属性是否可以使用delete删除  

//var obj={txt:'0'};delete obj.txt;------>删除属性

2.目标属性是否可以再次设置特性


getter(获得属性值)

setter(设置属性值)

var obj={};

var initValue="hello";

Object.defineProperty(obj,'newKey',{

    get:function(){

        //当获取值时触发get

        return initValue;

    },

    set:function(value){

        //当设置值时触发set

        initValue=value;

    }

})

//获取值,触发get

console.log(obj.newKey);

//设置值,触发set

obj.newKey='asc';


实例:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <p></p>
    <script>
        var inp = document.getElementsByTagName('input')[0];
        var p = document.getElementsByTagName('p')[0];
        var obj = {};

        Object.defineProperty(obj,'val',{

            //当obj.val的值发生改变时,将会执行该get和set方法

            get:function(){
                return inp.value;
            },
            set:function(val){
                p.innerHTML = val;
            }

        });

        //第一个参数:目标对象
        //第二个参数:需要定义属性和方法的名字
        //第三个参数:目标属性所拥有的特性,必须是对象

        inp.oninput = function(){
            obj.val = inp.value;

        };

    </script>
</body>

</html>

原文链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值