Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion Week1/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,13 @@ Only watch the below chapters:

- The 50 best websites to Learn JavaScript: http://www.codeconquest.com/blog/top-50-websites-to-learn-javascript/

:star: You can also already go through the [review](/Week2/REVIEW.md) of the upcoming lecture. :star:
:star: You can also already go through the topics of the upcoming lecture. :star:

- Intro JavaScript (What is it, where can you use it for)
- [Variables (var, let, const)](../fundamentals/variables.md)<br>
- [Basic Data types (Strings, Numbers, Arrays, Booleans)](../fundamentals/values.md)<br>
- [Operators](../fundamentals/operators.md)<br>
- [Naming conventions](../fundamentals/naming_conventions.md)

_Please go through the material and come to class prepared!_

2 changes: 1 addition & 1 deletion Week7/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ myMovie.addStar(firstActor);
// Make sure that the following actions work.
console.log(myMovie.getStars().map(actor => `${actor.getName()} ${actor.getAge()}`));
const director = myMovie.getDirector();
console.log(`Director: ${director.map(director => `${director.getName()}`)}`);
console.log(`Director: ${director.getName()}`);
```

Fun extra step: If you get bored, template them and make a page by rendering the results in HTML :smile: with something like `document.querySelector('.move').innerHTML = ...`
Expand Down
35 changes: 32 additions & 3 deletions fundamentals/oop_classes.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,10 +214,38 @@ months
```


The diagram below depicts how this sharing works out. At this time it is not necessary that you understand every detail. Just note how there is a single copy of functions, shared by all instances of the `Months` objects.

![prototype](assets/prototype.png)

### Prototype vs __prototype

The above diagram depicts how this sharing works out.

The `prototype` property exists on all functions but is only relevant when that function is used as a **constructor function**. By assigning methods to the `prototype` property you are basically defining a ‘prototype’ object that will be shared by all objects created through the constructor function when called in conjunction with the `new` keyword.

In contrast to `prototype`, the `__proto__` property (in documentation sometimes denoted as `[[proto]]`) is a property that exist on objects created through the constructor function. This `__proto__` property points to the shared ‘prototype’ object, as defined on the constructor function’s `prototype` property.

The prototype object itself also has a `__proto__` property. In most cases this property points to the prototype of the standard JavaScript `Object` prototype. This is because, ultimately, all objects in JavaScript are prototype-linked to the `Object` prototype. In OOP terms one would say that all JavaScript objects ultimately derive from `Object`.

The `__proto__` property of the `Object` prototype itself has the value `null`. This signals the end of the prototype chain.

When you call a method on an object that does not exist on the object itself, the JavaScript engine will 'walk' down the prototype chain until it finds the requested method _or_ until it reaches the end of the chain.

If the method is found, JavaScript calls the method, setting its `this` value to the object the method was called on. This happens behind the scenes without requiring intervention from the programmer.

If the method was not found by walking the prototype chain, a run-time error is produced, e.g:

```js
myObj.someNonExistingMethod();

```

```
myObj.someNonExistingMethod();
^

TypeError: myObj.someNonExistingMethod is not a function
```

### ES6 Classes

In ES6 a new way of defining objects and its methods was introduced. It uses the same `prototype` mechanism behind the scenes, but its syntax is closer to that of other object-oriented languages, such as Java, etc. Because it is only new syntax, hiding the intricacies of the `prototype`, it is often designated as 'syntactic sugaring'.
Expand Down Expand Up @@ -312,4 +340,5 @@ Array.prototype.myFilter = function (callback) {
}
return arr;
};
```
```