javascript высокочастотные вопросы на собеседовании

Проще говоря, область видимости — это доступная область видимости переменных и функций, то есть область видимости управляет видимостью и жизненным циклом переменных и функций. Область действия — это набор правил для поиска переменных на основе имен идентификаторов в текущей области и вложенных подобластях.
Роль цепочки областей видимости заключается в том, чтобы гарантировать, что переменные и функции, имеющие доступ к среде выполнения, находятся в порядке. Доступ к переменным в цепочке областей видимости возможен только вверх. Когда переменные обращаются к объекту окна, они завершаются. .

Чем именно занимается новый оператор?

Создать пустой объект
Наследовать прототип функции
Свойства и методы добавляются к объекту, на который ссылается этот
На вновь созданный объект ссылается this и, наконец, неявно возвращает this

Строгие ограничения режима

Переменные должны быть объявлены перед использованием
Параметры функции не могут иметь атрибуты с одинаковыми именами, иначе будет сообщено об ошибке
Нельзя использовать с заявлением
Нельзя присваивать значения свойствам только для чтения, иначе будет сообщено об ошибке
Вы не можете использовать префикс 0 для представления восьмеричного числа, иначе будет сообщено об ошибке
Невозможно удалить неудаляемые атрибуты, иначе будет сообщено об ошибке
Переменная delete prop не может быть удалена, будет сообщено об ошибке, только свойство delete global[prop]
eval не вводит переменные во внешнюю область видимости
eval и аргументы не могут быть переназначены
arguments не отражает автоматически изменения аргументов функции
нельзя использовать arguments.callee
нельзя использовать arguments.caller
запретить этому указывать на глобальный объект
Не удается получить стек вызовов функций с помощью fn.caller и fn.arguments
Добавлены зарезервированные слова (такие как protected, static и interface)

новые возможности es6

let const
Расширение метода для строк, массивов, объектов
Новые типы данных и структуры данных для символа, набора, карты
прокси перехват прокси
Асинхронные решения: обещание, генерация, асинхронность, ожидание
класс класс
модуль модуль

Для получения подробной информации см.:Руководство по началу работы с ES6 — Жуан Ифэн

Объектно-ориентированное программирование и процедурное программирование

концепция:

Процесс состоит в том, чтобы проанализировать проблему необходимо решить проблемы.шаг, а затем использовать функции для пошаговой реализации этих шагов и вызывать их один за другим при их использовании;
Объектно-ориентированный - разложить транзакцию, составляющую проблему, на различные объекты. Целью установления объекта является не завершение шага, а описание поведения определенной вещи на всем шаге решения проблемы. объектно-ориентированныйФункцияразделить проблему, а нешаг. Объектно-ориентированное программирование использует для программирования базовые концепции, такие как объекты, классы, наследование, инкапсуляция и т. д.

Преимущества и недостатки:

Ориентированность на процесс:

преимущество: производительность выше, чем у объектно-ориентированного, потому что вызов класса должен быть создан, накладные расходы относительно велики и потребляют ресурсы; например, разработка встраиваемых систем, Linux/Unix и т. д. обычно используют процессно-ориентированную разработку и производительность является важным фактором.
недостаток: не объектно-ориентированный, прост в обслуживании, легко переиспользуется, легко расширяется.

объектно-ориентированный

преимущество: Высокая читабельность, простота обслуживания, простота повторного использования и простота расширения Благодаря характеристикам объектно-ориентированной инкапсуляции, наследования и полиморфизма можно разработать систему с низким уровнем связи, что сделает систему более гибкой и простой в обслуживании. .
- Простота обслуживания: каждому разработчику нужно поддерживать только определение и расширение функциональных полей и методов класса, за который он отвечает.
- Простота повторного использования: объекты не зависят друг от друга, а связь между функциями и объектами мала.
- Простота расширения: принадлежность и методы объектов легко расширяемы.
недостаток: Класс должен быть создан, когда его называют, накладные расходы относительно велики, и производительность ниже, чем у ориентированного на процесс

Отличие функции стрелки от нормальной функции

Объект this в теле функции — это объект, в котором он определен, а не объект, в котором он используется.
Нельзя использовать как конструктор, то есть нельзя использовать новую команду, иначе будет выброшена ошибка
Вы не можете использовать объект arguments, которого нет в теле функции. Если вы хотите использовать его, вы можете вместо этого использовать параметры Rest.
Команду yield нельзя использовать, поэтому функции стрелок нельзя использовать в качестве функций генератора.

Как реализовать асинхронное программирование

Перезвоните

Достоинства: Простой, понятный Недостатки: неудобен в обслуживании, высокая связанность кода

Мониторинг событий (используя режим, управляемый временем, в зависимости от того, возникает ли событие)

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

Публикация/подписка (шаблон Observer)

Аналогично мониторингу событий, но вы можете использовать «центр сообщений», чтобы узнать, сколько сейчас издателей и подписчиков. Объект обещания Преимущества: метод then можно использовать для записи цепочки, функция обратного вызова при ошибке может быть записана; Недостатки: относительно сложно написать и понять

Функция генератора

Достоинства: обмен данными внутри и вне тела функции, механизм обработки ошибок Недостаток: управление процессом неудобно

асинхронная функция

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

Цикл событий и макрозадачи, микрозадачи

цикл событий: цикл событий Задача макроса: макрозадача также известна как задача Микрозадачи: микрозадачи также известны как задания.

микрозадачи

process.nextTick (Node)
promise
Object.observe
MutationObserver (браузер)

задача макроса

script
setTimeout
setInterval
setImmediate
I/O
UI rendering
Функции обратного вызова (события, ajax и т. д.)

В цикле событий сначала будет выполнена основная задача js-потока, а затем он проверит, есть ли микрозадача (обещание) для выполнения.

Этапы выполнения цикла событий:

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

В цикле событий микрозадачи выполняются раньше макрозадач, поэтому даже еслиnew promise()код, который выполняется немедленно вsetTimeout(() => {}, 0)Код позади также будет выполнен заранее.

setTimeout(() => console.log(1), 0);

new Promise((resolve) => resolve(''), () => {})
    .then(() => {
        console.log(2);
        setTimeout(() => console.log(4), 0);
        new Promise((resolve) => resolve(''), () => {}).then(() => console.log(3))
    });

// 结果：2 3 1 4

Сборка мусора Javascript

пометить и подметать

Это наиболее распространенный метод сборки мусора в JavaScript.Когда переменная попадает в среду выполнения, например, переменная, объявленная в функции, сборщик мусора помечает ее как «попадающую в среду», а когда переменная покидает среду (выполнение функции заканчивается), он будет помечен как «Покинуть среду».
Сборщик мусора пометит все переменные, хранящиеся в памяти во время выполнения, а затем удалит переменные в среде и переменные (замыкания), на которые ссылаются переменные в среде.После их завершения пометка все еще существует.

подсчет ссылок

Утечки памяти часто происходят в более ранних версиях IE, часто из-за использования подсчета ссылок для сборки мусора.
Стратегия подсчета ссылок заключается в отслеживании того, сколько раз используется каждое значение.
Когда переменная объявляется и ей присваивается ссылочный тип, количество ссылок на это значение увеличивается на 1.
Если значение переменной становится другим, количество обращений к этому значению уменьшается на 1,
Когда количество ссылок на это значение становится равным 0, это означает, что переменная не используется, и значение не может быть доступно, поэтому пространство, занимаемое им, может быть освобождено, чтобы сборщик мусора очистил количество ссылок. когда он запущен. Пространство, занимаемое значением

глубокая копия

мелкая копия: скопируйте только первый слой

Object.assign,
спред оператор...

глубокая копия:JSON.parse(JSON.stringify(object)) дефект:

будет игнорировать неопределенное
Игнорировать символ
не могу сериализовать функцию
не может разрешать объекты с циклическими ссылками

процесс и поток

По сути, и процессы, и потоки являются описанием кванта времени работы процессора.

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

Пример: Перенесите эти концепции в браузер, когда вы откроетеTabстраница, она фактически создаетобработать, процесс может иметь несколько потоков, напримероказыватьнить,JS-движокнить,HTTP-запроснить и так далее. Когда вы инициируете запрос, вы фактически создаете поток, а когда запрос завершается, поток может быть уничтожен.

Преимущества однопоточности: Выше упоминался поток движка JS и поток рендеринга.Каждый должен знать, что рендеринг пользовательского интерфейса может быть заблокирован во время работы JS, что показывает, что эти два потока являются взаимоисключающими. Причина этого в том, что JS может изменять DOM, и если поток пользовательского интерфейса все еще работает во время выполнения JS, это может привести к небезопасному отображению пользовательского интерфейса. На самом деле это однопоточное преимущество: благодаря тому, что JS работает в одном потоке, он может экономить память, экономить время переключения контекста и не иметь проблем с блокировками.

ajax

function ajaxGet(url, params, success, fail) {
    // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url + encodeParams(params), true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                success(xhr.responseText);
            } else {
                fail && fail(xhr.status);
            }
        }
    }
    function encodeParams(obj){
	return Object
            .keys(obj)
            .map(function(key) {return encodeURIConponent(key) + '=' +encodeURIConponent(obj[key]})
            .join('&');
    }
}
function ajaxPost(url, params, success, fail) {
    // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                success(xhr.responseText);
            } else {
                fail && fail(xhr.status);
            }
        }
    }
    // 3. 连接服务器
    xhr.open('post', url, true)
    // 4. 发送请求
    xhr.send(JSON.stringify(params));
}

регулярное выражение

Как jQuery расширяет пользовательские методы

jQuery.fn.myMethod = function () {
    alert('myMethod');
};
// 或者：
jQuery.fn.extend({
    myMethod: function () {
        alert('myMethod');
    }
});
// 使用：
$("#div").myMethod();

делегация мероприятия

Привяжите событие к родительскому узлу, потому что всплывающая подсказка событий может получить фактический щелкнутый конечный узел, тем самым уменьшив количество привязок событий dom.

document.body.addEventListener('click', e => console.log(e));
/*
{
    currentTarget: null, // 当前绑定事件的节点，那为什么是null呢？看下面解释
    target: h1#title.title // 点击最下层的叶子结点
}
*/

ЗачемcurrentTargetдаnull:

Это вызвано механизмом, с помощью которого консоль регистрирует объект. log не содержит всех свойств объекта, он содержит только ссылку на этот объект. Когда вы нажмете, чтобы развернуть, он даст вам свойства этого объекта.
Таким образом, причина, по которой он равен null, заключается в том, что при вызове console.log(e) свойство currentTarget имеет значение, но затем это значение сбрасывается в значение null. Поэтому, когда вы расширяете объект события, все, что вы видите, это null.

§ typescript

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

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

Сценарии с использованием ts: TypeScript имеет лучшую проверку типов, но также в некоторой степени ограничивает гибкость js. Поэтому мы должны использовать js в повседневной разработке относительно независимых бизнес-потребностей и использовать ts в разработке крупномасштабных проектов с совместной работой нескольких человек и сложной логикой.

Ссылка: [Учебник по началу работы с TypeScript

](ts.xcatliu.com/)

Подробное сравнение ts и js

	JavaScript	TypeScript
1	Он был разработан Netscape в 1995 году.	Он был разработан в 2012 году Андерсом Хейлсбергом.
2	Исходные файлы JavaScript имеют расширение «.js».	Исходные файлы TypeScript имеют расширение «.ts».
3	JavaScript не поддерживает ES6.	TypeScript поддерживает ES6.
4	Он не поддерживает строгую или статическую типизацию.	Он поддерживает строго типизированные или статически типизированные функции.
5	Это просто скриптовый язык.	Он поддерживает концепции объектно-ориентированного программирования, такие как классы, интерфейсы, наследование, дженерики и т. д.
6	В JavaScript нет необязательных параметров.	TypeScript имеет функцию необязательных параметров.
7	Это интерпретируемый язык, поэтому он выделяет ошибки во время выполнения.	Он компилирует код и выделяет ошибки во время разработки.
8	JavaScript не поддерживает модули.	Модуль поддержки Teamscript.
9	Здесь число и строка являются объектами.	Здесь число и строка — это интерфейсы.
10	JavaScript не поддерживает дженерики.	TypeScript поддерживает дженерики.

объектно-ориентированный: Три основные особенности: «инкапсуляция», полиморфизм, «наследование», Пять принципов: «принцип единой ответственности», «принцип открытости и закрытости», «принцип замещения Лисков», «принцип инверсии зависимостей», «принцип разделения интерфейсов», «принцип Деметры (высокая связность, низкая связь)».

модуль
Добрый
интерфейс
наследовать
упаковка
полиморфизм
тип данных

тс установка и использование

# 全局安装typescript
npm install -g typescript  
# 安装ts后会自动安装一个命令行工具“tsc”，它将用于编译ts代码生成js文件。
tsc helloworld.ts  
# 实时热更新编译
tsc --watch helloworld.ts  
# ts源码调试
tsc -sourcemap helloworld.ts

Разница между интерфейсом и типом

1. интерфейс интерфейса определение: введите, проверяя структуру значения.эффект: определяет спецификации типов данных для именования типов и стороннего кода.

2. псевдоним типа

эффект: Дайте типу новое имя.

3. Тип в порядке, но интерфейс не

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

4. Интерфейс в порядке, но тип не тот

интерфейс может объявить слияние (когда имя интерфейса совпадает, взять объединение)

5. Интерфейс и тип могут быть

Оба могут использоваться для описания типа объекта или функции, но синтаксис отличается.

// 接口
interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}
// 类型别名
type Point = {
  x: number;
  y: number;
};
type SetPoint = (x: number, y: number) => void;

Оба могут быть расширены, но синтаксис отличается

Псевдонимы типов не могутнаследоватьПсевдонимы или интерфейсы других типов, а такжеунаследовал.

// 从 interface 扩展到 interface
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

// 从 type 扩展到 type
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

// 从 type 扩展到 interface
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

// 从 interface 扩展到 type
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

6. НаконецЕсли вы не знаете, когда использовать интерфейс/тип, если вы можете использовать интерфейс, используйте интерфейс, если нет, используйте тип.

Юаньцзу

Массивы ts объединяют объекты одного типа, а кортежи объединяют объекты разных типов.

js внутримножествосодержит себяЮаньцзуФункция, поддерживающая массивы с несколькими типами.

let tom: [string, number] = ['Tom', 25];

перечислить

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

Членам перечисления будут присвоены номера, которые увеличиваются с 0, а значение перечисления и имя перечисления также будут отображаться в обратном порядке.
Вы можете вручную присвоить значения элементам перечисления

enum Days {Sun, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days[0] === "Sun"); // true
// 上面的代码实际会被编译为：Days[Days["Sun"] = 0] = "Sun";

console.log(Days["Sun"] === 7); // true 手动赋值

Дженерики

Обобщения (Generics) относятся к функции, которая не указывает конкретный тип заранее при определении функции, интерфейса или класса, но указывает тип при его использовании.

Ссылаться на:Начало работы с TypeScript — дженерики

// 可以指定默认类型：T = string
function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']
createArray(3, 'x'); // 也可以自动推断类型

§ Параметры нескольких типовПри определении дженериков вы можете определить сразу несколько параметров типа с помощью кортежа:

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

§ Общие ограниченияКогда универсальная переменная используется внутри функции, поскольку заранее неизвестно, какого она типа, ее свойствами или методами нельзя манипулировать по желанию.

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

interface Lengthwise {
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

перечислить

enum statusCode{
    ok=0,
    error=1,
    pedding=2
}
statusCode[0] === 'ok'
statusCode['ok'] === 0

Поза для использования с vue2 и vue3

§ vue2 + ts

Ссылаться на:Лучшие практики для начала работы с Vue2 + TypeScript

В каталоге src есть еще два файла:

shims-tsx.d.ts, который позволяет вам писать код jsx в проекте Vue с файлами, оканчивающимися на .tsx.
shims-vue.d.tsОн в основном используется для TypeScript для распознавания файлов .vue.Ts не поддерживает импорт файлов vue по умолчанию.Этот файл сообщает ts, что импортированные файлы .vue обрабатываются в соответствии с VueConstructor.

§ Написание компонента Vue2 + typescript:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    name: 'HelloWorld',
    components:{ componentA, componentB},
})
export default class HelloWorld extends Vue {
    // 组件属性props
    @Prop({ default: 'default value' }) private msg!: string;

    // 组件数据data
    private test: { value: string }

    // 计算属性
    private get reversedMessage (): string[] {
  	return this.message.split('').reverse().join('')
    }
    // 监听数据变化（onMsgChanged方法名并无实际意义有即可）
    @Watch('child')
    onMsgChanged(val: string, oldVal: string) {}

    // Vuex 数据
    @State((state: IRootState) => state . booking. currentStep) step!: number
    @Getter( 'person/name') name!: name
  
    // 生命周期
    private created ()：void { },

    // method
    public getName(): string {
        let storeName = name
        return storeName
    }
}
</script>

§ Написание компонента Vue3 + typescript:

Ссылаться на:Vue3 + TypeScript Complete Project Руководство по началу работы

import { defineComponent, PropType } from 'vue'

interface Student {
    name: string
    class: string
    age: number
}
// option 风格
const Component = defineComponent({
    props: {
        success: { type: String },
        callback: {
            type: Function as PropType<() => void>
        },
        student: {
            type: Object as PropType,
            required: true
        }
    },
    data() {
        return {
            message: 'Vue3 code style'
        }
    },
    computed: {
        reversedMessage(): string {
            return this.message.split(' ').reverse().join('')
        }
    }
})
// Composition API风格
const Component = defineComponent(() => {
    const year = ref(2020)
    const month = ref('9')

    month.value = 9 // OK
    const result = year.value.split('') // => Property 'split' does not exist on type 'number'
    // reactive
    const student = reactive({ name: '阿勇', age: 16 })
})