предисловие
координата:杭州. Фронтендом занимаюсь почти 2 года, я не профессионал, а маленький новичок, который только начал. Я пошел на собеседование 2 года назад.Из-за моих технических навыков компания мало что знала о моей технологии.В основном это зависит от моего отношения и способности к обучению, поэтому я очень благодарен двум старым владельцам перед меня за то, что взял меня в качестве новичка. В этом году проекты, которые я делал у предыдущего владельца, почти обрели форму, и я обнаружил, что у меня тоже наступил период узкого места, поэтому я вышел посмотреть.
Ходить на собеседования — это на самом деле быстрый способ признать свои недостатки, и я надеюсь, что смогу немного помочь людям на арене, которые берут интервью, как я.
Ручные вопросы
1) Что такое наследование js? Цепь прототипа?
function super (){
this.a = '1'
}
function sub (){
super.call(this)
}
или
function sub (){...}
sub.prototype = new super();
//直接在他的原型上new一个super的实例。
В процессе new, бывает, меняет точку this, выполняет код в super и возвращает новую функцию.
Метод наследования es6.
class sub extends super(){
constructor(){
//super()和super(props)的区别
super() // cosole.log(this.props) undifined
super(props) // console.log(this.props) //打印出定义好的props
// super() 它在这里表示父类的构造函数，用来新建父类的this对象。
//子类必须调用这个方法，不然继承的话会报错。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
//这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
//得到与父类同样的实例属性和方法，然后再对其进行加工，
//加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
}
// constractor一定是必要的吗？
// 答 是的，就算你不声明，也会隐式的把你声明好一个空的constractor。
2) Что такое аякс?
Асинхронный javascript+Xml
var xhr = new XmlHttpRequest() 或者 new ActiveXObject()
xhr.onreadyChange = function(){
if(xhr.readyState = 4){
if(xhr.status == 200){
var test = xhr.responseTest()
}
}
}
xhr.open("Get" , url ,false) //第三个参数，是否异步
3) Как дедуплицировать массив?
(1) метод установки
var arr = new Set (arr);
arr = Array.from(arr);
(2) Вы также можете использовать ключ объекта, чтобы он не совпадал, чтобы выносить суждения
(3) для петли
4) В чем разница между rem и em?
бэр относительнокорневой элементразмер шрифта на
em относительнородительский элементразмер шрифта
Понимание em и rem здесь не очень точное и глубокое, и я не хочу вводить в заблуждение новых друзей~ Одноклассник порекомендовал веб-сайт нижеПодробное руководство: когда использовать Em против Rem
(Обновлено 03.07.2018, 22:51)
5) Коробчатая модель
(1) Обычная блочная модель boxsizing: content-box; (2) Странная блочная модель boxsizing: border-box;
6) код состояния HTTP
200 304500 404 415 вы можете пойти и узнать
7) Реализация функции может выполнять функцию add(1)(2)(3) //6 для достижения функции add(1)(2)(3)...(n)
Вот два встроенных метода js,valueOfиtoStringметод, в некоторых случаях эти два метода будут вызываться автоматически, и когда пользователь определяет новое значение of и tostring, новый метод будет выполняться первым.
При выполнении строкообразных Concatenation и т. Д. Необходимо вызовать метод TOSTRING (), чтобы иметь приоритетный звонок TOSTRING (), если вызов все еще не может вернуться к исходному типу слов, будет продолжать вызывать метод стоимости.
Когда вы выполняете операцию, аналогичную Number, вы вызываете valueof().
Для функций возврат add и add() отличается. add() вернет значение return. И add вызовет valueOf, чтобы обещать код самой функции.Преобразование функции похоже на число.
решение проблем
function add () {
var args = [].slice.call(arguments);//这里也用到了闭包的概念对args的存储
var fn = function () {
var arg_fn = [].slice.call(arguments); //这里的递归是为了合并参数
return add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function() {
return args.reduce((a, b) => a + b);//真正的输出是valueof
}
return fn;
}
8) Выполнить последовательный setTimout и обещание Здесь мы должны сначала понять, что js выполняется в одном потоке. Выполнение функций в памяти делится на синхронное и асинхронное. Синхронные задачи будут выполняться одна за другой в основном потоке, а асинхронные задачи будут сначала регистрироваться в очереди событий. Дождавшись завершения задачи основного потока, она перейдет в асинхронную очередь, чтобы взять задачу и поместить ее в основной поток для выполнения.
Здесь нужно понимать две концепции.宏事件 微事件.
макрособытие: скрипт, setTimeout, setInterval
микро событие:обещать
И еще одно: обещание — это функция, которая выполняется немедленно.
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(a, b) {
console.log(2);
for(var i = 0; i < 10; i++) {
i == 9 && a();
}
console.log(3);
}).then(function() {
console.log(4)
});
console.log(5)
//输出:2,3,5,4,1
Сначала выполняется макрособытие, затем микрособытие, а затем цикл.
9)
function Foo() {
getName = function () { alert (1); };
return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
//请写出以下输出结果：
Foo.getName(); //2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); //2 相当于 new (Foo.getName)();
new Foo().getName(); // 3 相当于 (new Foo()).getName()
new new Foo().getName(); // 3 相当于 new ((new Foo()).getName)()
Разница между new Foo.getName() и new Foo().getName() состоит в том, что
новый Foo в сочетании с кейсами, принадлежащими новому без списка аргументов (уровень 17)
new Foo() в сочетании со случаем, когда у new есть список аргументов (уровень 18)
Последние три могут относиться к проблемам приоритета операторов в js.
- В чем разница между Object.defineProperty() и объектом из {}
Честно говоря, я не совсем уверен, что это за вопрос.Я думаю, что это может быть объект, определенный с помощью defineProperty.Он также может определить, является ли он перечисляемым, доступным для чтения и записи.
Обновлено 05.07.2018
При перечислении объекта сегодня я обнаружил объект, определенный с помощью defineProperty, Если вы не определяете enumerable: true, его нельзя перечислить, а объект, объявленный в {}, можно перечислить напрямую!
11) Каков метод HTTP-кеша? Сильный кеш, кеш согласования, 304
Сильный кеш: cache-control : max-age
Переговорный кэш: эксплойт 304
12) Разница между вызовом и применением. Разница между ними и bind. Как bind реализован изначально.
Разница между вызовом и применением заключается в следующем параметре. Передавайте по одному при вызове и массив при подаче.
Возвращает новую функцию, когда bind может.
Function.prototype.bind = function (context) {
//判断调用此方法的是否是一个函数，不是函数就报错
if (typeof this !== "function") {
throw new Error(this + "is not a function");
}
var self = this;
var args = [];
//把参数循环出来
for (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof self ? this : context, args.concat(bindArgs));
}
fbound.prototype = Object.create(self.prototype);
//返回的函数不仅要和 被调函数的函数体相同，也要继承人家的原型链
return fbound;
}
13) Одно предложение перемешивает массив?
arr.sort(function(){ return 0.5 - Math.random()})
14) Задача наведения этой стрелочной функции
Блог Руан Ифэн очень точен, рекомендуетсястрелочная функция
15) Принцип рендеринга браузера немного (чтобы быть очень подробным, возможно, вам придется написать статью~, вы можете обратиться к сообществу с открытым исходным кодом, чтобы найти специальную статью для понимания~)
16) Правая сторона фиксированная, а левая адаптивная. Левый фиксированный и правый адаптивный. Фиксированная высота вверху, адаптивная высота внизу.
//左边自适应，右边固定
.float-box{
display:flex;
justify-content:end;
}
.left{
width: 100%;
border:1px solid #ddd;
}
.right{
width:300px;
border:1px solid #ddd;
}
17) По центру по горизонтали? По центру по горизонтали и по вертикали?
горизонтально по центру
Используйте text-align: center; для встроенных элементов, как показано ниже.
.container {
text-align: center;
}
Блочные элементы могут использовать margin: auto;, как это делали многие веб-сайты в эпоху ПК.
.container {
text-align: center;
}
.item {
width: 1000px;
margin: auto;
}
Абсолютно позиционированные элементы можно комбинировать с левым и отступом, но ширина должна быть известна.
.container {
position: relative;
width: 500px;
}
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
Центрировать по вертикали
Встроенный элемент может установить значение line-height равным значению высоты, например вертикальное центрирование однострочного текста:
.container {
height: 50px;
line-height: 50px;
}
Абсолютно позиционированные элементы могут быть реализованы в сочетании с left и margin, но размер должен быть известен.
- Достоинства: хорошая совместимость
- Недостатки: Нужно знать размер заранее.
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
Абсолютное позиционирование можно комбинировать с преобразованием для достижения центрирования.
- Преимущество: нет необходимости знать размер заранее
- Недостатки: плохая совместимость
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
Абсолютное позиционирование в сочетании с полем: авто, нет необходимости заранее знать размер и хорошая совместимость.
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
Анонс следующего раздела:
算法题～～Я уже пытаюсь быть продуктивным, как свиноматка～
Обновлено 03.07.2018 11:38
Дангдан~ Свежеиспеченный~Опыт фронтенд-интервью в июне 2018 года (посередине)