Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Можете ли вы понять эту проблему указывания JS? взгляните на эту статью

Автор：Eve Cole Время обновления：2022-09-03 09:02:53
Можете ли вы понять эту проблему указывания в JavaScript? В следующей статье мы поговорим об этой неприятной проблеме с наведением. Надеюсь, она будет вам полезна!

Как быстро начать работу с VUE3.0: Изучите

указание this.

В различных введениях, которые мы видели, как определить метод указания this, предложение «это в конечном итоге указывает на объект, который его вызывает». ядро, но перед лицом Мы склонны путаться в самых разных ситуациях. Основываясь на моем понимании различных ситуаций, я выдвинул предложение : «Стрелки, время и структура, смотрите на особые ситуации, смотрите на номер точки для обычных вызовов, не смотрите вперед для более поздних точек, а затем судите по ближайшему принципу, и последнее, что осталось — это окно» .

Стрелочная функция

Сама по себе стрелочная функция не имеет этого изменения, поэтому она фиксирует внешнее значение this с помощью

var name = "windowsName";
вар а = {
    название: "Вишня",
    фн() {
      setTimeout(()=>{
        console.log(это.имя); 
      },0)
    }
}

a.fn() //Анализ Cherry

: сначала объект a вызывает функцию fn, так что this из функции fn указывает на объект a, а затем стрелка захватывает внешний this, тогда в setTimeout это не this, а this из функцию fn, поэтому в конце получите имя в объекте a.

Таймер

этой функции обратного вызова внутри функции задержки указывает на окно глобального объекта

var name = "windowsName";
вар а = {
    название: "Вишня",
    фн() {
      setTimeout(функция (){
        console.log(это.имя); 
      },0)
    }
}

a.fn() //

анализ имени окна: сначала объект a вызывает функцию fn, а затем функция обратного вызова в setTimeout здесь является анонимной функцией, которая является обычной функцией. Затем это в анонимной функции указывает на

имя окна var =. "имя окна";
вар b={
  имя: "setTimeoutName"
}
вар а = {
    название: "Вишня",
    фн() {
      setTimeout((функция (){
        console.log(это.имя); 
      }).bind(б),0)
    }
}

a.fn() // анализ setTimeoutName

: сначала объект a вызывает функцию fn, а затем функция обратного вызова в setTimeout здесь является анонимной функцией, которая является обычной функцией. Затем это в анонимной функции указывает на окно, но. используйте привязку для изменения анонимной функции. This указывает на объект b, поэтому

конструктор

имени

в объекте b, наконец, указывает на созданный объект экземпляра в конструкторе.

Примечание. Если объект возвращается в конструкторе, нового экземпляра не будет. объект при создании, но этот Объект, возвращаемый

функцией fn(){
  this.age = 37;
}

вар а = новый ФН ();
console.log(a.age); // 37;
а.возраст = 38;
console.log(fn); // { this.age = 37;
console.log(a.age); // 38

Анализ: здесь мы создаем объект экземпляра a через конструктор, что эквивалентно открытию нового места и копированию содержимого конструктора. Затем у нас есть объект At. раз это указывает на объект. a, наша модификация содержимого в объекте a не влияет на вынесение

решения о количестве

точек конструктора

. Оцените этот момент и следуйте принципу близости

var a = {.
  возраст: 10,
  б: {
      возраст: 12,
      фн(){
          console.log(this.age); 
      }
  }
}
abfn(); //12

Анализ: объект a вызывает функцию fn объекта b. Перед функцией fn стоят два . Тогда ближайший из них — объект b, поэтому эта функция fn указывает на объект b, и последнее, что получено, — это возраст объекта b

var a = {
.
  возраст: 10,
  б: {
      возраст: 12,
      фн(){
          console.log(this.age); //не определено
      }
  }
}
вар c = {
  возраст: 20,
}

вар d = {
  возраст: 30,
}
abfn.bind(c).bind(d)(); //20

анализ: объект a вызывает функцию fn объекта b, а затем использует привязку для изменения направления. В это время fn имеет . независимо от предыдущего . Просто посмотрите назад, а затем последняя привязка меняет эту точку на c, тогда эта точка функции fn является объектом c, и вы получаете функцию возрастной

практики

externalFunc() {
из объект с
   console.log(this) // { x: 1 }
   функция func() {
    console.log(this) // Окно 
   }
   веселье()
} 

externalFunc.bind({ x: 1 })()
obj = {
  функция() {
    константная стрелкаFunc = () => {
      console.log(this._name)
    }

    возврат стрелкаFunc
  },

  _name: "объект",
}

obj.func()() //объект

func = obj.func
func()() //не определено

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //не определено

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

применить, вызвать, привязать.

Используйте функции Apply, Call и Bind, чтобы изменить направление. this. Вышеупомянутое this

Разница между

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

используется в примере.

Разница между функциями apply и call заключается в параметрах, передаваемых после этого. в apply - это массив, и то, что передается в вызове. Это расширенный параметр

bind(thisArg[, arg1[, arg2[, ...]]])()

  • , и функция связывания создает новую функцию
  • . для вызова вручную. this обозначается как bind() . Первый параметр, а остальные параметры будут использоваться в качестве параметров новой функции для использования при вызове.

Если есть какие-либо ошибки, пожалуйста, исправьте меня! ! Спасибо всем за чтение!

Справочный материал

https://juejin.cn/post/6946021671656488991#comment

[Рекомендации по соответствующему видеоуроку: веб-интерфейс]

Выше описано, как можно понять проблему указывания в JS? Ознакомьтесь с подробностями этой статьи. Для получения дополнительной информации обратите внимание на другие статьи по теме на китайском веб-сайте php!

Связанные статьи