This commit is contained in:
Ilya Kantor 2017-03-21 14:41:49 +03:00
parent 4ae129054e
commit ab9ab64bd5
476 changed files with 3370 additions and 532 deletions

View file

@ -212,7 +212,7 @@ If you are writing several "helper" functions and the code to use them, then the
}
// *!*the code which uses them*/!*
var elem = createElement();
let elem = createElement();
setHandler(elem);
walkAround();
```
@ -220,7 +220,7 @@ If you are writing several "helper" functions and the code to use them, then the
```js
// *!*the code which uses the functions*/!*
var elem = createElement();
let elem = createElement();
setHandler(elem);
walkAround();

View file

@ -1,6 +1,6 @@
describe("multiplyNumeric", function() {
it("multiplies all numeric properties by 2", function() {
var menu = {
let menu = {
width: 200,
height: 300,
title: "My menu"
@ -14,5 +14,5 @@ describe("multiplyNumeric", function() {
it("returns nothing", function() {
assert.isUndefined( multiplyNumeric({}) );
});
});
});

View file

@ -10,8 +10,8 @@ Is it possible to create functions `A` and `B` such as `new A()==new B()`?
function A() { ... }
function B() { ... }
var a = new A;
var b = new B;
let a = new A;
let b = new B;
alert( a == b ); // true
```

View file

@ -1,4 +1,4 @@
# Using "new" to create objects
# Constructor, operator "new"
The regular `{...}` syntax allows to create one object. But often we need to create many similar objects.
@ -62,7 +62,7 @@ let user = {
};
```
Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also reads well.
Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also reads well.
That's the main purpose of constructors -- to implement reusable object creation code.
@ -85,7 +85,7 @@ let user = new function() {
The constructor can't be called again, because it is not saved anywhere, just created and called. So this trick aims to encapsulate the code for a single complex object only.
````
## Dual-use constructors: new.target
## Dual-use constructors: new.target
Inside a function, we can check how it is called with `new` or without it, using a special `new.target` property.
@ -131,7 +131,7 @@ In other words, `return` with an object returns that object, otherwise `this` is
For instance, here `return` overrides `this` by returning an object:
```js run
```js run
function BigUser() {
this.name = "John";
@ -144,7 +144,7 @@ alert( new BigUser().name ); // Godzilla, got that object
And here's an example with an empty `return` (or we could place a primitive after it, doesn't matter):
```js run
```js run
function SmallUser() {
this.name = "John";
@ -195,7 +195,7 @@ let john = new User("John");
john.sayHi(); // My name is: John
*/!*
/*
/*
john = {
name: "John",
sayHi: function() { ... }
@ -208,9 +208,6 @@ john = {
- Constructor functions or, shortly, constructors, are regular functions, but there's a common agreement to name them with capital letter first.
- Constructor functions should only be called using `new`. Such call implies a creation of empty `this` at the start and returning the populated one at the end.
We can use constructor functions to make multiple similar objects. But the topic is much deeper than described here. So we'll return it later and cover more in-depth.
We can use constructor functions to make multiple similar objects. But the topic is much deeper than described here. So we'll return it later and cover more in-depth.
As of now, it's important to understand what `new` is, because JavaScript provides constructor functions for many built-in language objects: like `Date` for dates, `Set` for sets and others that we plan to study.

View file

@ -22,7 +22,7 @@ How to delete an element from the array?
The arrays are objects, so we can try to use `delete`:
```js run
var arr = ["I", "go", "home"];
let arr = ["I", "go", "home"];
delete arr[1]; // remove "go"

View file

@ -20,7 +20,7 @@ function aclean(arr) {
*!*
let sorted = word.toLowerCase().split('').sort().join(''); // (*)
*/!*
map.set(sorted, word);
map.set(sorted, word);
}
return Array.from(map.values());
@ -36,7 +36,7 @@ Letter-sorting is done by the chain of calls in the line `(*)`.
For convenience let's split it into multiple lines:
```js
var sorted = arr[i] // PAN
let sorted = arr[i] // PAN
.toLowerCase() // pan
.split('') // ['p','a','n']
.sort() // ['a','n','p']
@ -61,10 +61,10 @@ That's how the solution can look:
```js run
function aclean(arr) {
var obj = {};
let obj = {};
for (var i = 0; i < arr.length; i++) {
var sorted = arr[i].toLowerCase().split("").sort().join("");
for (let i = 0; i < arr.length; i++) {
let sorted = arr[i].toLowerCase().split("").sort().join("");
obj[sorted] = arr[i];
}
@ -75,7 +75,3 @@ let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"];
alert( aclean(arr) );
```

View file

@ -1,5 +1,5 @@
function getWeekDay(date) {
var days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
let days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
return days[date.getDay()];
}

View file

@ -1,6 +1,6 @@
function getLocalDay(date) {
var day = date.getDay();
let day = date.getDay();
if (day == 0) { // weekday 0 (sunday) is 7 in european
day = 7;

View file

@ -1,7 +1,7 @@
```js run
function getLocalDay(date) {
var day = date.getDay();
let day = date.getDay();
if (day == 0) { // 0 becomes 7
day = 7;

View file

@ -18,8 +18,8 @@ describe("getDateAgo", function() {
});
it("does not modify the given date", function() {
var date = new Date(2015, 0, 2);
var dateCopy = new Date(date);
let date = new Date(2015, 0, 2);
let dateCopy = new Date(date);
getDateAgo(dateCopy, 100);
assert.equal(date.getTime(), dateCopy.getTime());
});

View file

@ -12,7 +12,7 @@ function formatDate(date) {
return sec + ' sec. ago';
}
var min = Math.floor(diff / 60000); // convert diff to minutes
let min = Math.floor(diff / 60000); // convert diff to minutes
if (min < 60) {
return min + ' min. ago';
}

View file

@ -14,7 +14,7 @@ function formatDate(date) {
return sec + ' sec. ago';
}
var min = Math.floor(diff / 60000); // convert diff to minutes
let min = Math.floor(diff / 60000); // convert diff to minutes
if (min < 60) {
return min + ' min. ago';
}

View file

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

View file

@ -524,7 +524,7 @@ Lexical Environment objects that we've been talking about are subjects to same m
```js
function f() {
var value = Math.random();
let value = Math.random();
return function() {};
}
@ -538,7 +538,7 @@ Lexical Environment objects that we've been talking about are subjects to same m
```js
function f() {
var value = 123;
let value = 123;
function g() {}
@ -565,7 +565,7 @@ When it pauses, in console type `alert(value)`.
```js run
function f() {
var value = Math.random();
let value = Math.random();
function g() {
debugger; // in console: type alert( value ); No such variable!
@ -574,7 +574,7 @@ function f() {
return g;
}
var g = f();
let g = f();
g();
```
@ -623,7 +623,7 @@ From the first sight, `var` behaves similar to `let`. That is, declares a variab
```js run
function sayHi() {
var phrase = "Hello"; // local variable, "var" instead of "let"
let phrase = "Hello"; // local variable, "var" instead of "let"
alert(phrase); // Hello
}
@ -640,7 +640,7 @@ alert(phrase); // Error, phrase is not defined
```js
if (true) {
var test = true; // use "var" instead of "let"
let test = true; // use "var" instead of "let"
}
*!*
@ -653,7 +653,7 @@ alert(phrase); // Error, phrase is not defined
The same thing for loops: `var` can not be block or loop-local:
```js
for(var i = 0; i < 10; i++) {
for(let i = 0; i < 10; i++) {
// ...
}
@ -667,7 +667,7 @@ alert(phrase); // Error, phrase is not defined
```js
function sayHi() {
if (true) {
var phrase = "Hello";
let phrase = "Hello";
}
alert(phrase); // works
@ -691,7 +691,7 @@ alert(phrase); // Error, phrase is not defined
alert(phrase);
*!*
var phrase;
let phrase;
*/!*
}
```
@ -701,7 +701,7 @@ alert(phrase); // Error, phrase is not defined
```js
function sayHi() {
*!*
var phrase;
let phrase;
*/!*
phrase = "Hello";
@ -717,7 +717,7 @@ alert(phrase); // Error, phrase is not defined
*!*
if (false) {
var phrase;
let phrase;
}
*/!*
@ -738,21 +738,21 @@ alert(phrase); // Error, phrase is not defined
alert(phrase);
*!*
var phrase = "Hello";
let phrase = "Hello";
*/!*
}
sayHi();
```
The line `var phrase = "Hello"` has two actions in it: variable declaration `var` and assignment `=`.
The line `let phrase = "Hello"` has two actions in it: variable declaration `var` and assignment `=`.
The declaration is processed at the start of function execution (hoisted), but the assignment is not. So the code works essentially like this:
```js run
function sayHi() {
*!*
var phrase; // variable is declared from the top...
let phrase; // variable is declared from the top...
*/!*
alert(phrase); // undefined

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more