Wpis z mikrobloga

#javascript #javascriptquiz #js

Mały wieczorny quiz :> łatwy w sumie. Mamy sobie taki oto fragment kodu:

var x = {0: "bar"};
var y = ["bar"];
Tablice w JS to, jak wszyscy wiemy, po prostu obiekty, które jednak różnią się ciutkę od obiektów - przede wszystkim wewnętrzną właściwością [[Class]], która sprawia, że

Object.prototype.toString.call(x)
>"[object Object]"
Object.prototype.toString.call(y)
>"[object Array]"
ale także niektóre metody nie zadziałają na zwykłych obiektach

Array.prototype.slice.call(x,0)
>[ ]
Array.prototype.slice.call(y,0)
>["bar"]
Wypiszmy obie zmienne w konsoli

console.log(x)
>Object {0: "bar"}
console.log(y)
>["bar"]
Różnica jest, nie da się ukryć.

Teraz zdefiniujmy obiekt x1, którego definicję ukryję, bo inaczej cały quiz nie miałby sensu :>

var x1 = /* tutaj dzieje sie magia */;
x1 jest nadal "tylko" obiektem, co potwierdza zbadanie właściwości [[Class]]

Object.prototype.toString.call(x1)
>"[object Object]"
ale, ale, zaraz!

Array.prototype.slice.call(x1,0)
>["bar"]
console.log(x1)
>["bar"]
Magia! Teraz pytanie: co takiego stało się z obiektem x1, ze parser widzi go jako tablicę? Odpowiedź w spoilerze poniżej


okazuje się, że wystarczy do obiektu dodać własności length (number) i splice (function), żeby stał się on array-like object, który zachowuje się jak tablica, mimo że w sumie nie jest tablicą. Przykładowe, praktyczne zastosowania? Niestety, nie umiem żadnych wymyślić na szybko :< natomiast warto wiedzieć, że takim właśnie array-like objectem jest chociażby obiekt arguments, tworzony przy każdym wywołaniu prawie dowolnej funkcji (wyjątkami są funkcje które mają zadeklarowane zmienne lokalne o nazwie arguments lub parametr o takiej nazwie), są nimi kolekcje zwracane przez API DOM czy obiekt zwracany przez selektor jQuery (od którejś tam wersji jeśli dobrze pamiętam). No, to tyle, trudne to w sumie nie było :D

  • 11
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@Nadrill: JavaScript jak się wie co się robi (bo są różne chore konstrukcje, wynik kompatybilności wstecznej) jest porządnym językiem programowania - V8 jest w cholerę wydajnym kompilatorem, Firefox został w tyle, ale wraz z asm.js pewnie wróci do gry.
  • Odpowiedz
@Marmite: jestem dupą z js, (umarłbym bez jquery), ale sądziłem, że wszystkie prototypy mają własność lenght już "gotową", o co chodzi z dodawaniem jej
  • Odpowiedz
@entrop: No jak definiujesz sobie tablicę (czyli de facto tworzysz obiekt korzystając z funkcji konstruującej Array()) no to on ma własność length z automatu, inne obiekty takiej własności nie mają, ale nic nie stoi na przeszkodzie żeby ją dodać.

umarłbym bez jquery


W połaczeniu z pluginami to do webdevu w sumie spokojnie wystarczy, ale ogólnie nigdy nie rozumiałem idei uczenia się frameworka, jeśli się nie zna języka. No ale to
  • Odpowiedz
@Marmite: mam tak tylko z jsem. potrzebowałem go "już umieć" więc wybrałem szybką ścieżkę z frameworkiem, który ktoś tutaj niedawno określił ładnie "jest prosty jak j-----e" . dopiero od niedawna sobie kupiłem ze dwie książki i staram się poznać go od podstaw. ale to taka raczej sucha wiedza, nie mam w większości jak jej wykorzystać póki co.
  • Odpowiedz
jest prosty jak j-----e


@entrop: Hahahaha, zrobiło mój dzień :D no znajomość JS od strony czystego JS to się raczej przydaje w jakichś zaawansowanych webappach, które coś tam liczą zakulisowo. Chociaż przyznaję, ze pewnie zdecydowana większość przykładów użycia go to webdev.

Jeśli o książkach mowa, to żeby poznać go dokładnie od podstaw polecam "JavaScript: The Good Parts" Douglasa Crockforda.
  • Odpowiedz