├── GlobalLocalScope.js
├── ContextInsideAFunction.js
├── browser
├── index.js
└── index.html
├── ContextInsideAMethod.js
├── ContextClass.js
├── apply.js
├── arrow.js
├── ContextFunctionInsideFunction.js
├── bind.js
├── call.js
└── README.md
/GlobalLocalScope.js:
--------------------------------------------------------------------------------
1 | // global scope
2 | this.name = "Diego";
3 |
4 | function sayMyName() {
5 | // local scope
6 | console.log(this.name); // undefined
7 | }
8 |
9 | sayMyName();
10 |
--------------------------------------------------------------------------------
/ContextInsideAFunction.js:
--------------------------------------------------------------------------------
1 | // context inside a function
2 | // - não pega o this global, mas se não estiver no modo estrito, sim!
3 |
4 | this.name = "Enzo";
5 |
6 | function sayMyName() {
7 | console.log(this.name);
8 | }
9 |
10 | sayMyName();
11 |
--------------------------------------------------------------------------------
/browser/index.js:
--------------------------------------------------------------------------------
1 | this.name = "Valeska";
2 |
3 | function sayMyName() {
4 | console.log(this.name);
5 | }
6 |
7 | const user = {
8 | sayMyName: function() {
9 | console.log(this.name);
10 | }
11 | };
12 |
13 | user.sayMyName();
14 |
15 | console.log(window.name);
16 |
--------------------------------------------------------------------------------
/ContextInsideAMethod.js:
--------------------------------------------------------------------------------
1 | // context inside a method
2 | // - não pego o this global, somente do objeto.
3 |
4 | this.name = "João";
5 |
6 | const dev = {
7 | name: "Cleiton",
8 | sayMyName: function() {
9 | console.log(this.name); // Cleiton
10 | }
11 | };
12 |
13 | dev.sayMyName();
14 |
--------------------------------------------------------------------------------
/ContextClass.js:
--------------------------------------------------------------------------------
1 | // context class
2 | // - o this está disponível por toda a classe.
3 |
4 | class Alo {
5 | constructor() {
6 | this.hello = "Olá";
7 | }
8 |
9 | sayHello() {
10 | console.log(this.hello);
11 | }
12 | }
13 |
14 | const hello = new Alo();
15 |
16 | hello.sayHello();
17 |
--------------------------------------------------------------------------------
/apply.js:
--------------------------------------------------------------------------------
1 | // function.apply(this, [arg1, arg2])
2 | // retorna o this do contexto que eu enviar.
3 |
4 | function multiply() {
5 | const args = Array.from(arguments);
6 | this.total = args.reduce((acc, item) => {
7 | return acc * item;
8 | }, 1);
9 | }
10 |
11 | multiply.apply(this, [2, 2, 3, 2]);
12 | console.log(this.total);
13 |
--------------------------------------------------------------------------------
/browser/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/arrow.js:
--------------------------------------------------------------------------------
1 | // this na arrow function
2 | // - pega this do escopo anterior.
3 |
4 | this.name = "Valeska";
5 |
6 | const age = age => {
7 | const birthYear = age => {
8 | const year = 2019 - age;
9 | console.log(this.name, year);
10 | };
11 |
12 | birthYear(age);
13 | };
14 |
15 | const dev = {
16 | sayMyName: () => {
17 | this.name = "Enzo";
18 | }
19 | };
20 |
21 | dev.sayMyName();
22 |
23 | console.log(this.name);
24 |
--------------------------------------------------------------------------------
/ContextFunctionInsideFunction.js:
--------------------------------------------------------------------------------
1 | // context function inside a function
2 | // - não pega this global
3 |
4 | this.name = "Valeska";
5 |
6 | function age(age) {
7 | this.name = "Joshua";
8 |
9 | function birthYear(age) {
10 | this.name = "Kyam";
11 |
12 | const year = 2019 - age;
13 | console.log(this.name, year);
14 | }
15 |
16 | birthYear(age);
17 |
18 | console.log(this.name);
19 | }
20 |
21 | age(25);
22 |
23 | console.log(this.name);
24 |
--------------------------------------------------------------------------------
/bind.js:
--------------------------------------------------------------------------------
1 | // bind = ligar
2 | // retorna a função chamanda, porém ligada ao contexto que lhe foi passado.
3 | // bound function
4 |
5 | this.name = "Camila";
6 | this.age = 25;
7 |
8 | function sayMyName(age) {
9 | this.age = age;
10 | console.log(this.name, this.age);
11 | }
12 |
13 | const dev = {
14 | name: "Isabela",
15 | age: 35,
16 | sayMyAge: function() {
17 | console.log(this.name, this.age);
18 | }
19 | };
20 |
21 | const age = dev.sayMyAge.bind(this);
22 |
23 | age();
24 |
--------------------------------------------------------------------------------
/call.js:
--------------------------------------------------------------------------------
1 | // function.call(this, arg1, arg2)
2 | // call do inglês chamar
3 | // retorna o this do contexto que eu enviar.
4 |
5 | this.name = "Camila";
6 | this.age = 25;
7 |
8 | function sayMyName(age) {
9 | this.age = age;
10 | console.log(this.name, this.age);
11 | }
12 |
13 | const dev = {
14 | name: "Isabela",
15 | age: 35,
16 | sayMyAge: function() {
17 | console.log(this.name, this.age);
18 | }
19 | };
20 | sayMyName.call(this, 18);
21 | sayMyName.call(dev, 19);
22 |
23 | console.log(dev.age);
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # this (javascript)
2 |
3 | ## O que é "this"?
4 |
5 | `this` em inglês significa: `isto, esta`
6 |
7 | Automaticamente somos levados a pensar: Isto o que? Esta o que?. Assim, precisamos estar situados em algum contexto para entender o `this`.
8 |
9 | Imagine que você está na sua casa, com sua família. E você chega na sua família e fala: "Eu amo **esta** casa". Você não diz que ama outra casa, e não está se referindo a outra casa. Aí vc toca na mesa e diz: "Eu amo **essa** mesa, **esse** sofá, amo **isto** tudo". No contexto da casa, você possui e se refere a estas coisas.
10 |
11 | O `this` em javascript possui a mesma ideia.
12 |
13 | O comportamento dele depende do contexto `context` ou do escopo `scope`.
14 |
15 | Como no exemplo da casa, o `this` pode ser a casa, pode ser o sofá ou a mesa. O que vai dizer o que significa o `this` é o contexto.
16 |
17 | O comportamento do `this` depende, então do:
18 |
19 | 1. Escopo e Contexto
20 | 2. Modo Estrito
21 |
22 | ---
23 |
24 | ## 1 Escopo vs Contexto
25 |
26 | - Escopo (scope)
27 |
28 | - **Acesso** às variáveis, funções e objetos numa parte do código, durante o tempo de execução.
29 | - Determina a **visibilidade** desses recursos em alguma parte do código.
30 | - Sempre invocamos uma função, estamos criando um novo `scope`
31 |
32 | - Contexto (context)
33 |
34 | - Enquanto o `scope` se refere às diversas variáveis, o `context` se refere ao valor do `this` no mesmo `scope`
35 | - Pode ser mudado com funções especiais como: .apply(), .call() e .bind()
36 | - No contexto de execução `execution context` o contexto já não é mais esse contexto que estamos discutindo. Ele será o `scope`
37 |
38 | Temos 2 `scopes`:
39 |
40 | 1. Global
41 | 1. No momento que começamos a escrever código, estamos nesse contexto.
42 | 2. Existe enquanto existir a aplicação
43 | 2. Local
44 | 1. Dentro de alguma função, variáveis estão no escopo (contexto) local.
45 | 2. Existe equanto existir a função ou o objeto.
46 |
47 | ## 2 Modo Estrito (strict mode)
48 |
49 | - Muda a semântica do javascript
50 | - É opcional
51 | - `"use strict"` para habilitar no contexto
52 | - Elimina alguns erros silênciosos
53 | - Evita algumas confusões
54 | - Proíbe algumas sintaxes
55 |
56 | ---
57 |
--------------------------------------------------------------------------------