用Object.defineProperty实现一个简单的双向数据绑定

提到vue,总是要提到双向数据绑定、总是要提到双向数据绑定、总是要提到双向数据绑定……既然知道是用Object.defineProperty,那也自己来搞一个像v-model那样的双向数据绑定吧。废话不多说,直接上代码。

<input type="text" id="inputing">
<p id="result"></p>
let obj = {};
let data='default';

//第一个参数:定义属性的对象。
//第二个参数:要定义或修改的属性的名称。
//第三个参数:将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
    //获取值
    get: function () {
        console.log('调用了一次get');
        return data;
    },
    //设置值
    set: function (val) {
        data = val;
        console.log(val);
        document.getElementById('result').innerHTML=val;
    }
})

// 获取值调用get
document.getElementById('result').innerHTML = obj.data;
//赋值调用set
let flag = true;
document.getElementById("inputing").addEventListener('keyup',function(){
    if(flag) obj.data = this.value;
})
// 中文输入法下,仅在选词后触发input事件
document.getElementById("inputing").addEventListener('compositionstart', function(e) {
    flag = false;
});
document.getElementById("inputing").addEventListener('compositionend', function(e) {
    flag = true;
});

因为在下面就调用了值,所以一开始input里面还没有输入的时候,下面也会显示默认值:



在input里输入后,下面的数据也随之变化:


一个神奇的……参数?变量?
改代码的时候发现,我没有定义一个变量name我的代码中也不见name这个字眼,然而在Object.definePropertygettersetter,却可以直接使用这样的一个参数。
为了探索name到底时何方神圣,我把name改成了nam、value,均报了错。
name到底从何而来?打印argumentsthis,发现都没有name,而console.log(name)打印出来的,是我刷新浏览器之前的上一次最后的输入文本,代码如下:

Object.defineProperty(obj, "data", {
    //获取值
    get: function () {
        console.log(arguments);
        console.log(this);
        console.log(name);
        return data;
    },
    //设置值
    set: function (val) {
        console.log(arguments);
        data = val;
        name = val; // 当然此处需要设置了name下一次刷新浏览器才会有不同的结果
        console.log(val);
        document.getElementById('result').innerHTML=val;
    }
})
初始没有输入也没有历史输入时,打印出的name为空

输入又刷新后,打印的name为上一次最后的文本

查阅官方关于Object.defineProperty()的描述,也没有发现这个神奇的name。不知道是我搜索方式不对还是关键词不对,也没发现有人遇到过这个问题,我的小脑袋真是充满了❓❓❓不知道哪位大神路过此地,能给我解个惑。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容