1. Какие типы данных есть в JS?
По способу передачи типа переменной в JavaScript он делится набазовый тип данныха такжессылочный тип данныхДва типа семи видов.
Основные типы данных включаютUndefined,Null,Boolean,Number,String,Symbol (Новое в ES6)шесть.
Только справочные типы данныхОбъект а, в основном включая объекты, массивы и функции.
Определите тип данных, используяtypeofоператор, существует два синтаксиса:
typeof 123;//语法一
const FG = 123;
typeof FG;//语法二
typeof(null) //返回 object;
null == undefined //返回true，因为undefined派生自null;
null === undefined //返回false。
2. В чем разница между примитивными типами данных и эталонными типами данных?
(1) Когда два параметра передаются как параметры функции:
основные типы данныхКопия данных передается вИзменения исходных данных не влияют на входящие данные.
ссылочный тип данныхВходящие - это адрес ссылки данных, изменения исходных данных повлияют на входящие данные.
(2) Место хранения двух в памяти:
основные типы данныххранится в стеке.
Тип справочных данных находится вуказатели хранятся в стеке, указатель указывает наСущности данных хранятся в куче.
3. Какие существуют методы определения типа данных?
(1) ИспользоватьtypeofНа основе типа данных;
(2)A instanceofB может использоваться для определения того, является ли A экземпляром B,но он не может обнаружить null и undefined;
(3)B.constructor == AМожно судить, является ли А прототипом В,Однако конструктор обнаруживает Object и InstanceOf и может обрабатывать обнаружение базовых типов данных..
Однако конструктор функции нестабилен, в основном это проявляется в перезаписи прототипа класса, в процессе перезаписи велика вероятность того, что предыдущий конструктор будет перезаписан, поэтому обнаруженный результат будет неточным.
(4)Object.prototype.toString.call()
Object.prototype.toString.call()является наиболее точным и распространенным методом.
4. Чем это отличается от глубокого копирования? Как добиться?
Поверхностная копия копирует только указатель на объект, а не сам объект. Реализация неглубокого копирования:
(1)Object.assign(): Необходимо отметить, чтоКогда целевой объект имеет только один слой, это глубокая копия;
(2) оператор спреда;
Глубокая копия — это копирование всех ссылочных структур данных при копировании данных.. Реализация глубокого копирования выглядит следующим образом:
(1) Ручное рекурсивное назначение обхода;
(2) в сочетании сJSON.parse()а такжеJSON.stringify()метод.
5. В чем разница между let и const?
var,let,constОба являются ключевыми словами, используемыми для объявления переменных или функций. Разница в следующем:
| var | let | const | |
|---|---|---|---|
| объем | объем функции | область действия блока | область действия блока |
| Подъем объявления в области видимости | имеют | Нет (временная мертвая зона) | без |
| Это повторяемо | да | нет | нет |
| Можно ли переназначить | да | да | нет (постоянно) |
| Нужно ли назначить значение при инициализации | нет | нет | да |
контекст выполнения переменной или функции,определяет, как они ведут себя и к каким данным они могут получить доступ. Каждый контекст имеет связанныйПеременный объект, и все переменные и функции, определенные в этом контексте, существуют в этом объекте (например, глобальный контекст в DOM связан сwindowобъект).
Каждый вызов функции имеет свой собственный контекст. Когда поток выполнения кода входит в функцию, контекст функции помещается в стек выполнения. После того, как функция будет выполнена, стек выполнения вытолкнет контекст функции, все переменные и функции в нем будут уничтожены, а управление будет возвращено предыдущему контексту выполнения.Поток выполнения JS контролируется этим стеком выполнения..
7. Что такое области действия и цепочки областей действия?
Под областью можно понимать самостоятельный участок, под которым можно пониматьОбъем идентификатора может вступить в силу. самый масштабныйОтличное применение — изоляция переменных, переменные с одинаковым именем в разных областях видимости не будут конфликтовать. ES6 имеет
Когда переменная не определена в текущей области блочного уровня, она будетПосмотрите на родительскую область (родительскую область, которая создала функцию).如果父级仍未找到，就会再一层一层向上寻找，直到找到全局作用域为止。这种一层一层的关系，就是цепочка прицелов.
8. В чем разница между масштабом и реализацией контекста?
(1) контекст выполнения функции генерируется только при вызове функции, а ее область действия генерируется при ее создании;
(2) Область действия функции будет содержать несколько контекстов выполнения (возможно, ноль, когда функция не вызывается).
9. На какие различные ситуации указывает это?
Указатель на this может быть определен только тогда, когда он вызывается,потому чтоthisявляется частью контекста выполнения.
(1) Функция в глобальной области видимости: ее внутренняяthisнаправлениеwindow:
var a = 1;
function fn(){
console.log(this.a)
}
fn() //输出1
(2) Функция внутри объекта: его внутренняяthisУказывая на сам объект:
var a = 1;
var obj = {
a:2,
fn:function(){
console.log(this.a)
}
}
obj.fn() //输出2
this
function createP(name,age){
this.name = name //this.name指向P
this.age = age //this.age指向P
}
var p = new createP("老李",46)
(4) поapply,call,bindПреобразованная функция: ееthisУкажите на первый параметр:
function add(c,d){
return this.a + this.b + c + d
}
var o = {a:1,b:2)
add.call(o,5,7) //输出15
(5) Стрелочные функции: Стрелочные функции не имеют собственныхthis, чтобы увидеть, есть ли функция во внешнем слое, если да, то функция внешнего слояthisэто внутренняя стрелочная функцияthisЕсли не,thisдаwindow.
10. Как изменить направление этого указателя?
можно использоватьapply,call,bindСпособ изменитьthisуказывает на (и не меняет область действия функции). Сравните следующим образом:
(1) Первый параметр из трех равенthisОбъект, на который нужно указать, то есть контекст, который вы хотите указать, контекст относится к объекту, который вызывает функцию (если нет, он указывает на глобальное окно);
(2)applyВторой параметр — это массив или подобный массиву объект,bindа такжеcallПолучить несколько параметров и разделить их запятыми;
(3)applyа такжеcallВносите изменения только в исходную функцию,bindНовая функция будет возвращена (ее нужно вызвать снова, чтобы она вступила в силу).
console.log(Math.max.apply(null, [1,2,3])) //--apply 输出3
console.log(Math.max.apply(null, new Array(1,2,3))) //--apply 输出3
console.log(Math.max.call(null, 1,2,3)) //--call 输出3
console.log(Math.max.bind(null, 1,2,3)()) //--bind 输出3
11. Что такое замыкание?
Закрытие
(2) Реализуйте переменные, которые находятся в памяти.
Нельзя злоупотреблять замыканиями, иначе это вызовет утечку памяти и повлияет на производительность веб-страниц. После того, как закрытие израсходовано, ресурсы должны быть немедленно освобождены.указать ссылочную переменную на ноль.
12. Что такое прототип, цепочка прототипов?
Прототип: JS-декларацияКонструктор, этот объект является исходной функциейпрототип.Конструкторы по умолчанию имеют свойство прототипа.,prototypeзначениеуказатель на прототип функции. в то же времяТак же есть прототипconstructorАтрибуты,constructorзначениеУказание на исходную функцию.
Объекты, созданные с помощью конструкторов, не имеютprototypeсвойства, которыеПо умолчанию есть один__proto__Атрибуты,__proto__значениеКонструктор объекта прототипа точки. Свойства, добавленные или измененные в объекте-прототипе, являются общими для всех созданных объектов.
При доступе к атрибуту в инстанцированном объекте он сначала заглянет внутрь объекта, если не будет найден, то будет отправлен в него.__proto__Ищите указанный прототип, если он все еще не найден, переходите к прототипу.__proto__Искать в указанном родительском архетипе до тех пор, пока не будет найдено илиObject.prototypeПока этот цепной процессСеть прототипов.
13. 何为防抖和节流？ Как добиться?
Принцип дросселирования - это: событие, которое должно быть выполнено время от времени, будет охлаждена, не может быть выполнено.
Сценарии применения: поиск в реальном времени в поле поиска, прокрутка и изменение связанных событий.
//@fn: 要执行的函数
//@delay: 设定的时限
//防抖函数
function debunce(fn,delay){
let flag = null;
return function(){
if(flag) clearTimeout(flag)
//利用apply改变函数指向，使得封装后的函数可以接收event本身
flag = setTimeout(()=>fn.apply(this,arguments),delay)
}
}
//节流函数
function throttle(fn,delay){
let flag = true;
return function(){
if(!flag) return false;
flag = false;
setTimeout(()=>{
fn.apply(this,arguments)
flag=true
},delay)
}
}
14. Как понять синхронный и асинхронный?
Синхронизация: Режим, в котором инструкции по обработке выполняются одна за другой в соответствии с последовательностью записи кода, а следующий код может быть выполнен только после выполнения предыдущего кода.
Асинхронный: его можно понимать как метод параллельной обработки, не дожидаясь завершения выполнения программы, можно выполнять другие задачи.
Причина, по которой JS должен быть асинхронным, заключается в том, что JS работает в одном потоке.Обычно используемые асинхронные сценарии: таймер, запрос ajax, привязка событий..
15. Как в JS реализована асинхронность?
Механизм JS является однопоточным, но причина, по которой он может быть асинхронным, заключается в цикле событий и системе очереди задач.
цикл событий:
JS создастwhile (true)Процесс выполнения тела цикла каждый раз называетсяTick. каждый разTickПроцесс состоит в том, чтобы проверить, есть ли событие для обработки, и если да, удалить соответствующее событие и функцию обратного вызова и поместить их в стек выполнения для выполнения основным потоком. Ожидающие события сохраняются в очереди задач, т. е. каждый разTickОн проверит, есть ли задачи, которые необходимо выполнить в очереди задач.
Очередь задачи:onclick, setTimeout, ajaxwebcoreDOM Binding,network,timerмодуль.
onclick Зависит отDOM BindingМодуль для обработки, когда событие срабатывает, функция обратного вызова будет немедленно добавлена в очередь задач.setTimeoutЗависит отtimerМодуль используется для задержки обработки. Когда приходит время, функция обратного вызова будет добавлена в очередь задач.ajaxЗависит отnetworkМодуль обрабатывается, и обратный вызов добавляется в очередь задач после завершения и возврата сетевого запроса.
Основной поток:
JS имеет только один поток, называемый основным потоком. Цикл событий выполняется после выполнения кода в стеке выполнения основного потока. Поэтому код для выполнения в основном потоке занимает слишком много времени, что заблокирует выполнение цикла событий и выполнение асинхронных операций.
Только когда стек выполнения в основном потоке пуст (то есть после выполнения кода синхронизации), будет выполняться цикл событий, чтобы наблюдать за выполнением обратного вызова события. очередь задач, он возьмет соответствующий обратный вызов и поместит его в стек выполнения, выполняемый основным потоком.
16. 什么是AJAX？ Как добиться?
ajaxЭто технология, которая может реализовать частичное обновление веб-страницы, что может сделать обновление веб-страницы асинхронным.
ajaxРеализация в основном включает четыре этапа:
(1) Создание основных объектовXMLhttpRequest;
(2) Использоватьopenспособ открытия соединения с сервером;send
//1-创建核心对象
//该对象有兼容问题，低版本浏览器应使用ActiveXObject
const xthhp = new XMLHttpRequest();
//2-连接服务器
//open(method,url,async)
xhttp.open("POST","http://localhost:3000",true)
//设置请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")；
//3-发送请求
//send方法发送请求参数，如为GET方法，则在open中url后拼接
xhttp.send({_id:123})
//4-接收服务器响应
//onreadystatechange事件，会在xhttp的状态发生变化时自动调用
xhttp.onreadystatechange =function(){
//状态码共5种：0-未open 1-已open 2-已send 3-读取响应 4-响应读取结束
if(xhttp.readyState == 4 && xhttp.status == 200){
alert("ajax请求已完成")
}
}
(1)Шаблон функции обратного вызова: Функция, которую необходимо выполнить асинхронно, выполняется как callback-функция. Недостаток в том, что при работе со сложной логикой асинхронная логика вызовет callback hell (слишком много слоев вложенности callback-ов, а структура кода хаотична);
(2)режим слушателя событий: использование управляемой событиями идеи для запуска выполнения асинхронной функции при возникновении события, недостатком является то, что весь код должен быть переведен в режим, управляемый событиями, что затрудняет выделение основного процесса;
(3)модель публикации-подписки: публиковать сообщение в центре сигналов при выполнении асинхронной задачи, а другие задачи определяют, следует ли начинать выполнение, подписавшись на сообщение в центре сигналов;
(4)Promise(ES6):PromiseОбъекты имеют три состоянияpending(инициализированное состояние),fulfilled(статус успеха),rejected(неудачный статус).
(5)async/await(ES7): на основеPromiseРеализованы асинхронные функции;
(6) ИспользоватьСтроительвыполнить.
18. Как я понимаю объект обещания?
PromiseОбъект имеет следующие дваФункции:
(1)На состояние объекта не влияет внешний мир.PromiseОбъекты имеют три состоянияpending,fulfilled,rejected. Значение состояния определяется только асинхронным результатом и не может быть изменено какой-либо другой операцией.
(2)Однажды сформированное состояние не изменится, а результат можно будет получить в любой момент.. Значение состояния будет даноpendingсталиfulfilledилиrejected, то этоresolved.
К недостаткам Promise относятся следующие три недостатка:
(1)PromiseПосле выполнения его нельзя отменить;
(2) Функция обратного вызова не может быть установлена, и внутренние ошибки не могут быть обнаружены;
(3) когда вpendingсостояние, невозможно узнать, до какой стадии оно развилось.
PomiseОбычно используются следующие методы:
(1)Promise.prototype.then():PromiseКогда состояние экземпляра изменяется, он вызываетсяthenВнутренняя функция обратного вызова.thenМетод принимает два параметра (первыйresolvedОбратный вызов, который выполняется время от времени в состоянии, первый из нихrejected
(2)Promise.prototype.catch():.then(null, rejection)или.then(undefined, rejection)
19. 怎么理解宏任务，微任务？ ? ?
script(整体代码),setTimeout,setInterval,I/O
Микро задачи:Promise.then,Object.observe,MutationObserver.
Последовательность выполнения примерно следующая:
Основная задача потока --> макрозадача --> микрозадача --> макрозадача в микрозадаче --> ...... --> пока все задачи не будут выполнены
20. Что такое междоменный домен? Как решить междоменные проблемы?
Междоменная проблема на самом деле является проблемой, возникающей из-за политики одного и того же источника.Если какая-либо часть протокола передачи, имя домена и порт несовместимы, возникает междоменная проблема, и запрос будет отклонен, но<img src=XXX> <link href=XXX><script src=XXX><script>
Недостаток: поддерживается только метод get, и он уязвим для XSS-атак.
(2) КОРС
Принцип: серверный терминал置Access-Control-Allow-Originчтобы включить CORS. Это свойство указывает, какие доменные имена могут получить доступ к ресурсу.Если установлен подстановочный знак, это означает, что доступ разрешен ко всем веб-сайтам.
Пример реализации (экспресс):
//app.js中设置
var app = express();
//CORS跨域-------------------------------------------------------------------------------------
// CORS：设置允许跨域中间件
var allowCrossDomain = function (req, res, next) {
// 设置允许跨域访问的 URL(* 表示允许任意 URL 访问)
res.header("Access-Control-Allow-Origin", "*");
// 设置允许跨域访问的请求头
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization");
// 设置允许跨域访问的请求类型
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
// 设置允许服务器接收 cookie
res.header('Access-Control-Allow-Credentials', 'true');
next();
};
app.use(allowCrossDomain);
//------------------------------------------------------------------------------------
(3) Агент промежуточного программного обеспечения узла
Принцип: Политика одного и того же источника — это только политика, которой должны следовать браузеры, поэтому создайте сервер промежуточного программного обеспечения для пересылки запросов и ответов для достижения междоменных целей.
/* server1.js 代理服务器(http://localhost:3000)*/
const http = require('http')
// 第一步：接受客户端请求
const server = http.createServer((request, response) => {
// 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
response.writeHead(200,{
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'*',
'Access-Control-Allow-Headers':'Content-Type'
})
// 第二步：将请求转发给服务器
const proxyRequest = http.request({
host:'127.0.0.1',
port:4000,
url:'/',
method:request.method,
headers:request.headers
},
serverResponse =>{
// 第三步：收到服务器的响应
var body = ''
serverResponse.on('data', chunk =>{
body += chunk
})
serverResponse.on('end',()=> {
console.log('The data is '+ body)
// 第四步：将响应结果转发给浏览器
response.end(body)
})
})
.end()
})
server.listen(3000,()=>{console.log('中间件服务器地址： http://localhost:3000')})
// server2.js(http://localhost:4000)
const http = require("http");
const data = { title: "fontend", password: "123456" };
const server = http.createServer((request, response) => {
if (request.url === "/") {
response.end(JSON.stringify(data));
}
});
server.listen(4000, () => {
console.log("The server is running at http://localhost:4000");
});
(4) обратный прокси nginx
Принцип: аналогичен серверу промежуточного программного обеспечения Node, реализованному через прокси-сервер nginx.
Способ: скачать и установить nginx, изменить конфигурацию.
21. Какие есть способы реализации наследования? ? ?
Методы реализации наследования:
(1) класс+расширяет наследование (ES6)
//类模板
class Animal {
constructor(name){
this.name = name
}
}
//继承类
class Cat extends Animal{//重点。extends方法，内部用constructor+super
constructor(name) {
super(name);
//super作为函数调用时，代表父类的构造函数
}//constructor可省略
eat(){
console.log("eating")
}
}
(2) Наследование прототипа
//类模板
function Animal(name) {
this.name = name;
}
//添加原型方法
Animal.prototype.eat = function(){
console.log("eating")
}
function Cat(furColor){
this.color = color ;
};
//继承类
Cat.prototype = new Animal()//重点：子实例的原型等于父类的实例
(3) Заимствование наследования конструктора
function Animal(name){
this.name = name
}
function Cat(){
Animal.call(this,"CatName")//重点，调用父类的call方法
}
(4) Комбинированное паразитарное наследование (фокус)
захват событийвсплывающее окно событияагент событий.
захват событий
всплывающее окно события
Поток событий DOM включает три этапа: этап захвата событий, целевой этап и этап всплытия событий.
23. Что такое цикл событий EventLoop?
js является однопоточным требованием, и его асинхронные операции выполняются через цикл обработки событий. Весь цикл событий обычно состоит из трех частей: стека выполнения, очереди сообщений и очереди микрозадач.
Синхронный код будет вызываться и выполняться непосредственно в стеке выполнения.
Обратный вызов в таймере будет помещен в стек выполнения для выполнения, когда стек выполнения будет опустошен и время будет достигнуто.
promise,asyncОбратные вызовы для асинхронных функций помещаются в очередь микрозадач и выполняются, как только стек выполнения очищается и асинхронная операция завершается.
24. require/importразница между?
(1)requireсинтаксис CommonJS,importэто синтаксис ES6;
(2)requireimport
(3)requireОн представил копию исходной экспортной стоимости,import
(4)requireдинамически загружается во время выполнения,importстатическая компиляция;
(5)requireПо умолчанию не используется строгий режим при вызове.importСтрогий режим вызывается по умолчанию.
Портал серии руководств по предварительным собеседованиям:
Краткое изложение вопросов Vue для собеседования в руководстве по фронтенд-интервью
Краткое изложение вопросов HTML-интервью в руководстве по интерфейсному собеседованию
Краткое изложение вопросов CSS-интервью в руководстве по фронтенд-интервью