Wyjaśnienie [].plaster.wywołanie w javascript?

W javascript metody obiektu mogą być powiązane z innym obiektem w czasie wykonywania. W skrócie, javascript pozwala obiektowi "pożyczyć" metodę innego obiektu:

object1 = {
    name:'frank',
    greet:function(){
        alert('hello '+this.name)
    }
};

object2 = {
    name:'andy'
};

// Note that object2 has no greet method.
// But we may "borrow" from object1:

object1.greet.call(object2); // will show an alert with 'hello andy'

Metody call i apply obiektów funkcyjnych (w javascript funkcje są również obiektami) pozwalają na to. Więc w kodzie można powiedzieć, że Nodelist zapożycza metodę slice tablicy. Konwersja polega na tym, że slice zwraca inną tablicę jako wynik.

Pobiera funkcję slice z Array. Następnie wywołuje tę funkcję, ale używając wyniku {[2] } jako obiektu this zamiast rzeczywistej tablicy.

Jest to technika konwertowania obiektów podobnych do tablic na rzeczywiste tablice.

Niektóre z tych obiektów to:

• arguments w funkcjach
• NodeList (pamiętaj, że ich zawartość może ulec zmianie po pobraniu! tak więc konwersja ich do tablicy jest sposobem na ich zamrożenie)
• jQuery collections, aka jQuery objects (some doc: API, Typ, learn )

Służy to wielu celom, na przykład obiekty są przekazywane przez reference, natomiast tablice są przekazywane przez wartość.

Zauważ również, że pierwszy argument 0 można pominąć, dokładne wyjaśnienie tutaj .

I dla kompletności istnieje również jQuery.makeArray () .

Jak to konwertuje document.querySelectorAll('a') z NodeList do regularnej tablicy?

To jest kod, który mamy,

[].slice.call(document.querySelectorAll('a'), 0)

Najpierw go zdemontujmy,

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

Krok: 1 wykonanie call funkcji

• Wewnątrz call, poza thisArg, reszta argumentów zostanie dołączona do listy argumentów.
• teraz funkcja slice zostanie wywołana przez powiązanie jej wartości this jako thisArg (array like object pochodzi z document.querySelector) i z argumentem lista. tj. argument start zawierający 0

Krok: 2 wykonanie slice funkcji wywołanej wewnątrz call

• start zostanie przypisana do zmiennej s jako 0
• ponieważ end jest undefined, this.length będą przechowywane w e
• pusta tablica będzie przechowywana w zmiennej a

• Po wykonaniu powyższych ustawień nastąpi następująca iteracja

  while(s < e) {
    a.push(this[s]);
    s++;
  }
  

• wypełniona tablica a będzie zwrócony jako wynik.

P. S dla lepszego zrozumienia naszego scenariusza niektóre kroki niezbędne dla naszego kontekstu zostały zignorowane z oryginalnego algorytmu call i slice.

[].slice.call(document.querySelectorAll('.slide'));

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually.

3. The slice() method returns the selected elements in an array, as a new array object.

  so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.

<div class="slideshow">

  <div class="slide">
    first slider1
  </div>
  <div class="slide">
    first slider2
  </div>
  <div class="slide">
    first slider3
  </div>
  <div class="slide">
    first slider4
  </div>
  <div class="slide">
    first slider5
  </div>
  <div class="slide">
    first slider6
  </div>

</div>

<script type="text/javascript">

  var arraylist = [].slice.call(document.querySelectorAll('.slide'));

  alert(arraylist);

</script>

Z ES6: po prostu utwórz tablicę za pomocą tablicy .from (żywioł.dzieci) lub Array.from ({długość: 5})