…ili šta znači ključna reč this i kada?

Jedna od najmoćnijih ključnih reči u JavaScript-u je this, ali je teško snaći se jer joj funkcija varira u zavisnosti u kom kontekstu se upotrebljava. Budući da je JS “classless” jezik – a ipak objektno orjentisan, function ima i ulogu konstruktora objekta (preporučeno praćenje konvencije da se ime konstruktora piše velikim početnim slovom). U ovakvom dvojnom svojstvu – dolazi do dualnog ponašanja ključne reči this, kao na primer:

function foo() <---- funkcija foo()
this.nekiVar; <---- global scope

function Foo() <---- konstruktor objekta
this.nekiVar; <---- svojstvo u konstruktoru

U prvom primeru unutar funkcije foo() ključna reč this se odnosi na “vlasnika” date funkcije, ili tačnije objekat čiji je foo() metod. Kada definišemo funkciju, ona je definisana na globalnom nivou, tj. ona je metod window (globalnog) objekta.
Nasuprot tog ponašanja, this dobija potpuno drugu funkcionalnost unutar konstruktora – ono se odnosi na svojstvo (property) unutar datog objekta.

Da nastavimo dalje – koristimo funkciju koja poziva promenljivu iz window objekta:

var nekiVar = 5;
function foo(){ alert(this.nekiVar); }
foo(); // alert sa ispisom 5

Dakle, iz primera se zaključuje se ključna reč this odnosi na globalni opseg, a this.nekiVar na promenljivu deklarisanu unutar tog opsega.
Sa druge strane, imamo primer sa konstruktorom objekta:

var nekiVar = 5;
function Foo() { this.nekiVar; }
var moo = new Foo(); // instanciramo novi objekat moo koji je tipa podataka Foo()
alert(moo.nekiVar); // alertuje se 'undefined'
moo.nekiVar = 6;
alert(moo.nekiVar); // alertuje se 6

Dakle vidimo da ključna reč this ni u jednom momentu ne referencira na promenljivu nekiVar u globalnom opsegu sa vrednošću 5.

Predstavljamo novi logo:

Hvala Goranu Babiću za dizajn i izradu!

A very common thing to do while developing/designing a page is highlighting a current object that your creative mind is focused, let’s say: a form. So, you want to conduct a great deal of stylesheet applying to it, make it’s width OK to colate with other elements and such, and you get a good idea to highlight it with 1px red border (my weapon of choice, mostly). Of course, almost always when you apply a style – even better a cetain class (more on that later) – that look’s like this:

.highlight { border: 1px solid red; }

You get your object wrapped in red border one pixel thick – but wham! Everything shifted. Why? Because – border play’s a role in overall picture.

Due to CSS box model, there are few things that are computed and can have variable values: margin, border, padding and a nominal width of an object. Is there a better way to highlight something?

Sure – outline. It’s similar to border – but with one difference – it doesn’t play part in overall width/height. So, it makes designing thing cosy, and spares your nerve. Change your class to following:

.highlight { outline: 1px solid red; }

Objects will still be highlighted with red box, but this time nothing shifts or collides – because outline doesn’t do part in width-game. Not even if you set it’s value to much more than 1px – but that’s useless, ugly and a different subject…

Also, a great thing to have a separate class for this matter, I personally used to add this line of code in every CSS selector that i needed highlighting, and after a staging period – that’s a lot of copy/paste, commenting that part of code and deleting afterwards. Save yourself some time – that’s what productivity is all about, which I learned thoroughly today from dr Tima Segedinac‘s class.

Thanks to Dušan Vesić today that mentioned this issue, which made me share it here.

Current turn of events: I’ve surfaced on WP. Kinda like the default design (so minimalistic), so I’m gonna stick around with it for a while.

Check out current projects that are under development in the ‘Current Projects’ subsection.


Get every new post delivered to your Inbox.