jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

work

Browse source
This commit is contained in:
Ilya Kantor 2016-07-21 17:05:55 +03:00
parent 1bffa43db4
commit 057783d216
373 changed files with 203 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

43
1-js/3-object-basics/3-object-methods/2-check-syntax/solution.md Normal file
View file

@ -0,0 +1,43 @@
**Error**!
Try it:
```js run
let user = {
name: "John",
go: function() { alert(this.name) }
}
(user.go)() // error!
```
The error message in most browsers does not give understanding what went wrong.
**The error appears because a semicolon is missing after `user = {...}`.**
Javascript does not assume a semicolon before a bracket `(user.go)()`, so it reads the code like:
```js no-beautify
let user = { go:... }(user.go)()
```
Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error.
If we insert the semicolon, all is fine:
```js run
let user = {
name: "John",
go: function() { alert(this.name) }
}*!*;*/!*
(user.go)() // John
```
Please note that brackets around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters.

19
1-js/3-object-basics/3-object-methods/2-check-syntax/task.md Normal file
View file

@ -0,0 +1,19 @@
importance: 2
---
# Syntax check
What is the resule of this code?
```js no-beautify
let user = {
name: "John",
go: function() { alert(this.name) }
}
(user.go)()
```
P.S. There's a pitfall :)

22
1-js/3-object-basics/3-object-methods/3-why-this/solution.md Normal file
View file

@ -0,0 +1,22 @@
Here's the explanations.
1. That's a regular object method call.
2. The same, brackets do not change the order of operations here, the dot is first anyway.
3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines:
```js no-beautify
f = obj.go; // calculate the expression
f(); // call what we have
```
Here `f()` is executed as a function, without `this`.
4. The similar thing as `(3)`, to the left of the dot `.` we have an expression.
To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type.
Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`.

26
1-js/3-object-basics/3-object-methods/3-why-this/task.md Normal file
View file

@ -0,0 +1,26 @@
importance: 3
---
# Explain the value of "this"
In the code above we intend to call `user.go()` method 4 times in a row.
But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why?
```js run no-beautify
let obj, method;
obj = {
go: function() { alert(this); }
};
obj.go(); // (1) [object Object]
(obj.go)(); // (2) [object Object]
(method = obj.go)(); // (3) undefined
(obj.go || obj.stop)(); // (4) undefined
```

46
1-js/3-object-basics/3-object-methods/4-object-property-this/solution.md Normal file
View file

@ -0,0 +1,46 @@
**Answer: an error.**
Try it:
```js run
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name ); // Error: Cannot read property 'name' of undefined
```
That's because rules that set `this` do not look at object literals.
Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method.
And the object literal itself has no effect on `this`. The value of `this` is one for the whole function, code blocks and object literals do not affect it.
So `ref: this` actually takes current `this` of the function.
Here's the opposite case:
```js run
function makeUser() {
return {
name: "John",
*!*
ref() {
return this;
}
*/!*
};
};
let user = makeUser();
alert( user.ref().name ); // John
```
Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`.

23
1-js/3-object-basics/3-object-methods/4-object-property-this/task.md Normal file
View file

@ -0,0 +1,23 @@
importance: 5
---
# Using "this" in object literal
Here the function `makeUser` returns an object.
What is the result of accessing its `ref`? Why?
```js
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name ); // What's the result?
```

14
1-js/3-object-basics/3-object-methods/7-calculator/_js.view/solution.js Normal file
View file

@ -0,0 +1,14 @@
let calculator = {
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
},
read() {
this.a = +prompt('a?', 0);
this.b = +prompt('b?', 0);
}
};

28
1-js/3-object-basics/3-object-methods/7-calculator/_js.view/test.js Normal file
View file

@ -0,0 +1,28 @@
describe("calculator", function() {
context("when 2 and 3 entered", function() {
beforeEach(function() {
sinon.stub(window, "prompt");
prompt.onCall(0).returns("2");
prompt.onCall(1).returns("3");
calculator.read();
});
afterEach(function() {
prompt.restore();
});
it("the sum is 5", function() {
assert.equal(calculator.sum(), 5);
});
it("the multiplication product is 6", function() {
assert.equal(calculator.mul(), 6);
});
});
});

23
1-js/3-object-basics/3-object-methods/7-calculator/solution.md Normal file
View file

@ -0,0 +1,23 @@
```js run demo
let calculator = {
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
},
read() {
this.a = +prompt('a?', 0);
this.b = +prompt('b?', 0);
}
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
```

24
1-js/3-object-basics/3-object-methods/7-calculator/task.md Normal file
View file

@ -0,0 +1,24 @@
importance: 5
---
# Create a calculator
Create an object `calculator` with three methods:
- `read()` prompts for two values and saves them as object properties.
- `sum()` returns the sum of saved values.
- `mul()` multiplies saved values and returns the result.
```js
let calculator = {
// ... your code ...
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
```
[demo]

40
1-js/3-object-basics/3-object-methods/8-chain-calls/solution.md Normal file
View file

@ -0,0 +1,40 @@
The solution is to return the object itself from every call.
```js run
let ladder = {
step: 0,
up() {
this.step++;
*!*
return this;
*/!*
},
down() {
this.step--;
*!*
return this;
*/!*
},
showStep() {
alert( this.step );
*!*
return this;
*/!*
}
}
ladder.up().up().down().up().down().showStep(); // 1
```
We also can write a single call per line. For long chains it's more readable:
```js
ladder
.up()
.up()
.down()
.up()
.down()
.showStep(); // 1
```

39
1-js/3-object-basics/3-object-methods/8-chain-calls/task.md Normal file
View file

@ -0,0 +1,39 @@
importance: 2
---
# Chaining
There's a `ladder` object that allows to go up and down:
```js
let ladder = {
step: 0,
up() {
this.step++;
},
down() {
this.step--;
},
showStep: function() { // shows the current step
alert( this.step );
}
};
```
Now, if we need to make several calls in sequence, can do it like this:
```js
ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
```
Modify the code of `up` and `down` to make the calls chainable, like this:
```js
ladder.up().up().down().showStep(); // 1
```
Such approach is widely used across Javascript libraries.

364
1-js/3-object-basics/3-object-methods/article.md Normal file
View file

@ -0,0 +1,364 @@
# Object methods, "this"
Objects are usually created to represent entities of the real world, like users, orders and so on:
```js
let user = {
name: "John",
age: 30
};
```
And, in the real world, a user can `act`: to select something from the shopping cart, to login, to logout etc.
Let's implement the same in Javascript using functions in properties.
[cut]
For the start, let's teach the `user` to say hello:
```js run
let user = {
name: "John",
age: 30
};
*!*
user.sayHi = function() {
alert("Hello!");
};
*/!*
user.sayHi(); // Hello!
```
Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object.
Then we can call it. The user now can speak!
A function that is the property of an object is called its *method*.
So, here we've got a method `sayHi` of the object `user`.
```smart header="Object-oriented programming"
When we write our code using objects to represent entities, that's called an [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP".
OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture. We will make use of OOP further when we get enough familarity with the language.
```
Of course, we could use a Function Declaration for the same purpose:
```js run
let user = {
// ...
};
*!*
function sayHi() {
alert("Hello!");
};
user.sayHi = sayHi;
*/!*
user.sayHi(); // Hello!
```
That would also work, but is longer. Also we get an "extra" function `sayHi` outside of the `user` object. Usually we don't want that.
## Method shorthand
There exists a shorter syntax for methods in an object literal:
```js
// these objects do the same
let user = {
sayHi: function() {
alert("Hello");
}
};
// method shorthand looks better, right?
let user = {
*!*
sayHi() { // same as "sayHi: function()"
*/!*
alert("Hello");
}
};
```
As demonstrated, we can omit a colon with the word `"function"`.
To say the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred.
## "this" in methods
It's common that an object method needs to access the information stored in the object to do its job.
For instance, `user.sayHi()` may need to mention the name of the user.
**To access the object, a method can use the `this` keyword.**
The value of `this` is the object "before dot", the one used to call the method.
For instance:
```js run
let user = {
name: "John",
age: 30,
sayHi() {
*!*
alert( this.name ); // "this" means "this object"
*/!*
}
};
user.sayHi(); // John
```
Here during the execution of `user.sayHi()`, the value of `this` will be `user`.
Technically, it's also possible to access the object without `this`:
```js
...
sayHi() {
alert( *!*user.name*/!* );
}
...
```
...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object.
That's demonstrated below:
```js run
let user = {
name: "John",
age: 30,
sayHi() {
*!*
alert( user.name ); // leads to an error
*/!*
}
};
let admin = user;
user = null; // overwrite to make things obvious
admin.sayHi(); // wops! inside sayHi(), the old name is used! error!
```
If we used `this.name` instead of `user.name` inside the `alert`, then the code would work.
## "this" is free
In Javascript, "this" keyword behaves unlike most other programming languages.
The "this" keyword can be used in any function. There's no syntax error in the code like that:
```js
function sayHi() {
alert( this.name );
}
```
It is fully syntactically free. The value of `this` will be evaluated during the run-time.
For instance, the function may have different "this" when called in contexts of different objects:
```js run
let user = { name: "John" };
let admin = { name: "Admin" };
function sayHi() {
alert( this.name );
}
// use the same functions in two objects
user.f = sayHi;
admin.g = sayHi;
// these calls have different this
// "this" inside the function is the object "before the dot"
user.f(); // John (this == user)
admin.g(); // Admin (this == admin)
admin['g'](); // Admin (dot or square brackets access the method – doesn't matter)
```
Actually, we can call the function without an object at all:
```js run
function sayHi() {
alert(this);
}
sayHi();
```
In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
Please note that usually a call like this is not normal, but rather a programming mistake. If a function has `this`, then it is usually to be called in the context of an object.
In a non-strict mode, if you forget `use strict` (let's hope you don't), then the value of `this` for a function without an object will be the *global object* (`"window"` for browser). We'll return to it later, but in a completely different chapter, because here it's just an odd thing of the previous standard that `"use strict"` fixes.
## Reference Type
An intricate method call can loose `this`, for instance:
```js run
let user = {
name: "John",
hi() { alert(this.name); },
bye() { alert("Bye"); }
};
user.hi(); // John (the simple call works)
*!*
// now let's call user.hi or user.bye depending on the name
(user.name == "John" ? user.hi : user.bye)(); // Error!
*/!*
```
On the last line the method `user.hi` is retrieved during the execution of the ternary `?`, and immediately called with brackets `()`. But that doesn't work right. You can see that the call results in an error, cause the value of `"this"` inside the call becomes `undefined`.
Actually, anything more complex than a simple `obj.method()` (or square brackets here) looses `this`.
If we want to understand why it happens -- the reason is in the details of how `obj.method()` call works.
The method call is not a single thing. It has two successive operations in it:
- the dot `'.'` retrieves the property
- brackets `()` execute it (assuming that's a function).
So, you might have already asked yourself, why does it work? That is, if we put these operations on separate lines, then `this` will be lost for sure:
```js run
let user = {
name: "John",
hi() { alert(this.name); }
}
*!*
// split getting and calling the method in two lines
let hi = user.hi;
hi(); // Error, because this is undefined
*/!*
```
That's because a function is a value of its own. It does not carry the object. So `hi = user.hi` saves it into the variable, and then on the last line it is completely standalone.
To make `user.hi()` calls work, Javascript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).
The Reference Type is a "specification type". We can't explicitly access it, but it is used internally by the language.
The value of the Reference Type is a combination `(base, name, strict)`, where:
- `base` is the object.
- `name` is the property.
- `strict` is true if `use strict` is in effect.
The result of a property access `'.'` is a value of the Reference Type. For `user.hi` in strict mode it is:
```js
// Reference Type value
(user, "hi", true)
```
When brackets `()` are called on the Reference Type, they receive the full information about the object and it's method, and can set the right `this` (`=user` in this case).
Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "looses" `this`.
So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj[method]()` syntax (they do the same here).
## Explicit "this" with "call/apply" [#call-apply]
The value of `this` does not have to come from the aforementioned rules.
We can explicitly set it to any object using `func.call`.
The syntax is:
```js
func.call(context, arg1, arg2, ...)
```
For instance:
```js run
function sayHi() {
alert(this.name);
}
let user = { name: "John" };
let admin = { name: "Admin" };
// use call to pass different objects as "this"
sayHi.call( user ); // John
sayHi.call( admin ); // Admin
```
The first parameter of `call` is the intended value of `"this"`, the latter are arguments.
So `sayHi.call(admin)` runs the function `sayHi` with `this = admin`, hence `this.name` in it becomes `"Admin"`.
These calls are roughly equivalent:
```js
func(1, 2, 3);
func.call(obj, 1, 2, 3)
```
They both call `func` with arguments `1`, `2` and `3`. The only difference is that `call` also sets `"this"`.
The method `func.call` is used when we'd like to use a function in the context of different objects, but do not want to actually assign it to them. We'll see more examples of it soon.
### "func.apply"
There's also a similar method `func.apply`:
```js
func.apply(context, args)
```
It does the same as `call`: executes the function providing `context` as `this`, but where `call` awaits a list of arguments, `apply` awaits an array.
These two calls do the same:
```js
func.call(obj, 1, 2, 3);
func.apply(obj, [1, 2, 3]);
```
In old times `apply` was more powerful, because it allows to create the array of arguments dynamically. Their number is not hardcoded at code-write time.
But in the modern language, we have the spread operator `'...'` and can use it to convert an array into a list of for `call`, so these two are equal:
```js
let args = [1, 2, 3];
func.call(obj, ...args);
func.apply(obj, args);
```
Nowadays the use of `apply` or `call` is mainly a metter of personal preference. But `apply` is somewhat better optimized in engines than the call + spread combination, because it exists longer. So it would execute a little bit faster.
## Binding "this" with "bind"
There's still a way to bind "this" to a function.
[todo] migrate bind here????
## Summary
[todo]