关于vue中this.attr代替this.data.attr访问的原理

请看如下例子:

  

复制代码
    var obj = {
        name:"zhuwei",
        age:18
      }
      function Person(data){
        this.data = data;
      }
      var person = new Person(obj);
      console.log(person.data.age)//18
      console.log(person.age)//undefined
复制代码

第一个输出的是18,第二个输出的是undefined,那现在我们希望第二个也是输出18,那应该如何实现呢,

我们可以通过Object.defineProperty给Person对象定义属性,举个例子,现在data对象里面有name和age两个属性,我们就给Person对象定义name和age属性,然后在他们的get和set访问器里面做一些手脚:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var obj = {
    name:"zhuwei",
    age:18
  }
  function Person(data){
    this.data = data;
    var self = this;
    console.log(Object.keys(data));
    Object.keys(data).forEach(function(key){
      self.profx(key);
    });
  }
  Person.prototype.profx = function(key){
    var self = this;
    Object.defineProperty(this,key,{
      get:function(){
        return self.data[key];
      },
      set:function(newValue){
        self.data[key] = newValue;
      }
    })
  }
  var person = new Person(obj);
  console.log(person.data.age)//18
  console.log(person.age)//18

  

posted @   dami.white  阅读(951)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用
点击右上角即可分享
微信分享提示