Scopes javascript - different when string and array/object

Question

Was reading this

https://github.com/angular/angular.js/wiki/Understanding-Scopes

and there is same thing on stack overflow:

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Here is the thing which I do not understand:

Suppose we then do this:

childScope.aString = 'child string'

The prototype chain is not consulted, and a new aString property is added to the childScope. This new property hides/shadows the parentScope property with the same name.

Suppose we then do this:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

The prototype chain is consulted because the objects (anArray and anObject) are not found in the childScope.

So in the object array example - parent scope is updated because the objects (anArray and anObject) are not found in the childScope

But in the first example its the same. Except that it is the string. It is not found in the child scope, so should be updated in parent scope. Why it is not updated in parent scope?

Or why array and object in 2nd example are not created in child scope?

Hope its ok to create new thread based on original thread, because just for comment it is long text and would not be easy to read.

Answer 1

In a sense, all three of those examples are really the same. In the second two examples, there's simply an extra object-to-object "hop". The first one:

childScope.aString = "child string";

There's just one object involved: the "childScope" object. (By the way, the word "scope" here makes me uneasy, but let's move on.)

The second pair of examples involve two objects:

childScope.anArray[1] = "22";
childScope.anObject.property1 = 'child prop1';

The two objects in the first of those two statements is the "childScope" object, and then the "anArray" property of the "childScope" object. Presumably, if the statement doesn't cause an error then the value of that property is an array. I stress value because that's the key difference between this reference to a property of "childScope" and the first example ("aString") - here, we want the value of the property because it must be used for the subsequent reference. In the first "aString" example, the statement was setting the value, so there was no interrogation of the current value.

Once the value of childScope.anArray has been fetched, then that object reference is in turn used in a property reference expression. Here, as in the first "aString" example, we're setting the value of the "1" property of the "anArray" object. That's pretty much exactly the same operation as in the "aString" example. (The "anObject" example is much the same.)

When setting a property value (or an array element value; that's really the same thing), JavaScript does not look for a property up the prototype chain. When using the value of a property, it does. An interesting effect of that is this. In the first "aString" example, if there were an "aString" property on the prototype, then once that property is set on the instance ("childScope"), then the prototype property is effectively hidden from view as far as that instance object is concerned.