微信小程序数据劫持代理的实现

index.html 

 index.js

// Vue数据劫持代理
 
//模拟Vue中data选项
let data = {
    username:'小镭',
    age:3
}
 
// 模拟组件的实例
let _this={}
 
// 利用object.defineProperty()
for(let item in data){
    console.log(item,data[item]);
    Object.defineProperty(_this,item,{
        // get作用:用来获取扩展属性值,当获取该属性时调用get方法
        get(){
            console.log('get()');
            return data[item]
        }
    })
}
 
console.log(_this)

 当要获取访问age或username的值时,才会调用get()方法,打印get()

若要修改data中的username的 值,可以直接通过_this.username修改吗?

答案是:不可以 

(没有修改成功,username还是“小镭”) 

 

可以通过set方法修改值

 

for(let item in data){
    console.log(item,data[item]);
    Object.defineProperty(_this,item,{
        // get作用:用来获取扩展属性值,当获取该属性时调用get方法
        get(){
            console.log('get()');
            return data[item]
        },
        //set作用:监视扩展属性的,只要已修改就调用
        set(newValue){
            console.log('set()',newValue);
            // _this.username=newValue;   千万不要在set方法中修改当前扩展属性的值,会出现死循环
            data[item] = newValue;
        }
    })
}

(修改成功!) 

 到此这篇关于微信小程序数据劫持代理的实现的文章就介绍到这了,更多相关小程序数据劫持代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • 微信小程序如何实现数据共享与方法共享详解
  • 微信小程序滑块验证实现方法
  • 微信小程序自定义菜单导航实现楼梯效果
  • 微信小程序虚拟列表的应用实例
  • 微信小程序实现搜索功能并跳转搜索结果页面
  • 微信小程序实现猜数字小游戏的实战过程
  • 微信小程序简洁登录页面的实现(附源码)
张贴在2