码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-02-22 13:36:48      阅读:863      评论:0      收藏:0      [点我收藏+]

标签:func   self   get   blog   span   val   function   name   return   

请看如下例子:

  

    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

  

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

标签:func   self   get   blog   span   val   function   name   return   

原文地址:https://www.cnblogs.com/mrzhu/p/8458146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!