referencje, closure, this

referencje, closure, this

Bartosz Szczeciński

16.05.2018

@btmpl

medium.com/@baphemot

Zakres zmiennych

var test = 1;

var test = 2;

var test = 3;

test = 4;

test = 5;

console.log(test);

Zakres zmiennych

var test = 1;

function testFunction() {
    console.log('testFunction', test);
}

console.log('global', test);

testFunction();

console.log('global', test);

global 1
testFunction 1
global 1

Zakres zmiennych

var test = 1;

function testFunction() {
    var test = 2;
    console.log('testFunction', test);
}

console.log('global', test);

testFunction();

console.log('global', test);

global 1
testFunction 2
global 1

Zakres zmiennych

var test = 1;

function testFunction() {
    test = 2;
    console.log('testFunction', test);
}

console.log('global', test);

testFunction();

console.log('global', test);

global 1
testFunction 2
global 2

Jeżeli pominiemy var przy odczycie, parser sprawdzi czy zmienna jest już zadeklarowana, jeżeli nie, sprawdzi w zakresie wyżej (w tym przypadku - window)

Jeżeli pominiemy specyfikator var przy zapisie parser uznaje, że zmienna została już zadeklarowała i "szuka jej". Jeżeli nie znajdzie jej w zakresie, szuka jej w zakresie wyżej. Jeżeli nie znajdzie, tworzy lub zmienia na zakresie globalnym window.

Zakres zmiennych

var test = 1;

function testFunction() {
    var test = 2;
    console.log('testFunction', test);
}

console.log('global', test);

setTimeout(testFunction, 1000);

console.log('global', test);

global 1
global 1
testFunction 2

Zakres zmiennych

console.clear();
var test = 1;

function testFunction() {
    console.log('testFunction', test);
}

console.log('global', test);

setTimeout(testFunction, 1000);

console.log('global', test);

global 1
global 1
testFunction 1

Zakres zmiennych

console.clear();
var test = 1;

function testFunction() {
    console.log('testFunction', test);
}

console.log('global', test);

setTimeout(testFunction, 1000);

console.log('global', test);
test = 5;

global 1
global 1
testFunction 5

Zakres zmiennych

console.clear();
var test = 1;

console.log('global', test);

function zrobZakres() {
  var mojaZmienna = test;
  
  function testFunction() {
    console.log('testFunction', mojaZmienna);
  }
  
  setTimeout(testFunction, 1000);
}

zrobZakres();

console.log('global', test);
test = 5;

global 1
global 1
testFunction 1

Zakres zmiennych

console.clear();
var test = 1;



console.log('global', test);

(function() {
  var mojaZmienna = test;
  
  function testFunction() {
    console.log('testFunction', mojaZmienna);
  }
  
  setTimeout(testFunction, 1000);  
})();

console.log('global', test);
test = 5;

global 1
global 1
testFunction 1

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

person.getName();

Bartek

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

person.getName.call();

undefined

Funkcje .call i .apply jako pierwszy parametr przekazują this do wywoływanej funkcji. Jeżeli go nie przekażemy, podstawiony zostanie this z momentu wywołania (window)

Przypisanie this

var imie = 'Bartosz';
var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

person.getName.call();

Bartosz

Istnieje window.imie, więc window podstawione jako this posiada zmienną this.imie

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

person.getName.call(person);

Bartek

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

var kopiaFunkcji = person.getName;

kopiaFunkcji();

undefined

Funkcja kopiowana jest przez referencję, co w praktyce oznacza "wykonaj kopię ciała funkcji"

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

var otherPerson = {
    imie: 'Marcin'
}

var kopiaFunkcji = person.getName;

kopiaFunkcji.call(otherPerson);

Marcin

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

setTimeout(person.getName, 1000);

undefined

Przypisanie this

var person = {
    imie: 'Bartek',
    getName: function() {
        console.log(this.imie);
    }
}

setTimeout(person.getName.bind(person), 1000);

Bartek

.bind pozwala na trwałe przypisanie jakie this powinno zostać przekazane do funkcji