Интервью с Tencent (1)

внешний интерфейс опрос

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

У меня, как у фронтенд-новичка, нет большого опыта интервью и опыта работы, но я брал интервью во многих святынях интернета, больших и малых.Сегодня я расскажу об опыте автора по интервьюированию гусиной фабрики в начале в этом году, и я надеюсь, что это будет полезно для всех! Следующие ответы организованы вами, если есть какие-то упущения, пожалуйста, поправьте меня!

Второй адрес

Поговорим об общей ситуации

Сфера применения:Один-два года работы начинающим фронтенд-разработчиком

Ситуация с автором:Всего у автора несколько раундов технических интервью, и конечный результат — технический проход.

Комментарии автора:Может быть, поэтому начальник гусиной фабрики считает, что у меня небогатый опыт, я чувствую, что большинство вопросов на собеседовании основаны на основах. Лично я чувствую, что Дачан по-прежнему придает большое значение основам, особенно для тех, у кого мало опыта работы или поступления в школу. так

Акцент на основах и принципах

Акцент на основах и принципах

Акцент на основах и принципах

текст

Ниже автор объединит вопросы, заданные интервьюером, один за другим, чтобы...

Одна сторона - это телефонный звонок

Интервьюер Tencent (Сяо Тэн): Здравствуйте, я интервьюер Tencent, Балабала... Позвольте сначала представиться (голос очень нежный😝)!

Автор: Я...

Сяотэн: Тогда давайте вкратце поговорим о базовых знаниях интерфейса!

. . . . . .

В этом интервью интервьюер в основном задавал мне 4 вопроса, связанных с интерфейсом.

1. Вы знаете, что такое делегирование событий?

2. Вы понимаете Обещание?

3. Какое событие загрузки окна и domcontentloaded будет первым?

4. Сталкивались ли вы раньше с междоменными проблемами? Как это решается.

Всем известно, что любовь без цели замужества — это хулиганство, э-э, нет, не в тему 😁. . . Вопросы интервью, которые не дают ответов, предназначены для обмана кликов 😝! ! ! Поскольку эти вопросы слишком простые, но они затрагивают широкий круг вопросов, пожалуйста, Baidu самостоятельно (не ставьте мне большие пальцы вверх из-за этого, ваши большие пальцы — это мотивация для вашего ребенка продолжать делиться QAQ).

Две стороны - удаленная сторона QQ

Ах, Рори язвителен, старушенькая бинтовая ткань... Я написал это, и это была еда, чтобы получить пощечину от надзирателя! У современной молодежи есть драгоценное время, она любит галантерею, но не любит, когда вы болтаете! В этом случае первыми могут быть только галантерейные изделия (если вам нравится мой стиль письма, пожалуйста, поставьте лайк или прокомментируйте, автору особенно хочется дать пощечину этому куратору)!

Сухие товары следующие, ответ организован самостоятельно, если есть ошибка, укажите!

1. Существует следующий класс:

function Person(name) {
    this.name = name
}
let p = new Person('Tom');

1. p.__proto__Равно чему?

Отвечать: Person.prototype

2. Person.__proto__Равно чему?

Отвечать: Function.prototype

Разобрать:

Вопросы 1 и 2 на самом деле задают один и тот же вопрос. Оба они проверяют знания, связанные с цепочкой прототипов. Нам нужно запомнить только одно предложение, чтобы решить его. Свойство __proto__ (прототип) экземпляра равно свойству прототипа его конструктора. Конструктор экземпляра p — это Person, а конструктор Person — это Function, и результат ясен с первого взгляда.

понять по аналогии

var foo = {},
    F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';

console.log(foo.a)   
console.log(foo.b)    
console.log(F.a)      
console.log(F.b)

Здесь я не буду давать ответ, давайте разберем сами, а потом в консоль запустим! Скоро зима, шевелите руками и согревайтесь, я чувствую, что автор весьма заботлив! ! !

3. Если основа заголовка изменена на

function Person(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');

Что возвращает Person во время создания экземпляра Person (или что такое PERSON)?

Отвечать:

{name: 'Tom'}

4. Если шток меняется на

function Person(name) {
    this.name = name
    return {}
}
let p = new Person('Tom');

При создании экземпляра Person, что возвращает Person (или чему равно p)?

Отвечать:

{}

Разобрать

Конструкторы не требуют явного возвращаемого значения. При использовании new для создания объекта (вызов конструктора), если возвращаемое значение не является объектом (число, строка, логический тип и т. д.), возвращаемое значение будет проигнорировано; если возвращаемое значение является объектом, объект будет быть возвращенным (Примечание: если возвращается ноль, также игнорируется возвращаемое значение).

5. Разница между typeof и instanceof

Отвечать:

В JavaScript оператор typeof используется для определения типа переменной. При использовании оператора typeof для хранения значения со ссылочным типом возникает проблема. Он возвращает «объект» независимо от того, на какой тип объекта ссылаются.

Оператор instanceof используется для проверки того, имеет ли объект свойство прототипа конструктора в своей цепочке прототипов. Синтаксис: объект instanceof конструктор Параметры: object (обнаруживаемый объект.)structor (конструктор) Описание: оператор instanceof используется для проверки наличия в цепочке прототипов объекта параметра конструктора.

Ответ был разобран мной.Может быть, я думал, что мой ответ был неточным.Интервьюер привел мне другой пример.

6. Если Student наследуется от Person (класс Student наследуется от Person, он должен основываться на наследовании прототипа), пусть s = new Student('Lily'), то что возвращает s instanceof Person?

function Person (name) {
    this.name = name;
}

function Student () {
    
}

Student.prototype = Person.prototype;
Student.prototype.constructor = Student;

let s = new Student('Tom');
console.log(s instanceof Person); // 返回 true

Отвечать: true

7. Внутренний механизм new и instanceof

Отвечать

  1. Создайте новый объект, наследуя прототип класса объекта, а именно Person.prototype;
  2. Выполните конструктор класса объекта, и this ссылается на свойства и методы экземпляра, то есть this указывает на вновь созданный экземпляр;
  3. Если конструктор возвращает новый «объект», то этот объект заменит весь результат новым. Если конструктор не возвращает объект, он вернет объект, созданный на шаге 1, который неявно возвращает this. (Как правило, конструктор не возвращает никакого значения, но в некоторых особых случаях, если пользователь хочет переопределить это значение, он может вернуть обычный объект для переопределения.)

объяснить в коде

// let p = new Person()
let p = (function () {
    let obj = {};
    obj.__proto__ = Person.prototype;
    
    // 其他赋值语句...
    
    return obj;
})();

Ниже описывается внутренний механизм instanceof через код.Предполагая, что имеется оператор x instanceof y, внутри фактически делаются следующие суждения:

while(x.__proto__!==null) {
    if(x.__proto__===y.prototype) {
        return true;
    }
    x.__proto__ = x.__proto__.proto__;
}
if(x.__proto__==null) {return false;}

x продолжит поиск неявной цепочки прототипов __proto__ до тех пор, покаx.__proto__.__proto__......===y.prototypeДо сих пор вернитесь, если найдете, то есть экземпляр, где X - Y. В противном случае возвращайте False, X не является экземпляром Y.

понять по аналогии

function F() {}
function O() {}

O.prototype = new F();
var obj = new O();

console.log(obj instanceof O); // true
console.log(obj instanceof F); // true
console.log(obj.__proto__ === O.prototype); // true
console.log(obj.__proto__.__proto__ === F.prototype); // true

Перепишите приведенный выше код в соответствии с внутренним механизмом нового

function F() {}
function O() {}

var obj = (function () {
    var obj1 = {};
    obj1.__proto__ = F.prototype; // new F();
    O.prototype = obj1; // O.prototype = new F();
    obj.__proto__ = O.prototype; // new O();
    obj.__proto__ = obj1;
    return obj;
})();

Комбинируя внутренний механизм instanceof, легко получить правильный ответ.

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

function F() {}
function O() {}

var obj = new O();
O.prototype = new F();


console.log(obj instanceof O); // false
console.log(obj instanceof F); // false
console.log(obj.__proto__ === O.prototype); // false
console.log(obj.__proto__.__proto__ === F.prototype); // false

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

На самом деле многие вышеперечисленные вопросы связаны со знанием цепочки прототипов.Вот схема цепочки прототипов которую надо понимать.Простите что украл картинку.

У меня уже в голове немного мутно, когда я тут спрашиваю, простите меня за невнятность! !

8. Что выводит следующий код?

for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i)
    }, 0)
}

Отвечать:10 10

Что делать, если вы хотите вывести от 0 до 9?

Отвечать:Измените var на let или используйте замыкание.

// 使用闭包
for(var i = 0; i < 10; i++) {
    (function (i) {
        setTimeout(() => {
            console.log(i)
        }, 0);
    })(i);
}

9. Мы только что использовали функцию стрелки, поговорим о функции стрелки Это указывает на проблему?

Отвечать:По умолчанию он указывает на объект, в котором он находится, когда он определен, а не на объект, когда он выполняется.Когда он определен, среда может быть оконной (то есть наследующей this от родителя).

Если вам все еще неясно об этом, вы можете обратиться к моей другой статьеТщательно понять это в JavaScript.

10. В чем разница между for...in iteration и for...of?

Отвечать:Разница между for...in и for...of

11. Расскажите, как вы понимаете генераторы?

Отвечать:Рекомендую всем к просмотруГлавы, связанные с генератором, г-на Руан Ифэна

12. Использовали ли вы гибкий макет? Для чего нужны свойства flex-grow и flex-shrink?

Отвечать:flex-grow: проецировать увеличенный масштаб, по умолчанию 0, т.е. если есть свободное место, не увеличивать. flex-shrink: уменьшенный масштаб проекта, по умолчанию 1, то есть если места недостаточно, проект будет уменьшен.

Чтобы полностью понять flex, вы можете проверитьУчебное пособие по Flex Layout от учителя Руан Ифэн: грамматика

13. Говорите о макрозадачах и микрозадачах? И скажите результат выполнения кода ниже.

console.log('a');
setTimeout(() => {
    console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
    console.log('d');
})
.then(() => {
    console.log('e');
});

console.log('f');

Отвечать:На выходе получается acfdeb, а про макрозадачи и микрозадачи можно и дальше обращать внимание на более поздние статьи автора, или искать самостоятельно. Но вы можете посмотреть на украденную картину.

14. Знаете ли вы о keep-alive в HTTP-запросах?

Отвечать:

В первые дни http каждый http-запрос требовал открытия соединения сокета tpc, а соединение tcp отключалось после одного использования. Использование поддержки активности может улучшить это состояние, то есть можно непрерывно отправлять несколько копий данных в одном TCP-соединении без отключения. Используя механизм поддержания активности, можно уменьшить количество установлений соединений tcp, что также означает, что соединение в состоянии TIME_WAIT может быть уменьшено, тем самым повышая производительность и повышая пропускную способность сервера httpd (меньшее количество соединений tcp означает меньше системных вызовов ядра). , сокет для вызовов accept() и close()). Тем не менее, keep-alive не является бесплатным обедом, и длительные TCP-соединения могут легко привести к неэффективному занятию системных ресурсов. Неправильно настроенные проверки активности иногда обходятся дороже, чем повторное использование соединений. Поэтому очень важно правильно установить время ожидания проверки активности.

15. Отличие управляемого компонента от неуправляемого в React (управляемый компонент и неуправляемый компонент).

Отвечать:: Пожалуйста, проверьте официальный сайт ReactУправляемые компоненты,неконтролируемые компоненты

16. Вы поняли внутренний механизм реализации react-router?

**Ответ:** См. эту статьюПринцип реализации react-router

17. Сведение массива. Реализуйте метод сведения, чтобы в качестве входных данных был массив, а элементы массива также могли быть массивами, и этот метод выводит сглаженный массив.

// Example
let givenArr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
let outputArr = [1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]

// 实现flatten方法使得
flatten(givenArr)——>outputArr

Молодой, я QAQ реализован с рекурсией, мой ответ

function flatten(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            res = res.concat(flatten(arr[i]));
        }else{
            res.push(arr[i]);
        }
    }
    return res;
}

На самом деле, вы можете

function flatten(arr){
    return arr.reduce(function(prev,item){
        return prev.concat(Array.isArray(item)?flatten(item):item);
    },[]);
}

Вы также можете использовать оператор распространения ES6

function flatten(arr){
    while(arr.some(item=>Array.isArray(item)){
        arr = [].concat(...arr);
    }
    return arr;
}

18. Если задают 17 вопросов, что делать и сортировать заново (не давать конкретный код).

**Ответ:** Лучше инкапсулировать класс методов массива, который содержит такие методы, как flatten (выравнивание), sort (сортировка) и unique (удаление дубликатов).

Второй раз прошло так, с тревогой жду результата, статья немного длинновата, если хотите узнать вопросы интервью, которые следуют, пожалуйста, слушайте следующий разбор!!!

Второй адрес

@Author: Even

Категории