diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png index 7d779337..efa3c19d 100644 Binary files a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png and b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.png differ diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png index bdc8d72c..e184bdd0 100644 Binary files a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png and b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources@2x.png differ diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/article.md b/1-js/07-object-oriented-programming/10-class-inheritance/article.md index 9b34f549..803971e3 100644 --- a/1-js/07-object-oriented-programming/10-class-inheritance/article.md +++ b/1-js/07-object-oriented-programming/10-class-inheritance/article.md @@ -301,7 +301,7 @@ At the line `(*)` we take `eat` from the prototype (`animal`) and call it in the And in the code above it actually works as intended: we have the correct `alert`. -Now let's add one more object to the chain. And we'll see how things break: +Now let's add one more object to the chain. We'll see how things break: ```js run let animal = { @@ -336,20 +336,22 @@ The code doesn't work any more! We can see the error trying to call `longEar.eat It may be not that obvious, but if we trace `longEar.eat()` call, then we can see why. In both lines `(*)` and `(**)` the value of `this` is the current object (`longEar`). That's essential: all object methods get the current object as `this`, not a prototype or something. -So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the same: `rabbit`. They both call `rabbit.eat` without going up the chain. +So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the same: `rabbit`. They both call `rabbit.eat` without going up the chain in the endless loop. -In other words: +Here's the picture of what happens: -1. Inside `longEar.eat()`, we pass the call up to `rabbit.eat` giving it the same `this=longEar`. +![](this-super-loop.png) + +1. Inside `longEar.eat()`, the line `(**)` calls `rabbit.eat` providing it with `this=longEar`. ```js // inside longEar.eat() we have this = longEar this.__proto__.eat.call(this) // (**) // becomes longEar.__proto__.eat.call(this) - // or + // that is rabbit.eat.call(this); ``` -2. Inside `rabbit.eat`, we want to pass the call even higher in the chain, but `this=longEar`, so `this.__proto__.eat` is `rabbit.eat`! +2. Then in the line `(*)` of `rabbit.eat`, we'd like to pass the call even higher in the chain, but `this=longEar`, so `this.__proto__.eat` is again `rabbit.eat`! ```js // inside rabbit.eat() we also have this = longEar @@ -362,9 +364,7 @@ In other words: 3. ...So `rabbit.eat` calls itself in the endless loop, because it can't ascend any further. -![](this-super-loop.png) - -There problem is unsolvable, because `this` must always be the calling object itself, no matter which parent method is called. So its prototype will always be the immediate parent of the object. We can't go up the chain. +The problem can't be solved by using `this` alone. ### `[[HomeObject]]` @@ -501,6 +501,8 @@ alert(Rabbit.prototype.__proto__ === Animal.prototype); This way `Rabbit` has access to all static methods of `Animal`. +### No static inheritance in built-ins + Please note that built-in classes don't have such static `[[Prototype]]` reference. For instance, `Object` has `Object.defineProperty`, `Object.keys` and so on, but `Array`, `Date` etc do not inherit them. Here's the picture structure for `Date` and `Object`: diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png index bb4c1fc4..637d1793 100644 Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png and b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png differ diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png index 91d2e03c..af7b443b 100644 Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png and b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png differ diff --git a/2-ui/1-document/11-coordinates/coords.png b/2-ui/1-document/11-coordinates/coords.png index 05245867..58fd533f 100644 Binary files a/2-ui/1-document/11-coordinates/coords.png and b/2-ui/1-document/11-coordinates/coords.png differ diff --git a/2-ui/1-document/11-coordinates/coords@2x.png b/2-ui/1-document/11-coordinates/coords@2x.png index 777690ed..c3469f4c 100644 Binary files a/2-ui/1-document/11-coordinates/coords@2x.png and b/2-ui/1-document/11-coordinates/coords@2x.png differ diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png index 30f25780..a4f4fae5 100644 Binary files a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png and b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png differ diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png index 3077050a..e3a070cb 100644 Binary files a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png and b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png differ diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble.png b/2-ui/2-events/03-event-delegation/bagua-bubble.png index 795a6a50..f0433aeb 100644 Binary files a/2-ui/2-events/03-event-delegation/bagua-bubble.png and b/2-ui/2-events/03-event-delegation/bagua-bubble.png differ diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png b/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png index 9d7c862d..8cc5ca91 100644 Binary files a/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png and b/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png differ diff --git a/figures.sketch b/figures.sketch index 7bf104a3..ac92dd46 100644 Binary files a/figures.sketch and b/figures.sketch differ