ES6：Object.defineProperty方法

ES6：Object.defineProperty方法

如何定义对象的属性

​ ==>方法1:

​ //数据描述符

​ Object.defineProperty(要定义属性的对象,要定义的属性名,{

​ value:属性值,

​ writable:默认false，该属性的value是否能被赋值运算符改变

​ })

​ ==>方法2:

​ //存取描述符

​ Object.defineProperty(要定义属性的对象,要定义的属性名,{

​ get:function(){},

​ set:function(){}

​ })

​ ==>Object.defineProperty的应用:数据的双向数据绑定

​ ==>需求:在input里面输入内容,会显示在span里面

​ ==>vue利用这个实现了数据的双向数据绑定,可以不用操作dom,直接通过数据模型就可以改变元素的内容

方法一

 //方法1
var obj = {b:1}
//定义obj上的a属性
Object.defineProperty(obj,'a',{
    value:1,
    writable:true //允许重写obj上属性a的值           
})
//获取obj上的属性a的值
console.log(obj.a)
//重写obj上属性a的值
obj.a = 34;
console.log(obj.a)
//遍历obj
for(var key in obj){
    console.log(key);//没有特别说明,无法遍历出来a属性
}

方法二

Object.defineProperty(obj,'text',{
    get:function(){
        //当读取obj的text的属性值的时候,会触发这个函数
        console.log('get方法被调用了');
        //return 的值,就是属性值
        return text;
    },
    set:function(val){
        //set可以接收一个参数,就是你想赋的值
        //当设置obj的text的属性值的时候,会触发这个函数
        console.log('set方法被调用了');
        //可以通过下面方法赋值,text变量就是obj的text的属性值
        text = val;
    }
})
obj.text = 4546;
console.log(obj.text)

Object.defineProperty的应用

数据的双向数据绑定,vue框架

需求:在input里面输入内容,会显示在span里面

想法:发input的值变成一个对象的属性,只要input里面输入内容,就会触发set,在set里面更新span的内容

var model = {};
Object.defineProperty(model,'txt',{
    get:function(){},
    set:function(val){
        var span = document.getElementsByTagName('span')[0];
        span.innerHTML = val;
    }
})
var input = document.getElementsByTagName('input')[0];
input.oninput = function(){
    model.txt = input.value;//必然触发set函数
}