Skip to content

Cleaner prose with more pedagogic tone for Classes tutorial #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iliakan merged 2 commits into from
Mar 20, 2019
Merged

Cleaner prose with more pedagogic tone for Classes tutorial #854

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9cc6d70
Corrected grammatical errors, refined prose style
Mar 11, 2019
43626f7
Update article.md
Mar 14, 2019
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
24 changes: 12 additions & 12 deletions 1-js/09-classes/02-class/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

# Classes

The "class" construct allows to define prototype-based classes with a clean, nice-looking syntax. It also introduces new great features, useful for object-oriented programming.
The "class" construct allows one to define prototype-based classes with a clean, nice-looking syntax. It also introduces great new features which are useful for object-oriented programming.

## The "class" syntax

Expand All @@ -22,7 +22,7 @@ let user = new User("John");
user.sayHi();
```

...And that's the same using `class` syntax:
...And here's the same using `class` syntax:

```js run
class User {
Expand All @@ -41,17 +41,17 @@ let user = new User("John");
user.sayHi();
```

It's easy to see that the two examples are alike. Just please note that methods in a class do not have a comma between them. Novice developers sometimes forget it and put a comma between class methods, and things don't work. That's not a literal object, but a class syntax.
It's easy to see that these two examples are alike. Be sure to note that methods in a class do not have a comma between them. A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error. The notation here is not to be confused with object literals. Within the class syntactical sugar, no commas are required.

## What is a class?

So, what exactly is a `class`? We may think that it defines a new language-level entity, but that would be wrong.

In Javascript, a class is a kind of a function.

The definition `class User {...}` create such function and puts the methods into `User.prototype`. So the structure is similar.
The definition `class User {...}` creates a function under the same name and puts the methods into `User.prototype`. So the structure is similar.

Here's the code to dig into the class and see that:
This is demonstrated in the following code, which you can run yourself:

```js run
class User {
Expand All @@ -75,17 +75,17 @@ alert(User === User.prototype.constructor); // true
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
```

Here's the illustration of what `class User` creates:
Abstractly, we can illustrate this process of `class User` creating a function as:

![](class-user.png)

So `class` is a special syntax to define a constructor together with its prototype methods. There are also quite a few additional features here and there, we'll study them later on.
`Class` is a special syntax to define a constructor together with its prototype methods. In addition to its basic operation, the `Class` syntax brings many other features with it which we'll explore later.

## Class Expression

Just like functions, classes can be defined inside another expression, passed around, returned etc.

Here's a class-returning function ("class factory"):
Here's a class-returning function - otherwise known as a "class factory":

```js run
function makeClass(phrase) {
Expand Down Expand Up @@ -121,7 +121,7 @@ new User().sayHi(); // works, shows MyClass definition
alert(MyClass); // error, MyClass not visible outside of the class
```

## Differences of classes vs functions
## Differences between classes and functions

Classes have some differences compared to regular functions:

Expand All @@ -146,7 +146,7 @@ Class methods are non-enumerable
: A class definition sets `enumerable` flag to `false` for all methods in the `"prototype"`. That's good, because if we `for..in` over an object, we usually don't want its class methods.

Classes have a default `constructor() {}`
: If there's no `constructor` in the `class` construct, then an empty function is generated, same as if we had written `constructor() {}`.
: If there's no `constructor` in the `class` construct, then an empty function is generated, just as if we had written `constructor() {}`.

Classes always `use strict`
: All code inside the class construct is automatically in strict mode.
Expand Down Expand Up @@ -225,10 +225,10 @@ For a generator method, similarly, prepend it with `*`.
## Class properties

```warn header="Old browsers may need a polyfill"
Class-level properties is a recent addition to the language.
Class-level properties are a recent addition to the language.
```

In the example before, `User` only had methods. Let's add a property:
In the example above, `User` only had methods. Let's add a property:

```js run
class User {
Expand Down