Это мой первый JavaScript первичные методы | Бычье новогоднее эссе

Источник Github: это мой первый трюк для новичков в JavaScript.| Просите звездочки ✨ | Ставьте ❤️ подписку, ❤️ лайк, ❤️ поощряйте автора

Привет всем, яКороль Демонов Нэчжа, приятно познакомиться~~

Жизненное кредо Нэчжи:Если вам нравится то, что вы изучаете, у вас будет сильная мотивация.

Изучая программирование каждый день, вы будете в шаге от своей мечты. Спасибо каждому программисту, который любит программирование. Какими бы замечательными ни были ваши знания, пойдемте со мной, чтобы успокоить это блуждающее сердце, продолжайте, давай,2021Ну давай же! Добро пожаловать, чтобы подписаться и добавить меняvx:xiaoda0423, добро пожаловать, лайкайте, добавляйте в избранное и комментируйте

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

предисловие

Если эта статья вам поможет, ставьте ❤️ подписку, ❤️ лайк, ❤️ подбадривайте автора, вы приняли вызов? Публичный аккаунт статьи публикуется впервые, обратите вниманиеПрограммист ДораэмонПолучите последние статьи в первый раз

❤️Заправки❤️~

Как работает JavaScript

1. HTMLязык гипертекстовой разметки для указанияСодержание и структура веб-страниц
2. CSSКаскадные таблицы стилей для указаниявнешний вид веб-страницы,CSSИспользуется для указания стилей, реализованных независимо от структуры страницы.
3. JavaScriptможно добавить на страницуповедение

Переменные и значения JavaScript

1. При объявлении переменных всегда начинайте с ключевого словаvarголова.
2. В любом случае это нужно сделать, пусть и опустив ключевое словоvar,JavaScriptОн также не сообщит об ошибке.
3. Когда вы создаете переменную, вы можете присвоить ей значение позже, не указывая начальное значение. (Переменная говорит:Нет ценности, значит, я не бесполезен, это не очень больно и крайне обидно)

Переменная говорит, что у меня тоже есть (имя). --- Не могли бы вы просто назвать мне что-нибудь?

• Во-первых, чтобыбуква, подчеркивание или знак доллараначало.
• Во-вторых, вы можете использовать любое количествоБуквы, цифры, символы подчеркивания или знаки доллара.

Кстати, и не используйте встроенныеключевые словаОй! (Дада спросил: Тогда как я узнаю, какие там ключевые слова? Переменная: Ха-ха! Да, есть много ключевых слов, которые я не могу вспомнить, но те, которые обычно используются, чем больше вы знаете, тем больше вы их узнаете , и запоминать их не надо. Оставайтесь. Дайте я вам скажу переменные, так что не называйте мне эти имена)

Например, следующие ключевые слова:

break,delete,for,let,super,void,case,do,function,new,switch,
while,catch,package,this,with,class,enum,implements,
else,if,package,private,throw,yield,const,export,import,
protected,true,continue,extends,in,public,try,debugger,
false,instanceof,return,typeof,default,finally,
interface,static,var

Дада спросил: Так что же такое ключевое слово?

Nezha: Ключевые слова используются JavaScript для специальных целей, а ключевые слова — это зарезервированные слова в JavaScript.

Дада спрашивает: Если имя переменной содержит ключевое слово

Нежа: Да, если имя переменной не совпадает с ключевым словом.

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

логический оператор

Булевы операторы используются для полученияtrueилиfalseв логическом выражении.

Булевы операторы бывают двух видов: 1. Операторы сравнения и 2. Логические операторы.

1. Операторы сравнения, операторы сравнения сравнивают два значения.

Вот несколько распространенных операторов сравнения:

< 表示小于
> 表示大于
== 表示等于
=== 表示正好等于
<= 表示小于或等于
>= 表示大于或等于
!= 表示不等于

2. Логические операторы:

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

|| 表示OR(或)，只要至少有一个表达式为true，结果就为true
&& 表示ADN(与)，仅当两个表达式都为true时，结果才为true
! 表示NOT(非)，仅当表达式为false时，结果才为true

Math.random

1. Math.randomгенерировать0~1(исключая 1) цифры, использоватьMath.randomМаксимальное число, которое может быть сгенерировано, равно0.9999....
2. Math.floorвсегда округляйте вниз, как в1.2округляется до1.

Глобальные и локальные переменные

1. Если переменная объявлена ​​вне функции, это глобальная переменная;
2. Если переменная объявлена ​​внутри функции, это локальная переменная.

Понимание области действия локальных и глобальных переменных

Место, где переменная определена, определяет ее область действия, то есть, где в коде переменная видна, а где нет.

Жизненный цикл:

1. глобальная переменная находится вJavaScriptОн рождается после загрузки кода на веб-страницу и умирает после исчезновения веб-страницы. При перезагрузке страницы все глобальные переменные уничтожаются и создаются заново.
2. Локальные переменные обычно исчезают в конце функции.Локальные переменные создаются после вызова функции и живут до тех пор, пока функция не вернется, независимо от того, имеет функция возвращаемое значение или нет.

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

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

Пример:

var dada = 12;
function getName(name) {
 var dada = 123;
 // 有一个名为dada的全局变量，还有一个名为dada的局部变量。
}

Дада: Так могут ли формальные параметры и глобальные переменные иметь одно и то же имя?

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

Спецификация: Напишите код для объявления локальных переменных в начале функции. Хорошая практика программирования - объявлять локальные переменные в начале функции. Это позволяет другим легко найти эти объявления при чтении вашего кода и четко видеть, что функция используется какие переменные.

функция чтения

JavaScriptФункции могут быть объявлены до или после использования.

Например:

var dada = 12;
var jeskson = dadaFun(dada);
console.log(jeskson);

function dadaFun(name) {
 run name;
}

На самом деле браузер считывает счет:

1. прочитать все определения функций;
2. Начать выполнение кода.

Как JavaScript взаимодействует с веб-страницами

DOM создается браузером при загрузке веб-страницы.

1. Когда веб-страница загружается в браузер, браузер не толькоHTMLАнализ выполняется и отображается на дисплее, а также создается ряд объектов, представляющих маркеры. Эти объекты хранятся вDOMсередина;
2. JavaScriptкод доступен сDOMвзаимодействовать для доступа к элементу и его содержимому, вы также можете использоватьDOMсоздавать или удалять элементы;
3. JavaScriptмодификация кодаDOM, браузер будет динамически обновлять веб-страницу, позволяя пользователям видеть новый контент на веб-странице.

getElementById

Меры предосторожности:

согласно сidотDOMПри получении элемента, если указаноidне существует,getElementByIdвернусьnull,передачаgetElementById, проверьте, возвращено лиnullРекомендуется обеспечить доступ к свойствам только при возврате элемента.

JavaScript чувствителен к регистру

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

использовать аннотации

Используйте аннотации при написании кода, например:

// 这是单行注解
/* 这是一段注解 */
/*
* 这是一段注解
* 可以多行
*/

undefined

Используя неинициализированные переменные, обращаясь к несуществующим свойствам, используя несуществующие элементы массива, вы все столкнетесь сundefined.

undefinedВсе, что еще не имеет ценности, будетundefinedдать ему.

Пример:

var da;
if (da == undefined) {
 // da未定义
}
// 用于检查变量是否未定义，需和undefined进行比较

Проверьте, не определено ли свойство, например:

var daObj = {
 name: 'dadaqianduan.cn'
};

if(daObj.age == undefined) {
 // 获取对象的age
}

использоватьundefined, если вам нужно судить в своем коде (например, свойство или переменная могут не иметь значения), вам нужно проверить, является ли оноundefined.

ноль и NaN

nullИспользуется для указания того, что объект не существует.

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

Выражать:NaN != NaN

потому чтоNaNне равен ничему, включая самого себя, поэтому его нельзя использовать следующим образом:

// 错误
if(myNum == NaN) {
 // 错误用法
}

можно использовать функциюisNaNВыражать:

if(isNaN(myNum)) {
 // 使用函数isNaN，当它传入的值不是数字时返回true
}

NaNПредставление: непредставимое число (понимаемое какNaNявляется числом, но его просто невозможно представить), поэтому не все числа, которые нельзя представить, одинаковы, тоNaNне равен самому себе.

Пример:0/0РезультатNaN,а также10/0РезультатInfinity,существуетJavaScriptсередина,Infinityотносится к любому значению, превышающему верхний предел числа с плавающей запятой,InfinityТип числовой. БудуInfinityПри вычитании из самого себя получаетсяNaN,nullРезультат типаobject.

nullпредставляет несуществующий объект

присваивание и равенство

Пример:

var da = 1;
// = 是赋值运算符，用于给变量赋值

da == 2;
// == 是比较运算符，用于对两个值进行比较，看看它们是否相等

Проверить, равны ли два объекта

При проверке равенства двух объектных переменных сравнение является ссылкой на объект, а объектная переменная хранит ссылку на объект.

Две ссылки равны, только если они относятся к одному и тому же объекту.

значение зарегистрировано как ложное

Указывает, что значение ложно: 5 ложных значений

undefined, null, 0, 空字符串, NaN

идентификатор

Что такое идентификатор, это имя, вJavaScript, идентификаторы используются для именования переменных и функций или дляJavaScriptМаркеры мест перехода в некоторых операторах цикла в коде.

JavaScriptИдентификатор должен начинаться сбуква, подчеркивание или знак доллараstart, следующие символы могут бытьБуквы, цифры, символы подчеркивания или знаки доллара.

нить

существуетJavaScript, строки поддерживаются как примитивные типы, так и объекты.

Строковые свойства:length

АтрибутыlengthУказывает, сколько символов содержит строка, что очень удобно для перебора символов в строке.

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

методindexOf, который принимает строку в качестве аргумента и возвращает индекс первого символа в аргументе при первом вхождении аргумента в строку.

Первый параметр — целевая строка; второй параметр — индекс, указывающий, с чего начать поиск; третий — если указанная строка не найдена, будет возвращен индекс-1.

методsubstring, который принимает два индекса в качестве параметров, извлекает и возвращает подстроку между двумя индексами. Если второй параметр опущен, будет извлечена подстрока от указанного индекса до конца строки.

var da = data.substring(1,5);

var da1 = data.substring(1);

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

аккуратный:

1. toLowerCase, преобразует все символы верхнего регистра в строке в нижний регистр и возвращает результат
2. slice, удалить часть строки и вернуть результат
3. substring, который возвращает часть строки
4. lastIndexOf,а такжеindexOfАналогично, но находит последнюю подстроку
5. match, который находит в строке подстроки, соответствующие регулярному выражению
6. trim, удаляет пробельные символы в начале и в конце строки, обеспечивая удобство обработки пользовательского ввода.
7. replace, найдите подстроки и замените их все другой строкой
8. concat, соедините строки
9. toUpperCase, преобразует все символы нижнего регистра в строке в верхний регистр и возвращает результат

мероприятие

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

Создайте обработчик события:

// 处理程序就是一个函数
function da() {
 console.log('dadaqianduan.cn');
}

доступDOMфотографии в

var image = document.getElementById('dadapic'); // 获取指向图像元素的引用
// 只有网页加载完毕后，我们才能从DOM中获取图像
window.onload = init;
function init() {
 var image = document.getElementById('dadapic');
 // 创建init函数，并将其赋给属性onload，从而确保这些代码在网页加载完毕后才执行
}

// 添加图像处理程序
window.onload = init;
function init() {
 var image = document.getElementById("dadapic");
 image.onclick = dadaFun;
}
// 将一个处理程序赋给从DOM中获取的图像对象的onclick属性
// 编写函数dadaFun
function dadaFun() {
 var image = document.getElementById("dadapic");
 image.src = "dadaqianduan.jpg";
 // 将图像元素的src属性更换图片
}

События и очереди

Браузер постоянно извлекает события из этой очереди и вызывает соответствующие обработчики событий для их обработки.

mousemoveмероприятие:

Когда мышь перемещается по определенному элементу,mousemoveСобытие уведомляет соответствующий обработчик, для указания обработчика можно использовать атрибут элементаonmousemove, который передал бы такой обработчик события aeventобъект, который содержит следующие свойства:

clientXа такжеclientY, мышь относительнобраузерСоздает расстояние между левым и верхним краями в пикселях.

screenXа такжеscreenY, мышь относительноэкран устройстваРасстояние между левым краем и верхним краем в пикселях.

pageXа такжеpageY, мышь относительностраница в ИнтернетеРасстояние между левым краем и верхним краем в пикселях`

Технические характеристики

Написание ремонтопригодного кода очень важно, иначе вас будут сильно ругать! ! !

1. Напишите код без помощи исходного разработчика, чтобы любой, кто смотрит на код, знал, что он делает и как он реализован.
2. Пишите код✍, будьте логичны, какой бы сложной ни была операция, в коде все должно быть логично.
3. Тщательно думайте, пишите код и не переписывайте его при изменении использования данных.
4. Он должен быть разработан (архитектура кода) для поддержки будущих расширенных основных функций.
5. Упростите отладку для себя или других, сделайте так, чтобы код предоставлял четкую информацию, и найдите проблему с помощью отладки.
6. Прежде чем учиться, вы должны обратить внимание на спецификации написания кода и сделать код простым в обслуживании и читабельным.
7. Обратите внимание на написание комментариев, описывающих его назначение в функции и методе, а также алгоритм, используемый для выполнения задачи. В больших блоках кода, сложных алгоритмах добавляйте комментарии.
8. Правильное наименование переменных и функций в коде имеет решающее значение для его удобочитаемости и удобства сопровождения. Например, имена переменных должны быть существительными, имена функций должны быть глаголами, а функции, возвращающие логические значения, часто начинаются сisИспользуйте логические имена (подходящей длины) для переменных и функций. Переменные, функции и методы должны начинаться со строчной буквы и использовать верблюжий регистр. Имена классов должны быть написаны с большой буквы. Постоянные значения должны быть все в верхнем регистре и с подчеркиванием. Затем имя должно быть максимально описательным и интуитивно понятным.

ES6Ранее метод инициализации не подходил для параметров функции в объявлении функции, после этого можно указать значение параметра по умолчанию в объявлении функции для указания типа параметра.

Способ указать тип переменной — через инициализацию. Пример:

// 通过初始化标明变量类型
let daBoolean = false; // 布尔值
let daNumber = -1; // 数值
let daString = ""; // 字符串
let daObject = null; // 对象

В венгерской нотации способ обозначения типа переменной.

JavaScriptТрадиционное венгерское представление

o 表示 对象
s 表示 字符串
i 表示 整数
f 表示 浮点数
b 表示布尔值

let bDa; // 布尔值
let iDa; // 整数
let sDa; // 字符串

Но недостаток этого в том, что читабельность кода снижается и он недостаточно интуитивно понятен.

Также можно использовать аннотации типов, но они недостаточно элегантны.

Сетримит работает

функцияsetTimeoutСоздайте таймер обратного отсчета и свяжите его с обработчиком. Этот обработчик вызывается, когда таймер достигает нуля.

• setIntervalвернутьtimerобъект. Чтобы остановить таймер, передайте его другой функцииclearInterval.
• Строго говоря, должно быть написаноwindow.setTimeout,потому чтоwindowГлобальный объект может быть опущен.
• передачаsetTimeout, обработчику можно передать любое количество аргументов: 0, 1 и более.
• Объект события в основном используется дляDOMобработчик события,setTimeoutОбъект события не передается обработчику, поскольку событие времени не инициируется определенным элементом.

мероприятие

1. click, который срабатывает при клике на веб-странице.
2. resize, который срабатывает всякий раз, когда пользователь изменяет размер окна браузера.
3. play, пользователь нажимаетvideoЭто событие запускается, когда активируется кнопка воспроизведения элемента.
4. pause, пользователь нажимаетvideoЭтот мир будет запускаться при нажатии кнопки паузы элемента.
5. load, событие запускается после того, как браузер завершает загрузку веб-страницы.
6. unload, это событие будет запущено, когда пользователь закроет окно браузера или переключится на другие веб-страницы.
7. dragstart, это событие будет срабатывать, когда пользователь перетаскивает элемент на веб-странице.
8. drop, это событие будет срабатывать, когда пользователь отпускает перетаскиваемый элемент.
9. mousemove, который срабатывает при наведении мыши на элемент.
10. mouseover, который срабатывает, когда пользователь указывает мышью на элемент.
11. touchstart, который срабатывает, когда пользователь касается и удерживает элемент на сенсорных устройствах.
12. touchend, это событие запускается, когда пользователь перестает касаться.
13. keypress, пользователь нажимает любую клавишу, чтобы вызвать это событие.
14. mouseout, который срабатывает, когда пользователь отводит указатель мыши от элемента.

утиный метод

Пример кода и описание:

window.onload = dada;
function dada() {
 var image = document.getElementById("dadaqianduan");
 image.onclick = showDa;
}

function showDa() {
 var image = document.getElementById("dadaqianduan");
 image.src="dada.jpg";
}

Когда страница загружается, определите функциюdada和showDa;БудуdadaУкажите как обработчик загрузки события, когда происходит событие загрузки страницы, обработчик событий загрузки называетсяdada,Получатьid为dadaqianduanэлемент изображения, установите обработчик события щелчка для этого элемента изображения наshowDa, когда происходит событие клика по изображению, вызовитеshowDa,Получатьid为dadaqianduanэлемент изображения. положи этоsrc属性设置为dada.jpg.

Функции являются гражданами первого класса

Стандартное объявление функции, определяемое ключевым словомfunction，函数名，形参和代码块сочинение.

Пример функции объявления:

function da(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}

// 调用这个函数
da(12);

Показать другое (ссылка на функцию):

var da = function(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}
da(12);

объявления функций и выражения функций

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

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

Эта функция называетсяda, поэтому создайтеdaпеременная для хранения ссылки на эту функцию.

1. Обрабатывать объявления функций перед другим кодом.
2. Объявление функции — это законченный оператор, а выражение функции — только его часть.
3. Функциональные выражения обрабатываются вместе с другим кодом.
4. Для функций, созданных объявлениями функций и функциональными выражениями, операторы, которые их вызывают, обрабатываются одинаково.
5. Объявления функций следует использовать везде, где это возможно, потому что они обрабатываются в первую очередь.
6. Вместо возврата ссылки на функцию объявление функции создает переменную с тем же именем, что и функция, и присваивает ей ссылку на функцию.
7. Выражение функции возвращает ссылку на переменную, созданную выражением функции.
8. Вы можете хранить ссылки на функции в переменных.

разница

1. При использовании объявления функции функция будет объявлена ​​вперед выполнением кодаСоздайте
2. При использовании функциональных выражений функция будетэтап выполненияСоздается при выполнении кода
3. При использовании объявления функцииСоздайте переменную с тем же именем, что и функция, и сделайте так, чтобы он указывал на функцию
4. При использовании функциональных выражений обычноНе присваивайте имя функции, поэтому вы либо присваиваете функцию переменной в своем коде, либо иным образом используете функциональное выражение

Характеристики граждан первого сорта

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

Во-вторых, передайте его функции

В-третьих, вернуть их из функции

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

1. Как определить функцию: используйтеобъявление функциии использоватьфункциональное выражение
2. Ссылка на функцию — это указатель назначение функции
3. Объявления функций обрабатываются до выполнения кода
4. Функциональные выражения выполняются вместе с другим кодом во время выполнения.
5. При обработке объявления функции браузер создает функцию и переменную с тем же именем, что и функция, и сохраняет ссылку на функцию в переменной.
6. При обработке выражения функции браузер создает функцию, но вы должны явно обрабатывать ссылки на эту функцию.
7. ссылки на функции используются какпервый классЦенность гражданина
8. можно использовать какгражданин первого классаЗначение присваивается переменной, которая входит в структуру данных, передается в функцию или возвращается из функции.

размах, закрытие

Браузер обрабатывает его дваждыJavaScriptКод:

1. Браузер анализирует все объявления функций и определяет функции, созданные этими объявлениями функций;
2. Браузер выполняет код сверху вниз и определяет функции, созданные функциональными выражениями.

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

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

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

Вложенные функции, влияющие на область действия функции

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

Введение в лексическую область видимости

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

Все локальные переменные хранятся в среде, в которой хранятся все переменные, определенные в локальной области видимости.

function da() {
 return daString;
} 
return da;

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

что такое лексический объем

JavaScriptПравила масштабирования полностью основаны наструктура кодавместо некоторых динамических свойств времени выполнения. (Просто посмотрите на структуру кода, чтобы определить, где определена переменная)

существуетJavaScript, только функции вводят новые области видимости.

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

Переменные параметров содержатся в среде, а параметры считаются локальными переменными функции, поэтому они также находятся в среде.

Закрытие

закрытие, существительное, относится кФункции и эталонные среды(Замыкание, функция и ее окружение)

Пример:

function makeCounter() {
 var count = 0; // 局部变量
 function counter() { // 创建函数counter,它将变量count+1
  count = count + 1;
  return count;
 }
 return counter; // 返回函数counter
}

Замыкания также создаются, когда функция передается функции.

Пример:

function makeTimer(doDa, n) {
 setTimeout(function() { // 函数setTimeout传入一个函数表达式
  console.log(doDa);  // 函数表达式使用了自由变量doDa。
 }, n);
}

Свободные переменные: переменные, которые не определены локально, эти переменные называются свободными переменными.

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

Событие Click с использованием закрытия

Пример:

window.onload = function() {
 var count = 0;
 var message = "dadaqianduan";
 var div = document.getElementById("message");
 
 var button = document.getElementById("clickme");
 button.onclick = function() {
  count++;
  div.innerHTML = message + count + "浏览量";
 };
};

объект

Для каждого объекта используйтелитерал объектауказать все его свойства.

Создание объектов с использованием литералов объектов

Пример:

var dadaqianduan = {
 name: '魔王哪吒',
 age: 'dada',
 name1: 'jeskson',
 name2: 'dada',
}

конструктор объекта

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

function Dadaqianduan(name, name1, name2) {
 this.name = name;
 this.name1 = name1;
 this.name2 = name2;
 this.sayName = function() { // this.sayName 属性 一个匿名函数
  console.log("dada");
 }
}

Пример использования конструктора:

var dada = new Dadaqianduan("dada1", "dada2", "dada3");

ПеременнаяdadaБудет содержать ссылку на новый объект, а с помощью конструктора вы сможете продолжать создавать разные объекты.

this, в котором хранится ссылка на обрабатываемый в данный момент объект. После выполнения функции операторnewвернутьthis, ссылка на вновь созданный объект.

Возвращаемое значение в конструкторе, если только возвращаемое значение неthis, в противном случае конструктор не вернет созданный им объект.

Примечание. При вызове конструктора для создания объектаthisустанавливается на ссылку со значением для нового создаваемого объекта, поэтому весь код в конструкторе предназначен для этого нового объекта.

После создания объекта, когда вы вызываете для него метод,thisустанавливается на объект, для которого вызывается метод. Итак, в методеthisВсегда представляет объект, для которого был вызван метод.

экземпляр объекта

Используйте операторыinstanceofчтобы определить, каким конструктором был создан объект, если объект был создан указанным конструктором, операторinstanceofвернусьtrue. (согласно при создании объекта операторnewЗа кулисами хранится некоторая информация, чтобы в любой момент определить, каким конструктором был создан объект)

Встроенный конструктор

1. Object, вы можете использовать конструкторObjectдля создания объекта.
2. Math, свойства и методы для выполнения математических задач.
3. RegExp, пользователь создает объект регулярного выражения.
4. Error, чтобы ловить ошибки в коде.

Создайте объект даты, например:

// 只需要使用其构造函数即可
var now = new Date(); // 表示当前日期和时间的日期对象

// 构造函数Date返回一个表示本地当前日期和时间的Date实例

Пример объекта массива:

var emptyArray = new Array(); // 创建一个长度为零的空数组

var arrArray = new Array("a", "b", "c");

прототип

существуетJavaScript, объекты наследуют поведение от других объектов, называемыхпрототипное наследованиеИли наследование на основе прототипов. (Унаследованный объект называетсяпрототип, наследовать существующие свойства, включая методы, и добавлять свойства к новым объектам)

JavaScriptобъектмодель на основепрототипПонятие , в этой модели, может быть полученорасширить другие объект(т. е. объекты-прототипы) для создания объектов.

Прототип: Конструктор объектов. Конструктор - наследует прототип.

Как получить доступ к прототипу в коде, иметь конструкторDa, пример посещения:

// 构造函数Da，将发现它有一个prototype属性，这是一个指向原型的引用
Da.prototype

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

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

1. JavaScriptОбъектные системы используют прототипное наследование
2. Когда экземпляр объекта создается с помощью конструктора, экземпляр содержит свои собственные настраиваемые свойства, а также копию метода в конструкторе.
3. После добавления свойств в прототип конструктора экземпляры, созданные с помощью этого конструктора, наследуют эти свойства.
4. Определив свойства в прототипе, дублирующийся код, содержащийся в объекте, можно уменьшить.
5. Чтобы переопределить свойство в прототипе, просто добавьте свойство в экземпляр
6. Конструкторы имеют прототипы по умолчанию, доступ к которым можно получить через свойства конструктора.prototypeчтобы получить к нему доступ
7. Вы можете назначать свои собственные объекты свойствам конструктораprototype
8. При использовании пользовательского объекта-прототипа обязательно задайте свойства прототипа.constructorУстановите соответствующий конструктор для согласованности.
9. Чтобы вызвать функцию и указать в теле функцииthisобъект, на который указывает, чьи методы могут быть вызваныcall

События JavaScript

setTimeoutОписание: Учитывая обратный вызов иnмиллисекундная задержка,setTimeoutбудет вnЗапустите обратный вызов через миллисекунды.

Пример:

for (var i = 1; i <= 3; i++) {
 setTimeout(function() {
  console.log(i);
 }, 0);
}
// 4
// 4
// 4

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

JavaScriptАсинхронные функции, предоставляемые средой, обычно можно разделить на две категории:I/Oфункции и временные функции.

От прототипа к цепочке прототипов

Используйте конструктор для создания объекта, например:

// 构造函数首字母大写
function Da() {
 // 构造函数
}
var da = new Da(); // 实例化对象
da.name = 'jeskson'; // 添加属性
console.log(da.name); // jeskson

В примереDaэто конструктор, который используетnewСоздать экземпляр объектаda.

Помните: каждая функция имеетprototypeНедвижимость, пример:

function Da() {
}
// 每个函数都有prototype属性
Da.prototype.name = 'jeskson';
var da1 = new Da();
var da2 = new Da();
console.log(da1.name); // jeskson
console.log(da2.name); // jeskson

Примечание: функцияprototypeСвойство указывает на объект, являющийся прототипом экземпляра, созданным путем вызова конструктора.

Это связь между конструктором и прототипом экземпляра:Da(конструктор) черезprototypeпри созданииDa.prototype(прототип экземпляра).

каждыйJavaScriptобъект, кромеnullКроме того, при его создании с ним связывается другой объект, и этот объект является прототипом. Каждый объект «наследует» свойства прототипа.

созданный объектda, экземпляры и прототипы экземпляровDa.prototypeОтношение между:

__proto__, каждыйJavaScriptобъект (newКонструктор создает объект, как указано выше.da),УдалитьnullКроме того, у всех есть свойство, называемое__proto__, это свойство будет указывать на прототип объекта.

Пример:

function Da() {
}

var da = new Da();
console.log(da.__proto__ === Da.prototype); // true

обе:DaКонструктор, который создает экземпляр объектаda,daОбъект имеет свойство__proto__, это свойство указывает наDa.prototypeПрототип экземпляра и этот прототип экземпляра черезDaКонструктор использует свойство в каждой функцииprototype, указывая на прототип экземпляра (Da.prototype).

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

Кто-то спрашивал, есть ли указывающий прототип (конструктор или экземпляр), ответ: точки на экземпляр нет, но есть указатель на конструктор. Отсутствие указателя на экземпляр заключается в том, что конструктор может генерировать несколько экземпляров.

Помните: у каждого архетипа естьconstructorСвойство указывает на связанный конструктор.

Пример:

function Da() {
}
console.log(Da === Da.prototype.constructor); // true

Оба отношения:

1. КонструкторDaпройти черезprototypeуказать на прототип экземпляраDa.prototype
2. КонструкторDaСозданные экземпляры объектовda,пройти черезdain (свойства, которыми обладают объекты)__proto__указать на прототип экземпляраDa.prototype
3. прототип экземпляраDa.prototype, свойства, которые присутствуют в каждом прототипеconstructor,пройти черезconstructorуказать на конструктор

Пример:

function Da() {

}

var da = new Da();

console.log(da.__proto__ == Da.prototype) // true
console.log(Da == Da.prototype.constructor) // true
// 获取对象的原型
console.log(Object.getPrototypeOf(da) === Da.prototype) // true

Экземпляры и прототипы

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

Пример:

function Da(){
}
Da.prototype.name = 'jeskson';
var da = new Da();
da.name = 'dadaqianduan';
console.log(da.name); // dadaqianduan
delete da.name;
console.log(da.name); // jeskson

прототип прототипа

Пример:

var obj = new Object();
obj.name = 'jeskson';
console.log(obj.name); // jeskson

Отношения: Конструктор, Прототип экземпляра, Созданный объект, Прототип прототипаObject.prototype,КонструкторObject().

1. Da(конструктор), черезprototypeуказать на прототип экземпляраDa.prototype
2. Daконструктор, создать объектda,Этоdaсвойства в__proto__указать на прототип экземпляраDa.prototype
3. прототип экземпляраDa.prototype, средний атрибутconstructorуказатель, конструкторDa
4. прототип экземпляраDa.prototype, прототип прототипа (прототипом экземпляра является объект) свойство в объекте__proto__направлениеObject.prototype
5. Object()конструктор, черезprototypeнаправление,Object.prototypeпрототип
6. Object.prototypeСвойства в прототипеconstructorуказатель, конструкторObject()

Сеть прототипов

Пример:

// Object.prototype的原型 -> null
console.log(Object.prototype.__proto__ === null); // true
// null 表示 没有对象，即该处不应该有值。就是说Object.prototype没有原型，查找到Object.prototype就可以停止查找了

которыйObject.prototypeСвойства в (объект)__proto__направлениеnull

constructor

Пример:

function Da() {
}
var da = new Da();
console.log（da.constructor === Da); // true

при полученииda.constructorчас,daВообще-то, нетconstructorсвойства, когда не читаютсяconstructorсобственность, отdaв прототипеDa.prototypeПрочтите и найдите атрибут в прототипе, что означает:

da.constructor === Da.prototype.constructor

proto

Большинство браузеров поддерживают этот нестандартный метод доступа к прототипу, которого нет вDa.prototype, но изObject.prototype, не столько имущество, сколькоgetter/setter, когда используешьobj.__proto__, это можно понимать как возвращениеObject.getPrototype(obj)

Уведомление:FunctionКак встроенный объект, это то, что уже существует до запуска, поэтому он не будет генерировать себя на основе самого себя.

причина:

1. Чтобы количество соответствовало другим функциям
2. это просто отношения

prototypeэто свойство, которым обладают только функции, и__proto__это свойство, которым обладают почти все объекты.

Далее, давайте поговорим о том, что такое объем: объем относится к ☞ естьОбласть в исходном коде программы, где определяются переменные.

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

лексический охват

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

Пример:

var name = 'jeskson'

function da1() {
 console.log(name);
}

function da2() {
 var name = 'dadaqianduan.cn';
 da1();
}

da2();
// 结果是jeskson ， 因为采用的是静态作用域

динамическая область

Динамическая областьОпределяется при вызове функции

вопросы интервью

var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f();
}
checkscope();

var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f;
}
checkscope()();

Результат печатается:local scope, так как используется лексическая область видимости, область действия функции зависит от того, где функция была создана. (Объем функции определяется при определении функции)

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

Результат равен 10, зависимая переменнаяaНе могу прочитать объектoсвойстваa. изменить наconsole.log(o.a)Просто напечатайте 11.

Шаблоны Singleton в шаблонах проектирования JavaScript

1. Что такое шаблоны проектирования:

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

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

2. Классификация шаблонов проектирования

• Шаблоны создания: шаблон singleton, абстрактный шаблон factory, шаблон строителя, шаблон factory, шаблон прототипа.
• Структурные шаблоны: шаблон адаптера, шаблон моста, шаблон украшения, шаблон композиции, шаблон внешнего вида, шаблон легковеса, шаблон прокси.
• Поведенческие шаблоны: шаблон метода шаблона, шаблон команды, шаблон итератора, шаблон наблюдателя, шаблон посредника, шаблон меморандума, шаблон интерпретатора, шаблон состояния, шаблон стратегии, шаблон цепочки ответственности, шаблон посетителя.

3. Преимущества шаблонов проектирования

• Проверенное решение
• Легко модифицировать и поддерживать
• Легкость в общении и общении

4. традиционный одноэлементный шаблон

Гарантирует наличие только одного экземпляра класса и предоставляет к нему глобальную точку доступа.

{} 命名空间，防冲突
惰性单例

глубокая функция

1. определение функции

// 字面量
function fn() {};
函数声明
简洁，直观
声明提前

// 构造函数
var fn = new Function();
赋值语句
多此一举，效率低下
必须在调用语句之前

// 赋值表达式
var fn = function() {};
赋值语句
简洁，直观
必须在调用语句之前

2. вызов функции

// 普通函数
fn()

// 匿名函数
(function() {})()

// 构造函数
new Object()

// 方法
Obj.method()

// 间接
fn.daFun()

3. аргументы функции

// 形参
函数定义时括号内的参数
接收实参的值
个数为fn_name.length

// 实参
函数调用时括号内实际传递的参数
将值赋值给形参
个数为arguments.length

4. возвращаемое значение функции

// return
用在函数中
跳出函数

// continue
用在循环中
跳出本次循环

// break
用在循环中
跳出当前循环

случай проверки формы js

При регистрации пользователя имя пользователя, пароль и данные мобильного телефона могут быть введены в неверном формате, поэтому необходимо проверить достоверность данных.

использоватьjsОбычный объект для проверки данных:var reg = /正则表达式/;

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

Объектно-ориентированный: абстракция кода, программная идея предоставления унифицированного интерфейса вызова для внешнего мира.

В объектно-ориентированном подходе, основанном на прототипах, объекты полагаются на конструкторы (constructor) используя прототипprototypeпостроен.

1. Свойства – это атрибуты вещей
2. Методы — это функции вещей
3. Объект — это экземпляр вещи
4. ПрототипjsфункцияprototypeСвойство относится к объекту, объекту-прототипу (прототипу).

Закрытие: это выражение, которое имеет много переменных и среду, к которой привязаны эти переменные.

jsЛитеральный объект объявления объекта, пример:

var obj = {
 属性名称： 属性值，
 属性名称： 属性值，
 ...
 方法名称：function() {},
 方法名称：function() {},
 ...
}

newоператор, за которым следуетObjectКонструктор, пример:

var obj = new Object();

obj.属性 = 属性值；
obj.属性 = 属性值；
obj.方法 = function(str) {
 方法代码
};

jsКонструктор объявляет объект, например:

function Test([参数列表]) {
 this.属性 = 属性值；
 this.方法 = function() {
  // 方法中的代码
 }
}

var obj = new Test(参数列表);

jsОбъявить объекты в фабричном режиме, например:

function createObject(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.run = function() {
  // return 
 };
 return obj;
}

var da1 = createObject('dada', 1);
var da2 = createObject('jeskson', 2);

jsОбъявлять объекты в режиме прототипа, например:

function test() {

}
test.prototype.属性 = 属性值；
test.prototype.属性 = 属性值；
test.prototype.属性 = function() {
 // 执行代码
}
var obj = new test();

jsОбъявлять объекты в смешанном режиме, например:

function test(da1, da2, da3) {
 this.da1 = da1;
 this.da2 = da2;
 this.da3 = da3;
}
test.prototype.方法名称 = function() {
 // 执行代码
}
var obj = new Blog(da1, da2, da3);

jsПросмотрите свойства и методы объекта, например:

var da = {};
da.name = 'jeskson';
da.age = 1,
da.fn = function() {
 console.log('魔王哪吒');
}
for(var i in da) {
 // 遍历对象 in
 console.log(da[i]);
}

что такое инкапсуляция

Скрыть внутренние данные и детали работы объекта.

Прототипы и цепочки прототипов

1. прототип, использованиеprototypeДобавьте свойства и методы
2. цепочка прототипов,jsКогда объект создается,__proto__Встроенное свойство для указания на объект-прототип объекта-функции, создавшего его.prototype

прототипное наследование

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

Наследование конструктора

Создайте объект родительского класса внутри подкласса для реализации наследования

callа такжеapplyПрименение

• call, который вызывает метод объекта, заменяя текущий объект другим
• apply, который применяет метод объекта и заменяет текущий объект другим объектом

Способ передачи параметров другой.callсписок параметров,applyпредставляет собой массив.

jsОбъектно-ориентированные ключевые слова

instanceof, delete, call, apply, arguments, callee, this

• пройти черезnew function()Все созданные объекты являются функциональными объектами, остальные являются обычными объектами.
• jsВсе функциональные объекты вprototypeАтрибут Этот атрибут относится к объекту, то есть к объекту-прототипу, именуемому прототипом, обычные объекты неprototype, но с__proto__Атрибуты.

наследовать

1. Пример конструктивного наследования

function parents(name) {
 this.name = name;
 this.say = function() {
  console.log(this.name);
 }
}
function child(name, age {
 this.pobj = parents;
 this.pobj(name);
 this.age = age;
}

var da = new child('魔王哪吒', 1);

2. Пример прототипа наследования

var da = function(){
};
da.prototype.say = function() {
 console.log('魔王哪吒');
}
da.prototype.name = 1;

var dada = function() {};
dada.prototype = new da();
dada.prototype.name = 2;
var obj = new dada();
// 子元素的成员属性name 会覆盖父元素

Проблемы с переменными, областью действия и памятью

1. Переменные: примитивные типы и ссылочные типы

// 基本类型
不可修改
保持在栈内存中
按值访问
比较时，值相等即相等
复制时，创建一个副本
按值传递参数
用typeof检测类型

// 引用类型
可以修改
保存在堆内存中
按引用访问
比较时i，同一引用才相等
复制的其实是指针
按值传递参数
用instanceof检测类型

2. объем

• Область действия: глобальная область действия и локальная область действия.
• Цепочка областей видимости используется для запроса переменных.
• jsмеханизм разбора

3. проблема с памятью

• Значения, выходящие за рамки, будут помечены как пригодные для повторного использования и будут удалены при сборке мусора.
• Mark and Sweep — текущий основной алгоритм сборки мусора.
• Удаление метки заключается в том, чтобы пометить неиспользуемые значения, а затем восстановить их память.
• Когда переменная не используется, ее можно разыменовать вручную.
• Алгоритм расчета ссылок может быть не опубликован из-за проблемы циклических ссылок

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

Порядок выполнения кода, пример (функциональное выражение):

var da = function() {
 console.log("da1");
}
da(); // da1

var da = function() {
 console.log("da2");
}
da(); // da2

Объявление функции, выполненное первым, показывает:

function da() {
 console.log("da1");
}
da(); // da2

function da() {
 console.log("da2");
}
da(); // da2

Код выполняется по частям. существуетJavaScriptВ рабочей среде существует три типа исполняемого кода, которые делятся на глобальный код (глобальная среда, среда, в которую код впервые попадает), код функции (среда, в которой выполняется функция при ее вызове),evalкод.

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

Пример:

function fn() {
 console.log(a); // undefined
 var a = 1;
}
fn();

стек контекста выполнения,Execution context stack, ECS, (как управлять таким количеством созданных контекстов выполнения), вJavaScriptСтек контекста выполнения создается в движке для управления контекстом выполнения.

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

Создать - выполнить - вытолкнуть стек после выполнения, ожидая повторного использования.

Этап создания: 1 — создать переменный объект, 2 — установить цепочку областей действия, 3 — определитьthisнаправление.

Стадия выполнения: 1, присвоение переменной, 2, ссылка на функцию, 3, выполнение другого кода.

глобальный контекст выполнения

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

console.log(this);
// window

глобальный объектwindowПредопределено большое количество методов и свойств, и мы можем напрямую обращаться к этим методам свойств в любом месте глобальной среды, и в то же времяwindowобъект ещеvarВектор объявленных глобальных переменных.

пройти черезvarДоступ к созданным глобальным объектам можно получить черезwindowдоступ.

контекст выполнения функции

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

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

ECStack = [];

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

ECStack = [
 globalContext
];

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

Пример:

function da1() {
 da2();
 console.log(1);
}

function da2() {
 da3();
 console.log(2);
}

function da3() {
 console.log(3);
}

da1(); // 3 2 1

Связь между стеком выполнения и контекстом, процессом выполнения:

// 代码执行前创建全局执行上下文
ECStack = [
 globalContext
];

ECStack.push("da1 functionContext");

ECStack.push("da2 functionContext");

ECStack.push("da3 functionContext");

// da3 执行完毕，输出 3 并出栈
ECStack.pop();
// da2
ECStack.pop();
// da1
ECStack.pop();
// 最后执行栈中只剩下一个全局执行上下文

Этап создания контекста выполнения

Делится на: 1, этап создания, 2, этап исполнения.

Пример кода процесса создания:

ExecutionContext = {
 // 确定this的值
 ThisBinding = <this value>,
 // 创建词法环境组件
 LexicalEnvironment = {},
 // 创建变量环境组件
 VariableEnvironment = {},
};

Имитация изменений в стеке контекста выполнения записи

Пример 1:

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada();
}

da();

// 执行上下文栈
ECStack.push(<da> functionContext);
ECStack.push(<dada> functionContext);
ECStack.pop();
ECStack.pop();

Пример 2:

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada;
}

da()();

ECStack.push(<da> functionContext);
ECStack.pop();
ECStack.push(<dada> functionContext);
ECStack.pop();

цепочка прицелов

Как упоминалось выше: у каждого контекста выполнения есть три важных свойства:

1. переменный объект
2. цепочка прицелов
3. this

Цепочка области видимости такова: при поиске переменной сначала будет выполняться поиск в объекте переменной текущего контекста, если он не найден, поиск будет производиться в объекте переменной родительского контекста выполнения, пока не будет найден объект переменной глобальный контекст, то есть глобальный объект.

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

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

Пример: (У функции есть внутреннее свойство[[scope]]хранить все родительские переменные объекты)

function da1() {
    function da2() {
        ...
    }
}


da1.[[scope]] = [
  globalContext.VO
];

da2.[[scope]] = [
    da1Context.AO,
    globalContext.VO
];

Пример 2:

var scope = "global scope";
function da(){
    var scope2 = 'local scope';
    return scoped2;
}
da();

// 函数被创建
da.[[scope]] = [
    globalContext.VO
];

// 执行函数
ECStack = [
    daContext,
    globalContext
];

// 创建作用域链
daContext = {
    Scope: da.[[scope]],
}

// 用 arguments 创建活动对象
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }
}

// 将活动对象压入 da 作用域链顶端
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

// 开始执行函数
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

// 函数执行完毕
ECStack = [
    globalContext
];

мероприятие

Что такое событие? это может бытьJavaScriptОбнаруженное поведение, вообще говоря, будет, когда пользователь взаимодействует сwebКогда на странице есть какое-то взаимодействие, интерпретатор создает ответeventобъект для описания информации о событии.

Какие события вы знаете:

1. Пользователь нажимает что-то на странице
2. наведите курсор мыши на определенный элемент
3. Окно прокрутки пользователя
4. Пользователь изменяет размер окна
5. Пользователь нажимает клавишу на клавиатуре
6. Элемент страницы завершил загрузку или не удалось загрузить

цикл событий

1. Первый этап: захват события, объект события вдольDOMдерево стелется вниз, вниз
2. Второй этап: целевой триггер, запуск функции прослушивания событий
3. Третий этап, событие пузырится, объект события вдольDOMДерево распространяется вверх, вверх

IEВ модели событий нет фазы «захвата событий».

Механизм обработки пузырьков событий (вверху)

когда вDHTMLКогда происходит объектное событие в нижней части объектной модели, в свою очередь будет активирован тот же тип обработки событий, который определен вышеприведенным объектом.

обработчик события

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

Каждому событию соответствует дескриптор события.При выполнении программы дескриптору события присваивается соответствующая функция или оператор, а когда происходит событие, браузер выполняет указанную функцию или оператор.

определение события

Есть три способа определить функцию слушателя:

1. прямо вHTMLСвязанные с событиями свойства элементов определены в . (следует использовать как можно меньше)
2. существуетJavaScriptСвязанным с событием свойствам элемента присваиваются значения в .
3. Расширенный метод обработки событий, событие может быть привязано к нескольким функциям прослушивателя.

DOMпоток событий

1. Добавить событие:addEventListener()

грамматика:element.addEventListener(event,function,useCapture), который используется для указания обработчика события добавления элемента.

параметр:

event: 字符串，指定事件名

function：指定要事件触发时执行的函数

useCapture：指定事件是否在捕获或冒泡阶段执行

2. Удалить событие:removeEventListener()

грамматика:element.removeEventListener(event,function,useCapture), удалятьaddEventListener()метод.

Список событий

Общий пример события

onclick 鼠标点击时触发此事件

ondblclick 鼠标双击时触发此事件

onmousedown 按下鼠标时触发此事件

onmouseup 鼠标按下后松开鼠标时触发此事件

onmouseover 当鼠标移动到某对象范围的上方时触发此事件

onmousemove 鼠标移动时触发此事件

onmouseout 当鼠标离开某对象范围时触发此事件

onkeypress 当键盘上的某个键被按下并且释放时触发此事件

onkeydown 当键盘上某个键被按下并且释放时触发此事件

onkeyup 当键盘上某个按键被放开时触发此事件

События, связанные со страницей

onabort 图片在下载时被用户中断

onbeforeunload 当前页面的内容将要被改变时触发此事件

onerror 出现错误时触发此事件

onload 页面内容完成时触发此事件

onmove 浏览器的窗口被移动时触发此事件

onresize 当浏览器的窗口大小被改变时触发此事件

onscroll 浏览器的滚动条为止发生变化时触发此事件

onstop 浏览器的停止按钮被按下时触发此事件或正在下载的文件被中断

onunload 当前页面将被改变时触发此事件

Событие ролловера

onbounce 在Marquee内的内容移动至Marquee显示范围之外时触发此事件

onfinish 当Marquee元素完成需要显示的内容后 触发此事件

onfinish 当Marquee元素完成需要显示的内容后触发此事件

onstart 当Marquee元素开始显示内容时触发此事件

События, связанные с формами

onblur 当前元素失去焦点时触发此事件

onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件

onfocus 当某个元素获得焦点时触发事件

onrest 当表单中reset的属性被激发时触发此事件

onsubmit 一个表单被提交时触发此事件

привязка данных

oncellchange 当数据来源发生变化时
ondetaavailable 当数据接收完成时触发事件
onafterupdate 当数据完成由数据缘对象的传送时触发此事件
onrowexit 当前数据源的数据将要发生变化时触发的事件
onrowsdelete 当前数据记录将被删除时触发此事件
onrowsinserted 当前数据源将要插入新数据记录时触发此事件

резюме

1. Внутри браузера используйтеМодель объекта документаDOMпредставлять веб-страницы
2. Браузер загружается и анализируетHTMLкогда веб-страница была созданаDOM
3. существуетJavaScriptкод, использоватьdocumentвозражать против доступаDOM
4. documentОбъекты содержат объекты, которые вы можете использовать для доступа и измененияDOMсвойства и методы
5. методdocument.getElementByIdсогласно сidотDOMполучить элемент
6. методdocument.getElementByIdВозвращает представление элементов на веб-странице.элемент объекта
7. Объект элемента содержит свойства и методы, которые можно использовать для чтения и изменения содержимого элемента.
8. АтрибутыinnerHTMLСодержит текстовое содержимое элемента и все вложенныеHTMLсодержание
9. Чтобы изменить содержимое элемента, вы можете изменить его свойства.innerHTMLзначение
10. Чтобы получить значение атрибута элемента, используйте методgetAttribute
11. Чтобы установить значение атрибута элемента, используйте методsetAttribute
12. быть пригодным для использованияwindowобъектonloadатрибут, присвоенный событию загрузкиобработчик события
13. Сразу после загрузки страницы она будет вызванаwindowобъектonloadсвойство указывает на обработчик событий
14. undefinedэто значение, чьеundefinedТипundefinedтип, это не объект, это не число, не строка, не логическое значение или что-то однозначное
15. существуетJavaScript, типы делятся на две группы,Основные типы и объекты. Значения, не являющиеся примитивными типами, являются объектами
16. Примитивные типы включают числа, строки, логические значения,nullа такжеundefined, все остальные значения являются объектами
17. undefinedУказывает, что переменная не была инициализирована
18. nullозначает "нет объекта"
19. NaNозначает «не число», но следует сказать вJavaScriptчисла, которые не могут быть представлены в ,NaNимеет номер типа
20. NaNне равно никакому значению, включая само себя, поэтому проверьте, является ли значениеNaN, следует использовать функциюisNaN
21. существуетJavaScriptВсего 5 ложных значений в:undefined, null, 0, "", false, все остальные значения верны
22. Чтобы реагировать на события, вы можете написать и зарегистрировать обработчик событий. Например, чтобы указать обработчик события щелчка, назначьте обработчик события элементуonclickАтрибуты.
23. Anonymous Han — это функциональное выражение без имени.
24. Объявления функций создают функции, которые определяются до выполнения другого кода.
25. Функциональное выражение выполняется вместе с другим кодом во время выполнения, поэтому создаваемая им функция не определена до тех пор, пока не будет выполнен оператор, в котором оно помещено.
26. Функциональные выражения могут передаваться и возвращаться из функций
27. Замыкание относится к функции и среде, на которую она ссылается.
28. Замыкание фиксирует значение переменной в той области, в которой оно было создано.
29. Свободные переменные — это переменные, которые не связаны в теле функции.
30. typeofВозвращает тип своего операнда, если вы передадите ему строку, он вернетstring
31. Когда вам нужно создать небольшое количество объектов, используйте литерал объекта; когда вам нужно создать большое количество объектов, используйте конструктор
32. Используйте конструкторы для создания согласованных объектов с одинаковыми свойствами и методами.
33. использоватьnewдля вызова конструктора создается пустой объект и присваивается в конструктореthis
34. В конструкторе используйтеthisЧтобы получить доступ к создаваемому объекту, а затем добавить к нему свойства, конструктор автоматически возвращает новый созданный им объект.

Оглядываясь назад на предыдущие высоко оцененные статьи автора, вы можете получить больше!

• Модуль отмечает, что квалифицированный младший фронтенд-инженер должен освоить
• Письменные тестовые вопросы Vue.js решают типичные проблемы в бизнесе
• [Основной] Лично делиться заметками к руководству по разработке интерфейса Vue
• Краткое изложение JavaScript, укрепление фундамента интерфейса
• Всестороннее резюме ES6, необходимого для предварительных интервью
• Личный веб-интерфейс Dada делится 92 вопросами интервью JavaScript с дополнительными ответами
• [И картинки, и тексты, лайкайте и собирайте! ] Переучитесь, чтобы закрепить свою систему знаний Vuejs
• [Карта разума] Фронтенд-разработка — Консолидируйте свою систему знаний JavaScript
• Выпуск 14-Лянган за 7 ночей, обобщающий очки знаний компьютерной сети! (всего 66)

❤️Подписывайтесь + лайк + избранное + комментарий + пересылка ❤️, оригинальность непроста, поощряйте автора создавать лучшие статьи

Нравится, добавляете в избранное и комментируете

яJeskson(Dada front-end), спасибо за ваши таланты:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон"Прочитайте ее впервые и ответьте на [Информацию] Я подготовил информацию о производителях первой линии, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…

Специальное мероприятие, посвященное китайскому Новому году, посвященное году Быка｜Участвуйте в розыгрыше подарочных наборов кои в юанях 2021 года!