5 типичных вопросов на собеседовании по JavaScript

JavaScript
5 типичных вопросов на собеседовании по JavaScript

В мире ИТ требуется много разработчиков JavaScript. Если вы подходите для этой роли, у вас будет много возможностей сменить работу и увеличить свою зарплату. Но прежде чем вас примет компания, вам нужно продемонстрировать свои навыки, чтобы пройти собеседование. В этой статье я покажу вам 5 типичных вопросов на фронтенд-интервью и способы их решения.Эти 5 вопросов часто используются для проверки навыков кандидата в JavaScript. Они так весело!

Проблема 1: Объем

Рассмотрим следующий код:

(function() {
   var a = b = 5;
})();

console.log(b);

Что напечатает консоль?

Отвечать

Приведенный выше код будет распечатан5.

Ловушка этой проблемы заключается в том, что в выражении немедленно выполняемой функции (IIFE) есть два имени, но там, где переменная определяется ключевым словомvarобъявить. это значитaявляется локальной переменной этой функции. напротив этого,bнаходится в глобальной области видимости.

Еще один подводный камень этой проблемы в том, что в функции он не использует"строгий режим" ('use strict';). еслистрогий режимЕсли этот параметр включен, код сообщит об ошибке Uncaught ReferenceError: b не определено. Помните, что строгий режим требует, чтобы вы явно ссылались на глобальную переменную, когда вам нужно ее использовать. Поэтому нужно писать так:

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

Проблема 2: Создание «нативных» методов

существуетStringопределить объектrepeatifyфункция. Эта функция принимает целочисленный параметр, чтобы указать, сколько раз нужно повторить строку. Эта функция просит строку повторить указанное количество раз. Например:

console.log('hello'.repeatify(3));

должен распечататьhellohellohello.

Отвечать

Возможная реализация выглядит так:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
      str += this;
   }

   return str;
};

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

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

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

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

Проблема 3: Подъем переменных

Выполнение следующего кода Что происходит? Почему?

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

Отвечать

Результат выполнения этого кодаundefinedа также2.

Причина такого результата в том, что поднимаются как переменные, так и функции. Таким образом, вaПри печати он уже существует в области видимости функции (т. е. объявлен), но его значение по-прежнему равноundefined. Другими словами, приведенный выше код и следующий код эквивалентны.

function test() {
   var a;
   function foo() {
      return 2;
   }

   console.log(a);
   console.log(foo());

   a = 1;
}

test();

Вопрос 4:thisкак это работает в джаваскрипте

Каков результат следующего кода? Пожалуйста, объясните свой ответ.

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Отвечать

Приведенный выше код распечатываетAurelio De Rosaа такжеJohn Doe. Причина в том, что в JavaScript контекст функции, которыйthisОбъект, на который ссылается ключевое слово, зависит от того, как вызывается функция, а не от того, как функция определена.

во-первыхconsole.log()вызов,getFullname()как естьobj.propвызывается функция. Итак, здесь контекст указывает на последнее, и функция возвращаетthisобъектfullnameАтрибуты. Вместо этого, когдаgetFullname()назначен какtestзначение переменной, этот контекст указывает на глобальный объект (window). Это потому что,testНеявно задается как свойство глобального объекта. Таким образом, вызов функции возвращаетwindowизfullnameЗначение свойства, в этом коде это значение задается первой строкой оператора присваивания.

Вопрос 5:call()а такжеapply()

Исправьте предыдущую проблему, пусть последняяconsole.log()распечаткаAurelio De Rosa.

Отвечать

Чтобы решить эту проблему, вы можете передать функциюcall()илиapply()Форсировать контекст вызова функции. если ты не знаешьcall()а такжеapply()Для отличия рекомендую прочитать статью В чем разница между function.call и function.apply?. В следующем коде я бы использовалcall(), а тут сapply()Такой же результат можно получить:

console.log(test.call(obj.prop));

В заключение

В этой статье мы обсудили 5 типичных вопросов, которые часто задают интервьюерам JavaScript на собеседованиях. В реальном интервью реальные вопросы могут различаться, но затронутые концепции и затронутые темы обычно очень похожи. Надеюсь, предыдущие тесты были вам интересны. Если вы не знаете некоторых ответов, не волнуйтесь: продолжая учиться и приобретая опыт, вы сможете решить эти проблемы.

Если во время интервью вам задавали другие интересные вопросы, не стесняйтесь поделиться ими с нами прямо сейчас. Это поможет многим разработчикам.

У меня есть общедоступная учетная запись WeChat, и я буду делиться с вами передовыми методами обучения и техническими передовыми технологиями без добавок каждый день. Друзья, которым нравится моя публикация, могут выполнить поиск в WeChat: «Front-end Siege Lion Alliance» или WeChat: «qianduangcslm», чтобы подписаться.

Категории