1

あるオブジェクトを別のオブジェクトにコピーすることを扱う以下のコードで何が起こっているのかを理解しようとしています。場合によっては、一方を変更すると他方が変更される同じオブジェクトのように動作します。javascript オブジェクトが参照によって複製される方法に関する投稿を多数見つけたので、それらは実際には同じオブジェクトです。たとえば、http://www.w3schools.com/js/js_object_definition.aspから:

 var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 
 var x = person;  // This will not create a copy of person. 
 x.age = 10; // This will change both x.age and person.age

 The object x is not a copy of person. It is person. Both x and person
 is the same object. Any changes to x will also change person, because
 x and person are the same object.

ただし、オブジェクトが別々のオブジェクトに見える場合も見つかりました。ある場合には同じオブジェクトのように機能し、別の場合には異なるオブジェクトのように振る舞うにはどうすればよいでしょうか? 状況に光を当てていただければ幸いです：

例: http://codepen.io/gratiafide/pen/yagQGr?editors=1010#0

HTML:

<div id="app">
  <my-component>
  </my-component>
</div>

JS:

  var MyComponent = Vue.extend({
  template: '<div v-on:click="test()" class="red">1.  Click here to copy the name object to message and change the value of name to see if the value of message gets changed also.  (It does not).</div>  message: {{ message | json}} <br> name: {{ name | json}}<div v-on:click="test2()" class="red">2.  Now click here to see if updating  the name object also changes the message object.  It does!  Why here and not in #1?</div><div v-on:click="test3()" class="red">3.  Click here to see yet another way of updating the name object also changes the message object. Why here and not in #1?</div>',

  data: function () {
    return { 
    message: {},
    name: {}
    }
  },

  ready: function(){
    this.message = {};
  },
  methods: {
    test: function(){
       this.message = {'t1':"m1"};
       this.name = this.message;  
       this.name = {'t2':"m2"};  
    },
    test2: function(){
       this.message = {'t1':"m1"};
       this.name = this.message;  
       for (var key in this.name) {
                this.name[key] = '';
            }  
    },
    test3: function(){
       this.message = {'t1':"m1"};
       this.name = this.message;  
       Vue.set(this.name, 't1', 'm2');
    }
  }
});

Vue.component('my-component', MyComponent);

new Vue({
  el: '#app'
});

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.red{
  color:red;  
}

body {
  font-family: 'Open Sans', sans-serif;
  background: rgba(0,0,0,.5);
  margin: 0;
}

#app {
  width: 500px;
  margin: 0 auto;
  padding: 10px 20px;
  background: rgba(255,255,255,.9);
}
4

2 に答える 2

2

基本的に、これら3つの違いを尋ねています：

this.message = {'t1':"m1"};
this.name = this.message;  

#1:
this.name = {'t2':"m2"};  

#2
for (var key in this.name) {
  this.name[key] = '';
}  

#3
Vue.set(this.name, 't1', 'm2');

最初のケースではthis.message、まったく新しいオブジェクトを に割り当てているため、変更はありませんthis.name。この新しいオブジェクト ( {'t2':"m2"}) は、 とはまったく関係ありませんthis.message。

たぶん、あなたがしようとしていた/やろうと思っていたのは:

this.name.t2 = "m2";

どちらも同じオブジェクトを参照しているためthis.message、に影響を与える #2 と #3の同じことを行います。this.name

別のオブジェクトから既存のオブジェクトに新しいプロパティを割り当てるには、Object.assignこの機能をサポートするブラウザーで使用できます。

Object.assign(this.name, {'t2':"m2"});
于 2016-09-24T02:56:04.220 に答える
1

変数には、値と参照の 2 種類があります。すべてのプリミティブ (文字列、数値、ブール値など) は値によって格納され、それ以外はすべて参照によって格納され、プロパティを持つことができます。

var a,b;
a={c:1};
b=a;
console.log (b===a); // true;

b={c:1}; // note that b is now being assigned a new reference.
console.log (b===a); // false;

a=b; // now a is being assigned the reference of b.
console.log (b===a); // true;

a.c=2; //note that it is the property of a (c) got changed, not a itself.
console.log (b===a); // true;

a.a = a; //now a has a property (a) that stores the reference of a.
console.log(a === a.a);
console.log(a.a === a.a.a);
console.log(a.a === a.a.a.a.a.a.a.a.a);
a.a.a.a.a.a.a.a.a.a.a.c = 10;
console.log(a.c)//10;
変数を宣言するにはさまざまな方法がありますが、それは問題の範囲ではありません。

于 2016-09-24T04:01:04.640 に答える