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

最新推荐文章于 2024-04-12 15:34:42 发布

转载最新推荐文章于 2024-04-12 15:34:42 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrzhu/p/8458146.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript的方法，通过Object.defineProperty来实现在构造函数的原型上动态映射对象属性，使得可以直接访问对象内部data属性中的字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请看如下例子：

    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访问器里面做一些手脚：

    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

转载于:https://www.cnblogs.com/mrzhu/p/8458146.html