Предварительное интервью, письменный тест и руководство по неправильным вопросам (3)

внешний интерфейс алгоритм JavaScript опрос

Руководство по яме JavaScript (3)

JavaScript всегда преподносит людям сюрпризы, непрерывное обучение и непрерывный прогресс.Сегодня я продолжу дополнять несколько письменных вопросов теста/интервью, в которых JS легко ошибиться.Мы продолжим усердно работать над осенним набором и приветствуем друзей, которые усердно работать для осеннего набора.

--------------------------------------Портал штаб-квартиры-----------------------------------

1. Приключения осеннего набора ВКонтакте (1)

2. Приключения осеннего набора ВКонтакте (2)

3. Приключения осеннего набора ВКонтакте (3)

4. Приключения осеннего набора ВКонтакте (4)

5. Дополнительная часть: предварительное собеседование и алгоритм письменного тестирования Алгоритм

«Тривиальное» это связано с областью действия

Вопрос 1. Что выводит следующая программа?

var length = 10;
function fn() {
	console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

output:

10
2

Это я сделал неправильно на втором выводе, на самом деле правильноthisПонять, что это будет знать, первый вывод10Это должно быть очевидно: хотя во время выполнения программы использованиеobj.methodметод, пусть это указывает наobj, но настоящая функция выполняется внутри тела функции, то есть когдаfn()При выполнении,thisуказывает наwindowИтак, первый результат выполнения равен 10

Тогда вот вторая казньarguments[0]почему результат2?

под анализомmethod(fn,1)При выполнении что получилось: Первые два параметраfnа также1будет введенargumentsв, вargumentsПервый параметр - это функция, которую мы проходим; Далееfnвыполнить, в это времяthisне связан и, следовательно, указывает наwindow, выход10. Однако пришлоarguments[0]()Это предложение эквивалентноarguments[0]Первый параметр используется для выполнения, эффект следующий:

arguments[0]()  //执行,等同于下面的
arguments.0() //当然这句话是不合法的，但是这样我们可以更清楚知道，this是指向arguments实例本身

arguments.lengthимеет собственную длину (аргументы похожи на массив со свойством длины), поэтому вывод2

Q2.Вывод программы try..catch

(function () {
    try {
        throw new Error();
    } catch (x) {
        var x = 1, y = 2;
        console.log(x);
    }
    console.log(x);
    console.log(y);
})();

Выходной результат:

1
undefined
2

мы все знаемvarзаключается в том, что на этапе прекомпиляции будет переменная раскрутка, этот тип решается легко, но при столкновении вcatch(x)В случае того же имени, что и у существующей переменной, обязательно различайте отношения между ними.

Используя метод переменного продвижения, перепишите и проанализируйте программу следующим образом:

(function () {
    var x,y;  // 外部变量提升
    try {
        throw new Error();
    } catch (x/* 内部的x */) {
		x = 1; //内部的x，和上面声明的x不是一回事！！
         y = 2; //内部没有声明，作用域链向上找，外面的y
        console.log(x); //当然是1
    }
    console.log(x);  //只声明，未赋值，undefined
    console.log(y);  //就是2了
})();

Это очень ясно.После этого обратите внимание на процесс предварительной компиляции.После того, как определения переменных и функций будут улучшены, анализ будет намного яснее.

Q3.Вывод следующей программы

var x = 21;
var girl = function () {
    console.log(x);
    var x = 20;
};
girl ();

выход:

undefined

Если честно, я ничего плохого в этой теме не делал, ничего плохого, ничего плохого не делал!

Поскольку это то же самое, что и Q2, и оно не такое сложное, как Q2, объяснение состоит из одного предложения: повышается значение внутренней переменной функции. эквивалентно

var x = 21;
var girl = function() {
    var x;
    console.log(x); // undefined
    x = 20;
}
}

Эти странные уголки знаний

Q1. Испытательный полигон оператора: что выдает следующая программа?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);

выход:

true
flase

Первый выходной результат легко понять, в основном, чтобы понять, почему второйfalse

Суть в том, как парсить js<а также>оператор. В JS такие операторы работают слева направо, поэтому3>2>1был преобразован вtrue>1,а такжеtrueЗначение1Затем сравните1>1Он возвращает ложь.

Q2. typeof, что выводит ниже

console.log(typeof typeof 1);

ответstring

будет выводитьstring, эта тема — не только исследование typeof, но и исследование операций js. Обычно в js есть две операции

  • операции присваивания, такие какa = b 2>3И так далее, как было сказано в теме выше, именно по порядку слева направо
  • Операция со значением, js запрашивает память:有没有见过这个家伙？,Напримерconsole.log(a) typeof aВсе относятся к этому типу, справа налево

Таким образом, проблему можно разбить наtypeof 1вернуть"number"Обратите внимание, что это строка. следующийtypeof "number",вернутьstring

Q3. typeof undefined == typeof NULLкаков результат

Сначала проясните две вещи:

  • typeof undefinedвыводundefined
  • typeof nullвыводobject

Но, с другой стороны, поскольку js чувствителен к регистру,null≠NULL, поэтому ``тип NULL返回undefined`

оказаться:true

Вопрос 4. Рекурсивный дизайн. Реализуйте функцию, дайте функции DOM-узел, функция обращается ко всем своим дочерним элементам (всем дочерним элементам, а не только прямым дочерним элементам) и передает ей обратный вызов каждый раз, когда осуществляется доступ к дочернему элементу.

Доступ к дереву DOM — это классический алгоритм поиска в глубину.

function Traverse(DOM,callback) {
    callback(DOM);
    var list = DOM.children;
    Array.prototype.forEach.apply(list,(item)=>{
        Traverse(item,callback); //递归
    })
}
Категории