I'm reading this article about angular inheritance, and it started by JavaScript Prototypal Inheritance. the article said that when we do childScope.aString = 'child string' the new property hides/shadows the parentScope property with the same name, but when we do childScope.anArray[1] = 22 the property values are updated on the original objects. and I don't understand that.
can anyone help.
thank you in advance
-
I think a longer extract would be helpful. I'm almost certain I know what they are talking about but your quote is indeed misleading.Sebas– Sebas2016-12-19 16:52:07 +00:00Commented Dec 19, 2016 at 16:52
-
I added the link to the article, my issue is in the first explaining paragraphs saName– aName2016-12-19 16:53:42 +00:00Commented Dec 19, 2016 at 16:53
-
I think that it depends on the type of the object if it was a primitive then it will be created in the children scoop (if it doesn't exist),otherwise it will look for it in the parent scopeaName– aName2016-12-19 17:01:36 +00:00Commented Dec 19, 2016 at 17:01
Add a comment
|
3 Answers
a.b = c explicitly assigns a value to the property b of object a. This will overwrite any and all implicitly inherited properties. Sample in actual Javascript with actual inheritance:
function A() {}
A.prototype.b = 'c';
var a = new A();
console.log(a.b);a does not actually have a property b, it's merely inherited from the prototype. Now:
a.b = 'd';
This has now attached an actual property b directly to a. The prototype still has a property b = 'c', but that is not visible on a anymore. a.b is now 'd'.
The difference between this and a.anArray[1] = 22 is that here you're modifying a mutable object. You're not assigning to a property on a, you're getting a property from a and then modify it. This does not change a, it changes the instance of the object anArray. Which is visible to everything that has access to anArray.
4 Comments
aName
thank you for responding,but I still don't understand something.you said ` you're getting a property from a and then modify it.` , but a doesn't have a property called
anArray
Sebas
@aName Doing a.anArray = [10,22,30] would have been a useful addition in the article to localize the difference. Doing
a.b = ... is overwriting b. Doing a.b[i] = ... is not overwriting b, it's overwriting the value at index i in b.aName
so it depends on the type of the attribute if it's an object or a primitive
deceze
@aName No, it depends on whether you're assigning to the property or modify it. Yes, that somewhat depends on the type of property, since primitives aren't modifiable. But you can just as easily assign a new value to a property that used to be an array.
childScope.aString = 'child string'
childScope.anArray[1] = 22
In the first case the assignment is being made directly to the value of the property. JavaScript adds a new property to the child scope.
In the second case the assignment is being made to the contents of the property. Since the property does not exist on the child scope, JavaScript searches the the prototype chain to find the existing contents and modifies that.
For further reading, see AngularJS Wiki -- Understanding Scopes and the Nuances of Prototypical Inheritance.
Comments
Property access resolution can happen either as part of a write, or a read operation on the property. Prototypal inheritance says that only resolution as part of a read operation should involve inherited properties lookup.
Your first scenario involves a write opreation on the property - so no lookup for inherited property will occur.
In the second scenario however, the property lookup happens as part of an index lookup on the property, not a write operation on the property - ie read operation so no lookup for inherited properties
