up
This commit is contained in:
parent
5372c18379
commit
3defacc09d
314 changed files with 1761 additions and 1704 deletions
|
@ -226,7 +226,7 @@ As we see from the code, the assignment to a primitive `5` is ignored. If we wan
|
|||
````
|
||||
|
||||
|
||||
## Property name shorthand
|
||||
## Property value shorthand
|
||||
|
||||
In real code we often use existing variables as values for property names.
|
||||
|
||||
|
@ -270,7 +270,6 @@ let user = {
|
|||
};
|
||||
```
|
||||
|
||||
|
||||
## Existance check
|
||||
|
||||
A notable objects feature is that it's possible to access any property. There will be no error if the property doesn't exist! Accessing a non-existing property just returns `undefined`. It provides a very common way to test whether the property exists -- to get it and compare vs undefined:
|
||||
|
|
|
@ -9,7 +9,7 @@ let user = {
|
|||
};
|
||||
```
|
||||
|
||||
And, in the real world, a user can `act`: to select something from the shopping cart, to login, to logout etc.
|
||||
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.
|
||||
|
||||
|
@ -65,22 +65,22 @@ 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.
|
||||
|
||||
```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".
|
||||
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.
|
||||
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.
|
||||
```
|
||||
### Method shorthand
|
||||
|
||||
There exists a shorter syntax for methods in an object literal:
|
||||
|
||||
```js
|
||||
```js
|
||||
// these objects do the same
|
||||
|
||||
let user = {
|
||||
sayHi: function() {
|
||||
sayHi: function() {
|
||||
alert("Hello");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// method shorthand looks better, right?
|
||||
let user = {
|
||||
|
@ -89,10 +89,10 @@ let user = {
|
|||
*/!*
|
||||
alert("Hello");
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
As demonstrated, we can omit `"function"` and just write `sayHi()`.
|
||||
As demonstrated, we can omit `"function"` and just write `sayHi()`.
|
||||
|
||||
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.
|
||||
|
||||
|
@ -128,10 +128,10 @@ 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
|
||||
```js
|
||||
...
|
||||
sayHi() {
|
||||
alert( *!*user.name*/!* );
|
||||
alert( *!*user.name*/!* );
|
||||
}
|
||||
...
|
||||
```
|
||||
|
@ -164,14 +164,14 @@ If we used `this.name` instead of `user.name` inside the `alert`, then the code
|
|||
|
||||
## "this" is not bound
|
||||
|
||||
In Javascript, "this" keyword behaves unlike most other programming languages. First, it can be used in any function.
|
||||
In Javascript, "this" keyword behaves unlike most other programming languages. First, it can be used in any function.
|
||||
|
||||
There's no syntax error in the code like that:
|
||||
|
||||
```js
|
||||
function sayHi() {
|
||||
alert( *!*this*/!*.name );
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The value of `this` is evaluated during the run-time. And it can be anything.
|
||||
|
@ -210,16 +210,16 @@ function sayHi() {
|
|||
sayHi();
|
||||
```
|
||||
|
||||
In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
|
||||
In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error.
|
||||
|
||||
In non-strict mode (if you forgot `use strict`) the value of `this` in such case will be the *global object* (`"window"` for browser, we'll study it later). This is just a historical thing that `"use strict"` fixes.
|
||||
In non-strict mode (if you forgot `use strict`) the value of `this` in such case will be the *global object* (`"window"` for browser, we'll study it later). This is just a historical thing that `"use strict"` fixes.
|
||||
|
||||
Please note that usually a call of a function using `this` without an object is not normal, but rather a programming mistake. If a function has `this`, then it is usually meant to be called in the context of an object.
|
||||
|
||||
```smart header="The consequences of unbound `this`"
|
||||
If you come from another programming languages, then you are probably used to an idea of a "bound `this`", where methods defined in an object always have `this` referencing that object.
|
||||
|
||||
The idea of unbound, run-time evaluated `this` has both pluses and minuses. From one side, a function can be reused for different objects. From the other side, it's possible to occasionally loose `this` by making an improper call.
|
||||
The idea of unbound, run-time evaluated `this` has both pluses and minuses. From one side, a function can be reused for different objects. From the other side, greater flexibility opens a place for mistakes.
|
||||
|
||||
Here we are not to judge whether this language design decision is good or bad. We will understand how to work with it, how to get benefits and evade problems.
|
||||
```
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives.
|
||||
|
||||
But we left a gap for objects. Now let's fill it.
|
||||
But we left a gap for objects. Now let's close it. And, in the process, we'll see some built-in methods and the example of a built-in symbol.
|
||||
|
||||
[cut]
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue