I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resources mention that JavaScript objects are duplicated by reference, essentially making them identical. An example from http://www.w3schools.com/js/js_object_definition.asp demonstrates this:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
var x = person;
x.age = 10;
The object x is not a copy of person. It is person. Both x and person
are the same object. Any changes to x will also change person, because
they refer to the same object.
Interestingly, I have come across instances where objects seem to act independently. How can an object appear as the same entity in one scenario and a distinct one in another? I would appreciate any insights on this matter:
Example: 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);
}