[Перевод] Интервью по Javascript — идеальное руководство (с точки зрения разработчика)

Переводчик: Front-end Xiaozhi

оригинал:medium.com/Dev-bits/ ах-…

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Чтобы проиллюстрировать сложность JS-интервью, сначала попробуйте дать следующие результаты:

onsole.log(2.0 == “2” == new Boolean(true) == “1”)

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

1) Понимание функций JS

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

console.log(square(5));
/* ... */
function square(n) { return n * n; }

Я думал, что код очень простой, и все должны знать, что он напечатает:25. Тогда посмотрите на один:

console.log(square(5));
 
var square = function(n) { 
  return n * n; 
}

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

TypeError: square is not a function

В JavaScript, если вы определяете функцию как переменную, имя переменной будет поднято, и это будет выполняться JS.определениедля доступа.

Вы можете часто видеть следующий код в каком-то коде.

var simpleLibrary = function() {
   var simpleLibrary = {
        a,
        b,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

Зачем делать такие странные вещи? Это связано с тем, что переменные и функции в функциональной переменной упакованы, что позволяет избежать загрязнения глобальной переменной.JQueryприбытьLodashБиблиотека использует эту технику для предоставления$,_Ждать

2) Понимание связывания, применения и вызова

Возможно, вы видели эти три функции во всех распространенных библиотеках. Они допускают локализацию, и мы можем объединять функции в разные функции. Хороший js-разработчик может рассказать вам об этих трех функциях в любое время.

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

Чтобы вызвать функцию с некоторым контекстом, используйте.bind(), что полезно в событиях. Если вы хотите вызвать функцию немедленно, используйте.call()или.apply()и изменить контекст.

Например

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

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

После подачи учитель назвал его:

mathLib.area(2);
12.56

Учитель узнал, что он попросил вас бытьpiс точностью до десятичной точки5А ты только с точностью до медианы2Бит, теперь у вас нет возможности зафиксировать библиотеку, потому что крайний срок прошел. здесь jscallФункции могут помочь вам, просто вызовите свой код следующим образом:

mathLib.area.call({pi: 3.1159}, 2)

он динамически извлекает новыеpiзначения, результат следующий:

12.56636

В это время обратите вниманиеcallФункция имеет два параметра:

Context
параметр функции

существуетareaВ функции контекст — это место, где объект вызывается по ключевому словуthisВместо этого следующие аргументы передаются как аргументы функции. следующим образом:

var cylinder = {
    pi: 3.14,
    volume: function(r, h) {
        return this.pi * r * r * h;
    }
};

Метод вызова следующий:

cylinder.volume.call({pi: 3.14159}, 2, 6);
75.39815999999999

ApplyАналогично, только аргументы функции передаются в виде массивов.

cylinder.volume.apply({pi: 3.14159}, [2, 6]);
75.39815999999999

если бы вы использовалиcallвы будете в основном использоватьapply, и наоборот, чтоbindКак это используется?

bindпоставить новыйthisВнедрить в указанную функцию, изменитьthisуказывать, использоватьbind, функция не будет выглядетьcallилиapplyВыполнить немедленно.

var newVolume = cylinder.volume.bind({pi: 3.14159});
newVolume(2,6); // Now pi is 3.14159

bindКакова цель?Это позволяет нам внедрить контекст в функцию, которая возвращает новую функцию с обновленным контекстом. Это означает, что эта переменная будет предоставлена пользователем, что очень полезно при работе с событиями JavaScript.

3) Понимание области js (закрытие)

Область действия JavaScript — это ящик Пандоры. Из этой простой концепции можно составить сотни сложных вопросов для интервью. Есть три сферы:

глобальная область
локальная/функциональная область
Область блока (введена в ES6)

Примеры глобальной области действия следующие:

x = 10;
function Foo() {
  console.log(x); // Prints 10
}
Foo()

Область действия функции вступает в силу, когда вы определяете локальную переменную:

pi = 3.14;
function circumference(radius) {    
     pi = 3.14159;
     console.log(2 * pi * radius); // 打印 "12.56636" 不是 "12.56"
}
circumference(2);

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

var a = 10;

function Foo() {
  if (true) {
    let a = 4;
  }

  alert(a); // alerts '10' because the 'let' keyword
}
Foo();

И функции, и условия считаются блоками. Приведенный выше пример должен появиться4,потому чтоifЭто было выполнено. Но ES6 разрушает область действия переменных блочного уровня, и область видимости становится глобальной.

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

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

 function generator(input) {
    var index = 0;
    return {
      next: function() {
        if (index < input.length) {
          index += 1;
          return input[index - 1];
        }
        return "";
      } 
    }
  }

Выполните следующее:

var mygenerator = generator("boomerang");
mygenerator.next(); // returns "b"
mygenerator.next() // returns "o"
mygenerator = generator("toon");
mygenerator.next(); // returns "t"

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

4) это (глобальный домен, функциональный домен, объектный домен)

В JavaScript мы всегда пишем код с функциями и объектами.Если вы используете браузер, на него ссылаются в глобальном контексте.windowобъект. Я имею в виду, что если вы откроете консоль браузера и введете следующий код, вывод будетtrue.

this === window;

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

function Foo(){
  console.log(this.a);
}
var food = {a: "Magical this"};
Foo.call(food); // food is this

Подумайте о следующем выводе:

function Foo(){
    console.log(this); // 打印 {}?
}

Поскольку это глобальный объект, помните, что какой бы ни была родительская область, она будет унаследована дочерней областью. Распечатка - это объект окна. Три рассмотренных выше метода фактически используются для установки этого объекта.

Сейчас,thisпоследний тип в объектеthis, следующим образом:

var person = {
    name: "Stranger",
    age: 24,
    get identity() {
        return {who: this.name, howOld: this.age};
    }
}

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

person.identity; // returns {who: "Stranger", howOld: 24}

В настоящее время,thisНа самом деле относится к самому объекту. Как мы упоминали ранее, в разных местах он ведет себя по-разному.

5) Понимание объектов (Object.freeze, Object.seal)

Обычно формат объекта следующий:

var marks = {physics: 98, maths:95, chemistry: 91};

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

Объекты можно создавать следующими способами:

var marks = {};
var marks = new Object();

можно использоватьJSON.stringify()Преобразуйте объект в строку, вы также можете использоватьJSON.parseпревращая его в объект.

// returns "{"physics":98,"maths":95,"chemistry":91}"
JSON.stringify(marks);
// Get object from string
JSON.parse('{"physics":98,"maths":95,"chemistry":91}');

использоватьObject.keysОбъект итерации:

var highScere = 0;

for (i of Object.keys(marks)) {
  if (marks[i] > highScore)
    highScore = marks[i];
}

Object.valuesВозвращает значение объекта в виде массива.

Другими важными функциями объектов являются:

Object.prototype(object)
Object.freeze(function)
Object.seal(function)

Object.prototypeМногие функции, связанные с приложением, предоставляются выше, а именно:

Object.prototype.hasOwnPropertyИспользуется для проверки наличия данного свойства/ключа в объекте.

marks.hasOwnProperty("physics"); // returns true
marks.hasOwnProperty("greek"); // returns false

Object.prototype.instanceofСообщает, относится ли данный объект к определенному типу прототипа.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var newCar = new Car('Honda', 'City', 2007);
console.log(newCar instanceof Car); // returns true

использоватьObject.freezeОбъекты можно заморозить, чтобы невозможно было изменить существующие свойства объекта.

var marks = {physics: 98, maths:95, chemistry: 91};
finalizedMarks = Object.freeze(marks);
finalizedMarks["physics"] = 86; // throws error in strict mode
console.log(marks); // {physics: 98, maths: 95, chemistry: 91}

Здесь, пытаясь изменить замороженныйphysicsзначение, но JavaScript не позволяет этого. мы можем использоватьObject.isFrozenЧтобы определить, заморожен ли данный объект:

Object.isFrozen(finalizedMarks); // returns true

Object.sealа такжеObject.freezeНемного отличается.Object.seal()Метод окружает объект, предотвращая добавление новых свойств и помечая все существующие свойства как ненастраиваемые. Значение текущего свойства можно изменить, если оно доступно для записи.

var marks = {physics: 98, maths:95, chemistry: 91};
Object.seal(marks);
delete marks.chemistry; // returns false as operation failed
marks.physics = 95; // Works!
marks.greek = 86; // Will not add a new property

Точно так же вы можете использоватьObject.isSealedОпределяет, запечатан ли объект.

Object.isSealed(marks); // returns true

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

6) Понимание прототипного наследования

В традиционном JavaScript существует скрытая концепция наследования, которая достигается за счет использования методов прототипирования. См. Использование в ES5, ES6.newСинтаксис - это только синтаксический сахарный прототип оопа. Создать класс - использовать функцию JavaScript в завершении.

var animalGroups = {
  MAMMAL: 1,
  REPTILE: 2,
  AMPHIBIAN: 3,
  INVERTEBRATE: 4
};
function Animal(name, type) {
  this.name = name;
  this.type = type;
}
var dog = new Animal("dog", animalGroups.MAMMAL);
var crocodile = new Animal("crocodile", animalGroups.REPTILE);

Здесь мы создаем объекты для класса (используяnewключевое слово), вы можете добавить методы к классу следующим образом:

Animal.prototype.shout = function() {
  console.log(this.name+'is'+this.sound+'ing...');
}

Здесь у вас могут возникнуть вопросы. класс неsoundАтрибуты. Да, он предназначен для передачи подклассами, унаследованными от вышеуказанного класса.

В JavaScript наследование реализовано следующим образом:

function Dog(name, type) { Animal.call(this, name, type); this.sound = 'bow'; }

Я определяю более конкретную функцию, называемуюDog. Здесь, чтобы унаследоватьAnimalclass, мне нужно передать этот и другие параметры. Используйте следующий метод для создания экземпляра德国牧羊犬.

var pet = Dog("德国牧羊犬", animalGroups.MAMMAL);
console.log(pet); // returns Dog {name: "德国牧羊犬", type: 1, sound: "bow"}

Мы не присваиваем в подфункцииnameа такжеtypeсвойства, мы вызываем суперфункцию Animal и устанавливаем соответствующие свойства.petИмеет атрибуты (имя, тип) родительского класса. Но как насчет метода. Они тоже наследуют?

pet.shout(); // Throws error

Почему это происходит? Это происходит потому, что в JavaScript не указано наследование метода родительского класса. Как решить?

// Link prototype chains
Dog.prototype = Object.create(Animal.prototype);
var pet = new Dog("germanShepard", animalGroups.MAMMAL);
// Now shout method is available
pet.shout(); // 德国牧羊犬 bowing...

теперь доступноshoutметод. мы можем использоватьobject.constructorФункция для проверки класса данного объекта в JavaScript Давайте посмотримpetкакой класс:

pet.constructor; // returns Animal

Это расплывчато,Animalявляется родительским классом. ноpetКакой это тип?petдолжно бытьDogтип. почемуAnimalтипа потому чтоDogКонструктор класса:

Dog.prototype.constructor; // returns Animal

этоAnimalТип. Мы должны установить его наDogСам, так что все экземпляры (объекты) класса приведены правильное имя класса.

Dog.prototype.constructor = Dog;

Что касается наследования прототипов, мы должны помнить следующее:

использование атрибута классаthisсвязывать
использование метода классаprototypeобъект для привязки
Чтобы наследовать свойства, используйтеcallфункция для прохожденияthis
Для того, чтобы наследовать метод,Object.createПрототипы, соединяющие родителя и потомка
Всегда устанавливайте конструктор подкласса на себя, чтобы получить правильный тип его объекта.

7) Понимание обратных вызовов и обещаний

Обратный вызов — это функция, которая выполняется после завершения операции ввода-вывода. Занимающая много времени операция ввода-вывода заблокирует код, поэтому в Python/Ruby это не разрешено. Но в JavaScript, поскольку разрешено асинхронное выполнение, мы можем предоставлять обратные вызовы для асинхронных функций. Этот пример представляет собой вызов AJAX (XMLHettpRequest) из браузера на сервер, генерируемый событиями мыши и клавиатуры. следующим образом:

function reqListener () {
  console.log(this.responseText);
}

var req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();

здесьreqListenerявляется функцией обратного вызова при успешном ответеGETФункция обратного вызова будет выполнена при запросе.

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

Writing neat asynchronous Node JS code with Promises

8) Понимание регулярных выражений

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

Существует два способа создания регулярного выражения:

var re = /ar/;
var re = new RegExp('ar');

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

re.exec("car"); // returns ["ar", index: 1, input: "car"]
re.exec("cab"); // returns null

Есть несколько специальных классов символов, которые позволяют нам писать сложные регулярные выражения.RegExСуществует много типов элементов, вот некоторые из них:

Обычный персонаж:\w-буква и цифра,\d- количество,\D- нет номеров
Регулярное выражение класса символов: [x-y]х-у интервал,[^x]нет х
Обычное количество:+хотя бы один,?нет или больше,*несколько
нормальная граница,^Начинать,$конец

Примеры следующие:

/* Character class */

var re1 = /[AEIOU]/;
re1.exec("Oval"); // returns ["O", index: 0, input: "Oval"]
re1.exec("2456"); // null
var re2 = /[1-9]/;
re2.exec('mp4'); // returns ["4", index: 2, input: "mp4"]

/* Characters */

var re4 = /\d\D\w/;
re4.exec('1232W2sdf'); // returns ["2W2", index: 3, input: "1232W2sdf"]
re4.exec('W3q'); // returns null

/* Boundaries */

var re5 = /^\d\D\w/;
re5.exec('2W34'); // returns ["2W3", index: 0, input: "2W34"]
re5.exec('W34567'); // returns null
var re6 = /^[0-9]{5}-[0-9]{5}-[0-9]{5}$/;
re6.exec('23451-45242-99078'); // returns ["23451-45242-99078", index: 0, input: "23451-45242-99078"]
re6.exec('23451-abcd-efgh-ijkl'); // returns null

/* Quantifiers */

var re7 = /\d+\D+$/;
re7.exec('2abcd'); // returns ["2abcd", index: 0, input: "2abcd"]
re7.exec('23'); // returns null
re7.exec('2abcd3'); // returns null
var re8 = /<([\w]+).*>(.*?)<\/\1>/;
re8.exec('<p>Hello JS developer</p>'); //returns  ["<p>Hello JS developer</p>", "p", "Hello JS developer", index: 0, input: "<p>Hello JS developer</p>"]

Дополнительные сведения о регулярном выражении см.здесь.

КромеexecКроме того, есть и другие функции, а именноmatch,searchа такжеreplace, вы можете использовать регулярные выражения для поиска строки в другой строке, но эти функции используются в самой строке.

"2345-678r9".match(/[a-z A-Z]/); // returns ["r", index: 8, input: "2345-678r9"]
"2345-678r9".replace(/[a-z A-Z]/, ""); // returns 2345-6789

Регулярные выражения — важная тема, и разработчики должны понимать ее, чтобы легко решать сложные проблемы.

9) Понимать карту, уменьшать и фильтровать

Сегодня функциональное программирование является горячей темой для обсуждения. Многие языки программирования включают в новые версии функциональные концепции, такие как лямбда-выражения (например, Java >7). В JavaScript поддержка конструкций функционального программирования существует уже давно. Есть три основные функции, которые нам нужно изучить подробно. Математические функции принимают некоторые входные данные и возвращают выходные данные. Все чистые функции возвращают один и тот же результат для заданного ввода. Функции, которые мы сейчас обсуждаем, также удовлетворяют требованиям чистоты.

map

Функция map доступна в массивах JavaScript, с помощью этой функции мы можем получить новый массив, применив функцию преобразования к каждому элементу массива.mapОбщий синтаксис:

arr.map((elem){
    process(elem)
    return processedValue
}) // returns new array with each element processed

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

var data = ["2345-34r", "2e345-211", "543-67i4", "346-598"];
var re = /[a-z A-Z]/;
var cleanedData = data.map((elem) => {return elem.replace(re, "")});
console.log(cleanedData); // ["2345-34", "2345-211", "543-674", "346-598"]

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

reduce

reduceФункция организует данный список в окончательный результат. Сделайте то же самое, перебирая массив и сохраняя промежуточные результаты в переменной. Вот более краткий способ сделать это. jsreduceОбычно используйте следующий синтаксис:

arr.reduce((accumulator,
           currentValue,
           currentIndex) => {
           process(accumulator, currentValue)
           return intermediateValue/finalValue
}, initialAccumulatorValue) // returns reduced value

accumulatorПромежуточные и окончательные значения сохраняются.currentIndex,currentValueявляются индексом и значением элемента в массиве соответственно.initialAccumulatorValueдаaccumulatorПервоначальный значение.

reduceПрактическое применение состоит в том, чтобы сгладить массив, преобразовав внутренний массив в один массив следующим образом:

var arr = [[1, 2], [3, 4], [5, 6]];
var flattenedArray = [1, 2, 3, 4, 5, 6];

Мы можем сделать это с помощью обычной итерации, но используяreduce, код будет более лаконичным.

var flattenedArray = arr.reduce((accumulator, currentValue) => {
    return accumulator.concat(currentValue);
}, []); // returns [1, 2, 3, 4, 5, 6]

filter

filterа такжеmapCloser работает с каждым элементом массива и возвращает другой массив (отличный отreduceвозвращаемое значение). Отфильтрованный массив может быть короче исходного массива, потому что некоторые вещи, которые нам не нужны, исключаются условиями фильтрации.

filterСинтаксис следующий:

arr.filter((elem) => {
   return true/false
})

elemэлемент в массиве, наtrue/falseУказывает на сохранение/исключение фильтрующего элемента. Предположим, мы отфильтровываемtначать сrЗакрывающий элемент:

var words = ["tiger", "toast", "boat", "tumor", "track", "bridge"]
var newData = words.filter((str) => {
    return str.startsWith('t') && str.endsWith('r');
})
newData // (2) ["tiger", "tumor"]

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

10) Понимание шаблонов обработки ошибок

Это JavaScript, который не волнует многих разработчиков. Я вижу очень мало разработчиков, говорящих об обработке ошибок, хороший подход к разработке всегда заключается в том, чтобы обернуть код JS вtry/catchвокруг квартала.

В JavaScript, пока мы пишем код по своему желанию, он может выйти из строя, если показано:

$("button").click(function(){
    $.ajax({url: "user.json", success: function(result){
        updateUI(result["posts"]);
    }});
});

Здесь мы попадаем в ловушку, где мы говоримresultВсегда объект JSON. Но иногда сервер падает, возвращаяnullвместоresult. при этих обстоятельствах,null["posts"]выдаст ошибку. Правильный способ справиться с этим может быть следующим:

$("button").click(function(){
    $.ajax({url: "user.json", success: function(result){
    
      try {     
        updateUI(result["posts"]);
       }
      catch(e) {
        // Custom functions
        logError();
        flashInfoMessage();      
      }
    }});
});

logErrorФункция используется для сообщения об ошибках на сервер.flashInfoMessageзаключается в отображении удобного для пользователя сообщения, такого как «Служба в настоящее время недоступна» и т. д.

Николас говорит, что вручную выдает ошибки, когда вы думаете, что должно произойти что-то неожиданное. Различают фатальные и нефатальные ошибки. Вышеупомянутая ошибка связана с выходом из строя внутреннего сервера, что является фатальным. Там клиент должен быть уведомлен о том, что обслуживание было прервано по какой-то причине.

В некоторых случаях это может быть не фатально, но лучше уведомить сервер. Чтобы создать такой код, сначала выдайте ошибку изwindowИерархия перехватывает событие ошибки, а затем вызывает API для регистрации сообщения на сервере.

reportErrorToServer = function (error) {
  $.ajax({type: "POST", 
          url: "http://api.xyz.com/report",
          data: error,
          success: function (result) {}
  });
}
// Window error event
window.addEventListener('error', function (e) {
  reportErrorToServer({message: e.message})
})}
function mainLogic() {
  // Somewhere you feel like fishy
  throw new Error("user feeds are having fewer fields than expected...");
}

Этот код выполняет три основные функции:

Отслеживание ошибок на уровне окна
Вызывать API всякий раз, когда возникает ошибка
войти на сервер

Вы также можете использовать новыйBooleanФункция (es5, es6) проверяет допустимость переменной перед программой и не является нулевой, неопределенной

if (Boolean(someVariable)) {
// use variable now
} else {
    throw new Error("Custom message")
}

Всегда учитывайте, что обработка ошибок — ваша обязанность, а не браузер.

Другое (подъемный механизм и всплытие событий)

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

Подъемный механизм

Переменный подъемник - это процесс повышения объема объявленной переменной в глобальную область во время выполнения кода, например:

doSomething(foo); // used before
var foo; // declared later

когда вPythonПри выполнении вышеуказанного на таком языке сценариев возникает ошибка, поскольку его необходимо определить, прежде чем его можно будет использовать. Хотя JS является языком сценариев, он имеет механизм подъема, в котором виртуальная машина JavaScript выполняет две функции при запуске программы:

Сначала просмотрите программу, соберите все объявления переменных и функций и выделите для них место в памяти.
Выполните программу, заполнив выделенные переменные, иначе заполнивundefined

Во фрагменте кода вышеconsole.logРаспечатать“undefined”. Это потому, что при первом проходе переменнаяfooсобирается. Поиск виртуальной машины JS как переменнойfooлюбое определенное значение. Это поднятие может привести к тому, что многие сценарии JavaScript будут выдавать ошибки в одних местах и использовать в других.undefined.

выучить кое-чтопримерчтобы понять надбавку.

всплывающее окно события

По словам старшего инженера-программиста Аруна П., дела идут бурно:

«Всплытие событий и захват — это два способа распространения событий в API HTML DOM, когда событие происходит в элементе внутри другого элемента, и оба элемента имеют зарегистрированные обработчики для события, режим распространения события определяет порядок, в котором элементы получают события. ."

При всплытии события сначала захватываются и обрабатываются самым внутренним элементом, а затем распространяются на внешние элементы. Для захвата процесс обратный. мы обычно используемaddEventListenerФункция прикрепляет событие к обработчику.

addEventListener("click", handler, useCapture=false)

useCaptureключевое слово для третьего параметра, по умолчаниюfalse. Таким образом, в всплывающем режиме события передаются снизу вверх. Вместо этого это режим захвата.

Пузырьковый режим:

<div onClick="divHandler()">
    <ul onClick="ulHandler">
        <li id="foo"></li>
    </ul>
</div>
<script>
function handler() {
 // do something here
}
function divHandler(){}
function ulHandler(){}
document.getElementById("foo").addEventListener("click", handler)
</script>

Нажмите на элемент li, последовательность событий:

handler() => ulHandler() => divHandler()

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

document.getElementById("foo").addEventListener("click", handler, true)

Цепочка событий:

divHandler => ulHandler() => handler()

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

Это основные понятия в JavaScript. Как я упоминал вначале, в дополнение к опыту работы и знаниям, будьте готовы иметь помощника для прохождения вашего собеседования по JavaScript. Всегда продолжайте учиться. Следите за последними событиями (глава 6). Подробно изучите все аспекты JavaScript, такие как движок V6, тестирование и многое другое. В конце концов, интервью без освоения структур данных и алгоритмов не увенчаются успехом.Oleksii TrekhlebКурировал отличный git-репозиторий, содержащий все алгоритмы подготовки к интервью с использованием кода JS.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:

medium.com/Dev-bits/ ах-…

Ваши лайки - моя мотивация продолжать делиться хорошими вещами, ставьте лайки!

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.