beautify 1st part of the tutorial
This commit is contained in:
parent
e3dd2cedc0
commit
6444024a9d
327 changed files with 2358 additions and 1986 deletions
|
@ -6,7 +6,9 @@
|
|||
//+ run
|
||||
var arr = ["a", "b"];
|
||||
|
||||
arr.push( function() { alert(this); } )
|
||||
arr.push(function() {
|
||||
alert( this );
|
||||
})
|
||||
|
||||
arr[2](); // "a","b",function
|
||||
```
|
||||
|
|
|
@ -7,8 +7,10 @@
|
|||
```js
|
||||
var arr = ["a", "b"];
|
||||
|
||||
arr.push( function() { alert(this); } )
|
||||
arr.push(function() {
|
||||
alert( this );
|
||||
})
|
||||
|
||||
arr[2](); // ?
|
||||
arr[2](); // ?
|
||||
```
|
||||
|
||||
|
|
|
@ -5,10 +5,12 @@
|
|||
```js
|
||||
//+ run
|
||||
var obj = {
|
||||
go: function() { alert(this) }
|
||||
go: function() {
|
||||
alert(this)
|
||||
}
|
||||
}
|
||||
|
||||
(obj.go)() // error!
|
||||
(obj.go)() // error!
|
||||
```
|
||||
|
||||
Причем сообщение об ошибке в большинстве браузеров не даёт понять, что на самом деле не так.
|
||||
|
@ -18,6 +20,7 @@ var obj = {
|
|||
JavaScript игнорирует перевод строки перед скобкой `(obj.go)()` и читает этот код как:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var obj = { go:... }(obj.go)()
|
||||
```
|
||||
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
Каков будет результат этого кода?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var obj = {
|
||||
go: function() { alert(this) }
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
<li>Здесь не просто вызов `obj.method()`, а более сложный вызов вида `(выражение).method()`. Такой вызов работает, как если бы он был разбит на две строки:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
f = obj.go; // сначала вычислить выражение
|
||||
f(); // потом вызвать то, что получилось
|
||||
```
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
Вызовы `(1)` и `(2)` в примере ниже работают не так, как `(3)` и `(4)`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
"use strict"
|
||||
|
||||
var obj, f;
|
||||
|
|
|
@ -6,13 +6,13 @@ var name = "";
|
|||
|
||||
var user = {
|
||||
name: "Василий",
|
||||
|
||||
|
||||
*!*
|
||||
export: this // (*)
|
||||
*/!*
|
||||
};
|
||||
};
|
||||
|
||||
alert(user.export.name);
|
||||
alert( user.export.name );
|
||||
```
|
||||
|
||||
Объявление объекта само по себе не влияет на `this`. Никаких функций, которые могли бы повлиять на контекст, здесь нет.
|
||||
|
|
|
@ -9,10 +9,10 @@ var name = "";
|
|||
|
||||
var user = {
|
||||
name: "Василий",
|
||||
|
||||
export: this
|
||||
};
|
||||
|
||||
alert(user.export.name);
|
||||
export: this
|
||||
};
|
||||
|
||||
alert( user.export.name );
|
||||
```
|
||||
|
||||
|
|
|
@ -9,13 +9,13 @@ var name = "";
|
|||
|
||||
var user = {
|
||||
name: "Василий",
|
||||
|
||||
export: function() {
|
||||
|
||||
export: function() {
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
alert(user.export().name);
|
||||
alert( user.export().name );
|
||||
```
|
||||
|
||||
|
|
|
@ -9,15 +9,15 @@ var name = "";
|
|||
|
||||
var user = {
|
||||
name: "Василий",
|
||||
|
||||
|
||||
export: function() {
|
||||
return {
|
||||
return {
|
||||
value: this
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
alert(user.export().value.name);
|
||||
alert( user.export().value.name );
|
||||
```
|
||||
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
</ul>
|
||||
|
||||
```js
|
||||
var calculator = {
|
||||
... ваш код...
|
||||
var calculator = {
|
||||
...ваш код...
|
||||
}
|
||||
|
||||
calculator.read();
|
||||
|
|
|
@ -4,20 +4,20 @@
|
|||
//+ run
|
||||
var ladder = {
|
||||
step: 0,
|
||||
up: function() {
|
||||
this.step++;
|
||||
up: function() {
|
||||
this.step++;
|
||||
return this;
|
||||
},
|
||||
down: function() {
|
||||
this.step--;
|
||||
down: function() {
|
||||
this.step--;
|
||||
return this;
|
||||
},
|
||||
showStep: function() {
|
||||
alert(this.step);
|
||||
showStep: function() {
|
||||
alert( this.step );
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
ladder.up().up().down().up().down().showStep(); // 1
|
||||
ladder.up().up().down().up().down().showStep(); // 1
|
||||
```
|
||||
|
||||
|
|
|
@ -7,14 +7,14 @@
|
|||
```js
|
||||
var ladder = {
|
||||
step: 0,
|
||||
up: function() { // вверх по лестнице
|
||||
up: function() { // вверх по лестнице
|
||||
this.step++;
|
||||
},
|
||||
down: function() { // вниз по лестнице
|
||||
down: function() { // вниз по лестнице
|
||||
this.step--;
|
||||
},
|
||||
showStep: function() { // вывести текущую ступеньку
|
||||
alert(this.step);
|
||||
alert( this.step );
|
||||
}
|
||||
};
|
||||
```
|
||||
|
@ -31,7 +31,7 @@ ladder.showStep(); // 1
|
|||
Модифицируйте код методов объекта, чтобы вызовы можно было делать цепочкой, вот так:
|
||||
|
||||
```js
|
||||
ladder.up().up().down().up().down().showStep(); // 1
|
||||
ladder.up().up().down().up().down().showStep(); // 1
|
||||
```
|
||||
|
||||
Такой подход называется "чейнинг" (chaining) и используется, например, во фреймворке jQuery.
|
||||
|
|
|
@ -16,7 +16,7 @@ var user = {
|
|||
// метод
|
||||
*/!*
|
||||
sayHi: function() {
|
||||
alert('Привет!');
|
||||
alert( 'Привет!' );
|
||||
}
|
||||
|
||||
};
|
||||
|
@ -101,7 +101,7 @@ admin.sayHi(); // упс! внутри sayHi обращение по старо
|
|||
Через `this` метод может не только обратиться к любому свойству объекта, но и передать куда-то ссылку на сам объект целиком:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: 'Василий',
|
||||
|
||||
|
@ -138,7 +138,7 @@ function sayHi() {
|
|||
**Если одну и ту же функцию запускать в контексте разных объектов, она будет получать разный `this`:**
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = { firstName: "Вася" };
|
||||
var admin = { firstName: "Админ" };
|
||||
|
||||
|
@ -169,8 +169,8 @@ admin['g'](); // Админ (не важно, доступ к объекту ч
|
|||
|
||||
```js
|
||||
//+ run
|
||||
function func() {
|
||||
alert(this); // выведет [object Window] или [object global]
|
||||
function func() {
|
||||
alert( this ); // выведет [object Window] или [object global]
|
||||
}
|
||||
|
||||
func();
|
||||
|
@ -182,9 +182,9 @@ func();
|
|||
|
||||
```js
|
||||
//+ run
|
||||
function func() {
|
||||
function func() {
|
||||
"use strict";
|
||||
alert(this); // выведет undefined (кроме IE9-)
|
||||
alert( this ); // выведет undefined (кроме IE9-)
|
||||
}
|
||||
|
||||
func();
|
||||
|
@ -199,7 +199,7 @@ func();
|
|||
Любой более хитрый вызов приведёт к потере контекста, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: "Вася",
|
||||
hi: function() { alert(this.name); },
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue