предисловие
Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Всем привет! Я Лин Дуан!
Эта статья короткая... но точно не гидрология...
В основном я видел это в области комментариев.Я думаю, что это небольшой момент знаний, который мы обычно игнорируем, и письменный тест также может встретиться, поэтому я пишу его только как статью, пожалуйста, уделите 2 минуты, чтобы увидеть его, в случае это действительно дает, я столкнулся с этим 😁.
(Источник темы: Копаем друзейLazzw, спасибо этому маленькому другу за его предложение)
основная тема
Тема такая:
var obj = {
age: 18,
foo: function (func) {
func()
arguments[0]()
}
}
var age = 10
function temp () {
console.log(this.age)
}
obj.foo(temp)
Не продавайте, давайте сначала ответим:
10
undefined
До сих пор нас интересовали только наиболее часто используемые скрытые параметры в функциях.this, и этот вопрос на самом деле включает в себя еще один параметр, скрытый в функцииarguments.
Кратко объяснитьargumentsДавайте еще раз посмотрим на этот вопрос.
argumentsПараметр — это набор (структура, подобная массиву) всех параметров, переданных в функцию, как в следующих двух примерах:
function test1 () {
console.log(arguments)
}
function test2 (a) {
console.log(a)
console.log(arguments)
}
test1(1, 2)
test2(1, 2)
Результат выполнения:
[1, 2]
1
[1, 2]
Как видите, независимо от того, имеет ли ваша функция формальные параметры,argumentsполучит все аргументы, которые вы передали при вызове функции.
(а такжеargumentsсуществует только в обычных функциях,windowни в глобальном вниз, ни в стрелочных функциях)
Кроме того, мы знаем, что параметр, переданный функции, также может быть функцией, поэтому, пока это параметр,argumentsВы можете захватить его, даже если вы функция, вы не можете убежать, например:
function foo () {
arguments[0]()
}
function temp () {
console.log(this)
}
foo(temp) // Arguments [ƒ temp()]
Как и выше, кfoo()прошел вtempфункционировать и использоватьarguments[0]()Вызов его является исполняемым.
Самое интересное здесь, если хотитеtempЭто происходит, когда аргументы передаются и выполняется вызовПроблема потери неявной привязки(аналогичный«[Предложение👍] Давайте продолжим с еще 40 вопросами из этого интервью (1,2 Вт сортировки слов вручную)»темы в3.3), таким образомthisнаправлениеwindow:
function foo (fn) {
fn()
}
function temp () {
console.log(this)
}
foo(temp) // Window
И по темеarguments[0]():
(извините за предыдущееargumentsЯ ошибся, ниже приведено исправленное содержание, еще раз спасибоWill__может исправить мою ошибку)
И если метод, который вы собираетесь вызвать, находится в массиве (подобном массиву), то вызовите метод в функции в это время.thisназывается массив.
Например здесь:
var test = [function () { return this }]
console.log(test[0]() === test) // true
Как видите, первый элемент массива является функцией и возвращаетthis. И способ назвать этоtest[0](), то функция вthisа такжеtestМассивы равны.
Так можем ли мы понять, чтоМассивы принимают индекс, как объект принимает свойствоТот самый, то есть кто вызывал метод последним, метод внутри методаthisтому, на кого он указывает (при отсутствии явной привязки и функция является стрелочной)
Итак, вернемся к первоначальному вопросу:
var obj = {
age: 18,
foo: function (func) {
func()
arguments[0]()
}
}
var age = 10
function temp () {
console.log(this.age)
}
obj.foo(temp)
Тематический анализ:
- В использовании
obj.foo(temp)когда будетtempФункция передается в качестве параметраfoo, здесь мы знаемfuncПроисходит неявная потеря привязки, поэтому первый вызовtempфункцию (то есть выполнитьfunc()этот код),tempвнутриthisуказывает наwindow, поэтому печатает10. - и входящий
tempБудетargumentsсобраны, так что вы можете использоватьarguments[0]()Вызывается таким образом. а такжеargumentsЭто похоже на массив, как только что упоминалось, нижний индекс вызова массива или массива похож на свойство вызова объекта, поэтому в настоящее времяtempвнутриthisто естьarguments, пока вargumentsвнутри нетageэто свойство, поэтому оно будет распечатыватьundefined.
Чтобы проверить эту идею💡, мы можем изменить заголовок:
var obj = {
age: 18,
foo: function (func) {
func()
arguments.age = 66 // 新增代码1
arguments[0]()
}
}
var age = 10
function temp () {
console.log(this) // 新增代码2
console.log(this.age)
}
obj.foo(temp)
Я добавил 2 строки кода в заголовок, одна строка дляargumentsдобавилageсвойство, одна строка будетtempсерединаthisРаспечатай.
Теперь посмотрите на ответ:
Window
10
Arguments [ƒ temp(), age: 66]
66
Конечно же, результат выполнения такой же, как мы себе представляли, второй вызовtempчас,tempВнутриthisуказывает наarguments, и мы даемargumentsчучелоage, который также успешно печатается.
Дополнительный вопрос
Хорошо👌, любимая вещь Лин Дуана это...
Время ответа! Начинать!
"买一送一"
Правильно, когда вы сталкиваетесь с этим интересным вопросом, вы не хотите переделать его и увеличить сложность?
[Инь улыбается~]
По теме!
var obj = {
age: 10,
foo: function (fn) {
fn.call(this)()
arguments[0]()()
arguments[0].call(this)()
arguments[0]().call(this)
}
}
var age = 20
function temp () {
return function () {
console.log(this.age)
}
}
obj.foo(temp)
я здесьtempВозвращает анонимную функцию иfoo()Полученные аргументы вызывают его по-разному.
Тематический анализ:
-
fn.call(this)()это самое простое, я такое виделthisДрузья этой статьи должны знать,fn.call(this)()использовать.call(this)Что изменилось, так этоtempв функции первого слояthis, но последний вызов анонимной функции по-прежнемуwindow, поэтому будет печатать20. (похожий наthisназвание статьи4.9) -
arguments[0]()(), мы знаем из темы 👆 вышеarguments[0]()в, то естьtempПервый слой функции указывает наargumentsобъект при вызовеtempВозвращаемая анонимная функция по-прежнемуwindow, это какfn.call(this)()то же самое, так что печать все еще20. (Когда вы задаете такой вопрос, вы думаете о возврате другой функции в одной функции, если это бесполезноcall/applyПри явном связывании все вызовы к немуwindow) -
arguments[0].call(this)()Как и второй, он использует.call(this)Что изменилось, так этоtempпервый уровень функцииthisуказать, а вызывающая сторона анонимной функции по-прежнемуwindow, так что он все еще печатает20. -
arguments[0]().call(this), используется здесь.call(this)Изменение в анонимной функцииthisуказал, привяжите его какfooвнутри функцииthis, и мы знаем, что в это времяfooвнутри функцииthisЭто указываетobjПотому что звонокfooдаobj, поэтому будет печатать10.
(упомянутый выше 👆thisСсылка:«[Предложение👍] Давайте продолжим с еще 40 вопросами из этого интервью (1,2 Вт сортировки слов вручную)»)
послесловие
Знания бесценны и поддерживают оригинальность.
Справочная статья:
Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Эта статья представлена здесь.
Вроде нет проблем
Это все очки знаний, которые я видел раньше 😁.
Но не думайте, что у вас не получится, если вы видите это с первого взгляда 🙅♂️, честно говоря, даже если я не оглянусь на написанные мной статьи, я их забуду😂, поэтому я не не часто высмеиваю.Приходи и помоги нам сплотиться и сплотиться вместе😁, если ты сможешь все это сделать, будет здорово👍.
(Не сообщайте обо мне моему боссу при написании статей в это время, я здесь, чтобы улучшить интерфейсных инженеров в Китае.JSуровень)
"呸！臭不要脸！"
подобноЛин ДуанТакже парень надеется обратить внимание на паблик Лина.LinDaiDaiИли отсканируйте QR-код ниже👇👇👇.
Время от времени я буду обновлять некоторый внешний контент знаний и свои собственные оригинальные статьи🎉
Ваша поддержка - главная мотивация для меня продолжать творить 😊.
связанное предложение:
"Самый подробный учебник по bpmn.js во всей сети"
«Предложение изменить на: Прочитав это, вы все еще не понимаете Бабеля, я пришлю вам маску»
В этой статье используетсяmdniceнабор текста