Ключевое слово this. Методы bind, call, apply

Вводная информация

this и объекты

• 1. В об-тах this указывает на об-т, в области видимости которого вызывается

  Листинг 1. this в об-тах

          const obj = {
              name: 'Max',
              getName(){
                  /*
                      ВНУТРИ ОБ-ТА this УКАЗЫВАЕТ НА САМ ОБ-Т
  
                      ТО ЕСТЬ this.name ЯВЛЯЕТСЯ ЭКВИВАЛЕНТОМ obj.name 
                  */
                  return this.name
              }
          }

• 2. Из пункта 1 очевидно, что this вызванный в глобальной области видимости, будет указывать на глобальный об-т window

  Листинг 2. this и область видимости

          // this НАХОДИТСЯ В РАМКАХ ОБЛАСТИ ВИДИМОСТИ ОБ-ТА obj,
          // А ЗНАЧИТ УКАЗЫВАЕТ НА НЕГО
          const obj = {
              getThis(){
                  return this
              }
          }
  
          console.log( obj.getThis() ) // this = obj
  
          // this НАХОДИТСЯ В РАМКАХ ГЛОБАЛЬНОЙ ОБЛАСТИ ВИДИМОСТИ (т.е. в области видимости об-та window),
          // А ЗНАЧИТ УКАЗЫВАЕТ НА НЕГО
          console.log( this ) // this = window

this и ф-ции

• 1. Когда движок JS идёт по коду сверху вниз (интерпретирует код), на каждую ф-цию он составляет свой контекст вызова. Контекст вызова - своеобразный "документ", который полностью описывает функцию и всё, что с ней связано, а именно содержит информацию:

  • имя ф-ции
  • аргументы ф-ции
  • где ф-ции в стеке вызова
  • на что ссылается this в привязке к данной ф-ции
  • и т.д.

• 2. На, что указывает this в данной конкретной ф-ции зависит от:

  • строгий ("use strict") или не строгий режим
  • вызывается ли ф-ция через оператор new или обычным способом

  Листинг 3. this и ф-ции - базовый пример

          // 1. ВЫЗОВ В СТРОГОМ РЕЖИМЕ
          function fn(){
              "use strict"
              console.log(this)
          }
  
          fn() // this = undefined
  
  
          // 2. ВЫЗОВ В ОБЫЧНОМ РЕЖИМЕ
          function fn2(){
              console.log(this)
          }
  
          fn2() // this = window
  
  
          // 3. ВЫЗОВ С ПОМОЩЬЮ ОПЕРАТОРА new - Т.Е. ВЫЗОВ КОНСТРУКТОРА Ф-ЦИИ
          function fn3(){
              console.log(this)
          }
  
          new fn3() // this = текущая ф-ция fn3

• 3. Контекст вызова можно подменять с помощью методов bind, call, apply, а значит переопределять об-т на, который будет указывать this данной ф-ции

  • bind - привязывает указанный this к ф-ции, но не вызывает её (возвращает ф-цию)
    

    Листинг 4. bind - привязывает this к ф-ции, возвращает новую ф-цию

            function fn() {
                    console.log( this.a )
                }
        
                const obj = {
                    a: 2
                }
        
                // this.a ищет window.a, т.к. в не строгом режиме в ф-циях this = window       
                fn()   // т.к. window.a не существует, то выводит undefined
                
                // this.a ищет obj.a 
                // т.к. переопределяем this с window на об-т obj
                const _fn = fn.bind(obj)
                _fn()  // 2

  
  
  • call - привязывает указанный this к ф-ции и вызывает её с указанными аргументами
    

    Листинг 5. call - привязывает this к ф-ции и вызывает её. Также можно передавать список аргументов

            function fn() {
                console.log(this.a + this.b)
            }
    
            const obj = {
                a: 2,
                b: 3
            }
    
            // this.a ИЩЕТ window.a, 
            // this.b ИЩЕТ window.b
            // Т.К. В НЕ СТРОГОМ РЕЖИМЕ В Ф-ЦИЯХ this = window       
            fn() // Т.К. window.a И window.b НЕ СУЩЕСТВУЕТ, ТО ВЫВОДИТ undefined + undefined = NaN 
    
            // МЕНЯЕМ this = window НА this = obj
            // ТАКИМ ОБРАЗОМ this.a = obj.a И this.a = obj.a 
            fn.call(obj)

    Листинг 6. call - вместо this можно передавать что угодно

            function fn(a, b) {
                console.log(a + b)
            }
    
    
            // ВЫЗОВ ДВУХ ФУНКЦИЙ НИЖЕ ИДЕНТИЧЕН
    
            fn(5,6)
    
            // ТУТ ВЫСТАВЛЯЕМ this В null
            fn.call(null, 5, 6)

  
  
  • apply - привязывает указанный this к ф-ции и вызывает её с указанными аргументами, которые передаются в виде массива
    

    Листинг 7. apply - то же самое, что и call, но аргументы передаются массивом

            function fn(a, b) {
                console.log(a + b)
            }
    
    
            // ВЫЗОВ ДВУХ ФУНКЦИЙ НИЖЕ ИДЕНТИЧЕН
    
            fn(5,6)
    
            // ТУТ ВЫСТАВЛЯЕМ this В null
            fn.apply(null, [5, 6])

  
  
  Более сложные примеры по bind, call и apply см в документации и документе objects-inheritance.html

• 4. Стрелочные ф-ции не имеют своего контекста this, а значит this в них указывает на об-т родительской области видимости (если у неё есть свой контекст), по отношению к области видимости, где были созданы (! не вызваны). Раз у них нет своего контекста вызова this, то его нельзя и подменить с помощью методов bind, call, apply.

  Листинг 8. Стрелочные ф-ции и this - простые примеры

          "use strict";
  
          // стрелочная
          const fn = () => {            
              console.log(this)
          }
  
          // обычная
          function fnc(){
              console.log(this)
          }
  
          fn()   // window
          fnc()  // undefined

  
  

  Листинг 9. Стрелочные ф-ции и this - более cложные примеры

          const fn = () => {
              console.log(this)
          }
  
          const fn2 = () => {
              const fn = () => {
                  console.log(this)
              }
              fn()
          }
  
          function fn3() {
              "use strict";
              const fn = () => {
                  console.log(this)
              }
              fn()
          }
  
  
          /*
              this = window
              
              т.к. fn - стрелочная и не имеет своего контекста this => this
              "проскакивает" вверх в родительскую для fn область видимости глобального об-та window, 
              который имеет свой контекст this
          */
          fn()
  
          /*
              this = window
  
              тут this "проскакивает" вверх и находит fn2, область видимости которой явл 
              родительской для fn, НО т.к. fn2 также является стрелочной ф-цией и не имеет
              своего контекста this, то this "проскакивает" дальше наверх и упирается в
              область видимости глобального об-та window, 
              который уже имеет свой контекст this
          */
          fn2()
  
          /*
              this = undefined (в строгом режиме)
              
              fn3 - классическая ф-ция, которая имеет свой контекст this, а значит
              this в fn будет указывать на её this, 
              который в режиме "use strict" будет равен undefined
          */
          fn3()
  
          /*
              this = fn3
              
              fn3 - классическая ф-ция, которая имеет свой контекст this, а значит
              this в fn будет указывать на её this,
              который при вызове через ключевое слово new будет равен об-ту самой ф-ции
          */
          new fn3()

• 5. Если ф-ция вызывается с помощью оператора new, то её this всегда указывает на об-т этой ф-ции. Подробнее см документ function-constructor.html

this и события DOM

• 1. this в ф-ции - коллбеке события, указывает на элемент, на котором оно срабатывает

Листинг 10. в ф-ции - коллбеке события, this указывает на DOM элемент, на который было установлено событие

клик



        <button class="btn shadow">клик</button>

        // ЕСЛИ СОБЫТИЕ СТАВИТСЯ НА САМ ЭЛЕМЕНТ, ТО 
        // this = e.currentTarget
        document.getElementsByTagName('button')[0].addEventListener('click',function(e){
            console.log(this === e.currentTarget)
            this.classList.toggle("btn-primary")
        })
        

        // ЕСЛИ В КАЧЕСТВЕ КОЛЛБЕКА ИСПОЛЬЗУЕТСЯ СТРЕЛОЧНАЯ Ф-ЦИЯ
        // ТО ЕЁ this БУДЕТ СООТВЕТСТВЕННО УКАЗЫВАТЬ НА РОДИТЕЛЬСКИЙ ОБ-Т
        // В ДАННОМ СЛУЧАЕ ЭТО window
        document.getElementsByTagName('button')[0].addEventListener('click',(e) => {

            console.log(this === window)

            // НЕ ИМЕЕТ СМЫСЛА
            // this.classList.toggle("btn-primary")
        })