Краткое изложение графических заметок по JavaScript объемом 10 000 слов

Переменная.

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

Улучшение объявления переменных

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

console.log (a); // Сначала используйте переменную var a = 12; // Затем определите

тип данных

• .

  Базовый тип данных

  • • —

    число.

    • большие или маленькие, независимо от целого числа или с плавающей запятой, независимо от положительного или отрицательного значения. Все они представляют собой
    • большие или меньшие числа числового типа (абсолютное значение меньше). Его можно записать в научной записи 3e8 — 3^8
    • . двоичное значение начинается с 0b , восьмеричное начинается с 0 , а шестнадцатеричное начинается с 0x
    • NaN , а не числа, то есть «не числа», а является значением числового типа (в математических операциях, если результат не может быть числом, результатом часто является NaN, NaN == NaN, результат ложный)
    • Бесконечность Бесконечная или бесконечно малая
  • строка

    string

    • общие методы метод

    function	charAt
    ()	получает указанный символ позиции (за пределами) является пустой строкой)
    подстрока ()	извлекает подстроку substr
    ()	извлекает
    строку срез()	извлекает подстроку
    toUpperCase()	изменяет строку на верхний регистр
    toLowerCase()	изменяет строку на нижний регистр
    indexOf()	извлекает строку (сопоставление с образцом)

    • substring(a, b) подстрока, начинающаяся с a и заканчивающаяся на b, исключая b; если второй параметр опущен, возвращаемая подстрока будет идти до конца строки. Если a > b, она будет автоматически преобразована в десятичное число перед
    • substr(a). , b), подстрока длины b начинается с a; если второй параметр опущен, возвращаемая подстрока будет идти до конца строки; a может быть отрицательным числом, указывающим обратную позицию
    • среза (a, b ) A. подстрока, начинающаяся с a и заканчивающаяся на b, исключая b; оба параметра могут быть отрицательными; a должно быть меньше b, иначе результата не будет (пустая строка).

  • Логическое

  • значение Неопределено

    • Неопределенный является одновременно значением и типом. только одно собственное значение:

  • Null.

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

• Сложные типы данных:

  • Функция
  • массива
  • объектов
  • RegExp
  • Date
  • Map
  • Set
  • ...

Оператор Typeof

может быть равен

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

typeof 5; // NumberTypeOf 'niubi'; //

типа данных

использует **Number ()**Function

// String --> Number Number('123' // 123Number('123.4'); // 123.4Number('123year'); ('2e3'); // 2000Number(''); // 0Number('1 + 1'); // NaN// Логическое значение --> Number(true); // 1Number(false); // undefine и null - -> Number Number(undefined); // NaNNumber(null); // 0

**parseInt()** функция преобразует строку в целое число

и автоматически обрезает все символы после первого нечислового числа. символ

parseInt('3.14 '); // 3parseInt('3.14 равно пи'); // 3parseInt('Pi равно 3.14'); // NaNparseInt('3.99'); // 3

**parseFloat()** функция преобразует строку в числа с плавающей запятой,

автоматически обрезает первый нечисловой символ и все символы после недесятичной точки

parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); // 3.14parseFloat('Pi'); is 3.14'); / / NaNparseFloat('3.99'); // 3.99// автоматически преобразует true и false в строки, и результатом становится NaN.

Функция **String()**

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

String(123); // '123'String(123.4); // '123.4'String(2e3); // '2000'String(NaN); // 'NaN'String(Infinity); // 'Infinity'String(0xf); // '15'String(true); // 'true'String(false); // 'false'String(undef);

функция

'null'

// Числа --> Логические значения 0 и NaN преобразуются в false, а остальные преобразуются в trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); // true// Логическое значение --> Булева пустая строка преобразуется в false и т.д. значения преобразуются в true; Boolean(''); // falseBoolean('abc'); // trueBoolean('false'); // true// undefine и null --> Логическое значение преобразуется в falseBoolean( undefined); // falseBoolean(null) ; //

функция false **prompt()** выводит окно ввода

var num = Prompt('Пожалуйста, введите первое число'); // Возвращаемое значение представляет собой строковое

выражение и оператор

неявного преобразования типа

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

Суть неявного преобразования заключается во внутреннем вызове функции Number()

3 * '4' // 12true + true // 2false + 2 // 23 * '2days' // NaN

Метод toFixed(a) сохраняет десятичный знак

Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Округление вверх Math.floor() //

Реляционный оператор

=== // Все равно!== // Не все равно // Два знака равенства Оператор == не сравнивает тип значения, он будет сравнивать значение после неявного преобразования. Оно равно? 1 == true // true1===true // false0 == false // true0 === false // false0 == не определено // false0 === undefined // falseundefined == null // trueundefined == = null // false

Функция **isNaN()** определяет, является ли значение переменной NaN,

но isNaN() непрост в использовании. Ее механизм таков: до тех пор, пока. результат выполнения переменной, переданной в Number(), равен NaN, тогда функция isNaN( ) получит истинную

короткую оценку

a && ba — true, значение — b; a — false, значение — a

||ba is true, значение a, a false, значение b

Приоритет логической операции : не--> и- -> Или

последовательность операций комплексной операции : не--> Математическая операция --> Реляционная операция -->

Последовательность

оператор управления

Функция случайных чисел Math.random()

получает целое число в интервале [a, b], формула имеет вид parseInt(Math .random() * (b - a + 1)) + a;

массив

var arr = ['; A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4); длиной 4, каждый элемент не определен.

Когда доступ к индексу выходит за пределы, возвращается неопределенное значение

var arr = [2, 6, 7, 3 ];arr[6] = 4;console.log(arr); на этот раз нижний индекс выходит за пределы, ошибка не будет сообщена, но массив будет расширен, индекс 6 равен 4, а середина пуста.

Для обнаружения

определения

функции

// обычная функция fun() {
    //Оператор тела функции}//Анонимная функция var fun = function () {
    // Оператор тела функции}

Продвижение объявления функции

fun(); function fun() { // Будет продвигаться на этапе предварительного анализа alert("Функция выполнена");}// Если функция определена с помощью функции выражение, функция продвижения отсутствует fun() // возникает ошибка var fun = function () {;
    alert("Функция выполнена");}

Повышение приоритета функции

// Повышение приоритета функции // Повышение после выражения функции; продвижение объявления переменной, невозможно переопределить продвинутую функцию fun() // Всплывающее окно Bvar fun = function () {
    alert('A');}function fun() {
    alert('B');}fun(); // Всплывающее окно A.

Фактическое количество формальных параметров

1. больше, чем формальных параметров.
2. Формальных параметров не получено. меньше формальных параметров. Фактические параметры не получены. Формальное значение параметра undefined

объекта массива аргументов

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

объявления

и пропуск

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

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

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

возвращаемого значения

sum(a, b) {
    

b

;}var result = sum(3, 5); // Возвращаемое значение может быть получено переменной.

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

) метод

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

. 55] arr.sort(функция (а, б) {;
    если (а > б) {
        возврат 1;
    }
    return -1;});

Присвоение переменной

глубоким клоном массива

var arr1. = [1, 2, 3, [4, 5]] функция deepClone(arr) {;
    вар результат = [];
    for (var i = 0; i <arr.length; i++) {
        если (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } еще {
            result.push(arr[i]);
        }
    }
    return result;}

Локальная функция

, определенная внутри функции, является локальной функцией и

может быть вызвана только внутри функции

fun() {
    функция внутренняя() {
        console.log('Привет');
    }
    Internal(); // Вызов внутренней функции} fun();

Цепочка областей

При вложении функций переменная будет искать свое определение слой за слоем изнутри наружу

var a = 10; var b = 20; () {
    вар с = 30;
    функция внутренняя() {
        вар а = 40;
        вар д = 50;
        console.log(a, b, c, d // При использовании переменных js начнет с текущего слоя и будет искать определения слой за слоем}
    Internal();}fun();

замыкание

— это комбинация самой функции и состояния среды, в которой функция была объявлена.

Функция может «запомнить» среду, в которой она была определена, даже если функция не находится в ней. среда, в которой она была определена. При вызове вы также можете получить доступ к переменным среды, в которой она была определена.

В js замыкание создается каждый раз при создании функции, но функция закрытия часто требует, чтобы функция была определена

.

выполняется «в другом месте», чтобы иметь возможность наблюдать

за функцией замыкания:

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

   функция fun() {
       имя вар = 'Ниуби';
       функция внутреннийFun() {
           оповещение (имя);
       }
       return InternalFun;}var inn = fun();inn(); // Внутренняя функция перенесена во внешнее исполнение

2. для имитации частной переменной

   function fun() {
       вар а = 0;
       функция возврата() {
           предупреждение(а);
       }}var getA = fun();getA()

function fun() {
    вар а = 0;
    возвращаться {
        getA: функция () {
            вернуть а;
        },
        добавить: функция () {
            а++;
        }, 
        мощность: функция () {
            а *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

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

Немедленно вызовите специальный метод написания функции IIFE

. После определения немедленно вызываемая

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

(function () { // Превратим функцию в выражение с помощью круглых скобок // операторы})() ;+ функция() {
    предупреждение(1);}();-функция() {
    alert(1);}();

1. можно использовать для присвоения значений переменным

   var age = 12; var sex = 'Male'; var title = (function () {
       если (возраст <18) {
           вернуть «дети»;
       } еще {
           if (пол == 'мужской') {
               вернуть «мистер»;
           } еще {
               вернуть «Мс»;
           }
       }})();

2. В некоторых ситуациях (например, в цикле for) глобальные переменные заменяются локальными, и синтаксис становится более компактным.

var arr = []; for (var i = 0; i < 5; я++) {
    arr.push(функция () {
        предупреждение (я);     
    });}arr[2](); // Решение для всплывающего окна 5

:

var arr = [];for (var i = 0; i < 5; i++) {
    (функция (i) {
        arr.push(function() {
            предупреждение (я);
        });
    })(i);}arr[2](); // Всплывающее 2

DOM

значение общего атрибута nodeType

node Атрибут nodeType может отображать конкретный тип этого узла

Объект документа

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

Почти все функции DOM инкапсулированы в объект документа.

Объект документа также представляет собой весь HTML-документ. Дерево узлов.

Общие методы

document.getElementById()

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

блок <p id = " ">Я — блок</p><p id = "para">Я — абзац</p>

var box = document.getElementById('box'); var para = document.getElementById('para');

getElementsByTagName()

удобен для обхода, так что узлами элементов можно манипулировать пакетно,

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

Любой элемент узла также может вызовите метод getElementsByTagName(), чтобы получить внутри него узел элемента определенного класса

<p>Абзац</p> <p>Абзац</p> <p>Абзац</p><p>Абзац</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class ="spec">Box</p><p class ="spec ">Box</p><p class = "spec">Box< /p><p class = "spec">Box</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

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

<p id="box1">
    <p>Абзац</p>
    <p class = "spec">Абзац</p>
    <p>Абзац</p>
    <p>Paragraph</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

массив

длиной 1, даже если на странице есть только один узел, соответствующий

Для запуска

событие

window.onload = function() {} (добавьте прослушиватель событий к объекту окна, onload указывает, что страница загружена), чтобы после загрузки страницы был загружен указанный код.

Связь

между

узлами

Текстовые узлы также принадлежат узлам, поэтому мы обычно исключаем взаимодействие текстовых узлов (используя только узлы-элементы)

для написания общих функций отношений узлов

<body>
    <p идентификатор = "box1">
        <p>Абзац</p>
        <p class = "spec">Абзац</p>
        <p>Абзац</p>
        <p>Абзац</p>
	</p>
    <скрипт>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // Инкапсулируем функцию, которая возвращает все дочерние узлы элемента, аналогично дочерней функции getChildren(node) {
            вар детей = [];
            // Обходим все дочерние узлы узла и определяем, равен ли атрибут nodeType каждого байта 1
            // Если это 1, помещаем массив результатов for (var i = 0; i < node.childNodes.length; i++) {
                если (node.childNodes[i] == 1) {
                    Children.push(node.childNodes[i]);
                }
            }
            вернуть детей;
        }
       
        // Инкапсулируем функцию, которая может возвращать предыдущий родственный узел элемента, аналогично previousElementSibling function getElementPrevSibling(node) {
            вар о = узел;
            while (o.previousSibling != null) {
                если (o.prebiousSibling.nodeType == 1) {
                    // Завершаем цикл и находим return o.previousSibling;
                }
                о = o.previousSibling;
            }
            вернуть ноль;
        }
        
        // Инкапсулируем функцию, которая может возвращать все одноуровневые узлы элемента элемента function getAllElementSibling(node) {
            вар предыдущая = [];
            вар следующий = [];
            вар о = узел;
            while (o.previousSibling != null) {
                если (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                о = o.previousSibling;
            }
            о = узел;
            while (o.nextSibling != null) {
                если (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                о = о.nextSibling;
            }
            вернуть prevs.concat(следующие);
        }
    </script></body>

Измените содержимое узла элемента.

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

• InternalHTML

  может

• устанавливать

  содержимое узла в синтаксисе HTML.

• узел в виде обычного текста

<body>

    <p id = "коробка"></p>
    <скрипт>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>Молоко</li><li>Кофе</li></ul>' // Может анализировать синтаксис HTML // oBox.innerText = 'niub'; быть простым текстом</script></body>

Изменение стиля CSS узла элемента

эквивалентно установке атрибута встроенного стиля

oBox.style.backgroundColor = 'red' // Атрибуты CSS должны быть записаны в верблюжьем регистре oBox.style; .backgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';

Измените атрибуты HTML

узлов элементов на стандартные атрибуты W3C, такие как src, href и т. д., просто щелкните непосредственно, чтобы сделать это. изменения

oImg.src = ' images/2.jpg';

Для атрибутов, которые не соответствуют стандартам W3C, используйте setAttribute() и getAttribute() для установки и чтения

<body>
    <p id = "коробка"></p>
    <скрипт>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10 // Добавляем атрибут data-n со значением 10);
        var n = box.getAttribute('date-n');
        предупреждение (п);
    </script></body>

Создание узла

Метод document.createElement() используется для создания HTML-элемента с указанным тэгом

var op = document.createElement('p');

Вновь созданный узел является «сиротским узлом», и Он не смонтирован в дереве DOM и не виден. Вы

должны продолжать использовать метод AppendChild() или InsertBefore(), чтобы вставить потерянный узел в дерево DOM.

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

-

родителем.

него

и

станьте родительским узлом перед его «дочерним узлом эталона»

.

() Параметры, этот узел будет перемещен в

новый родительский узел.appendChild (узел, у которого уже есть родительский узел); новый родительский узел.insertBefore (узел, у которого уже есть родительский, эталонный дочерний узел); что узел не может находиться в дереве DOM одновременно. 
Удалить узлы
 в двух местах.

родительский узел

из DOM.removeChild

дочерний узел

cloneNode()

Метод может клонировать узел. Клонированный узел является «сиротским узлом».

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

var orphan node = old node.cloneNode(); var orphan node = old Node.cloneNode(true);

событие

• общее событие мониторинга событий мыши

, onmouseenter не всплывает, onmouseover всплывает,

• общий мониторинг событий клавиатуры,

• события прослушивания события общей формы

• общие прослушиватели событий страницы,

, когда установлен флажок Порядок выполнения прослушивания событий при вложении

<p id = "box1">
    <p идентификатор = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = функция () {
        console.log('box1');
    };
    
    oBox2.onclick = функция () {
        console.log('box2');
    };
    
    oBox3.onclick = функция () {
        console.log('box3');
    };
    // Щелкаем по самому внутреннему окну, направление распространения — изнутри наружу</script>

Распространение событий

Распространение событий происходит: сначала снаружи внутрь, а затем изнутри наружу (самый внутренний слой сначала не захватывается и потом не барботируется, а определяется исходя из порядка написания кода. Одноимённые ящики относятся к одному и тому же этапу и порядку. Если установлен один и тот же элемент. Если есть два или более события с одинаковым именем, то событие, записанное позже на уровне DOM0, перезапишет то, что было записано первым, и уровень DOM2 будет выполнен по порядку)

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

Метод addEventListener() (мониторинг событий уровня DOM 2)

oBox.addEventListener('click', function() {
 // Вот функция обработки событий}, true); // Если третий параметр имеет значение true, он будет прослушивать фазу захвата. Если он равен false, он будет прослушивать фазу всплеска событий,

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

объекта события

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

Этот параметр обычно обозначается словом event или буквой e

oBox.onmousemove = function (e) {
 //Объект e является «объектом события» этого события};

Атрибуты, связанные с объектом.

• Атрибуты, связанные с положением мыши.

Атрибуты положения мыши при срабатывании этого события.

• Атрибуты e.charCode и e.keyCode.

Атрибут e.charCode обычно используется в событии onkeypress для представления «кода символа» символа, введенного пользователем. .

Номер

кода	символа
0 ~ номер 9	48 ~ 57
заглавная буква A ~ Z	65 ~ 90
строчная буква a ~ z	97 ~ 122

Атрибут e.keyCode обычно используется в событиях onkeydown и onkeyup для представления «кода клавиши» нажатой клавиши.

номер кода

ключа

40

0	~
номер 9	48 ~ 57
часть буквы в верхнем и нижнем регистре a ~ z	65 ~ 90
Четыре клавиши направления ← ↑ → ↓	37, 38, 39,
Клавиша ввода	13
Клавиша пробела	32

Предотвратить событие по умолчанию

e. Метод .preventDefault() используется для предотвращения «действия по умолчанию», генерируемого событием.

Метод e.stopPropagation() используется для предотвращения продолжения распространения событий

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

• требует определенного количества ресурсов

Пакетное

• добавление событий приведет к слишком большому количеству мониторов и большому потреблению памяти.

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

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

: нельзя делегировать не-

родственные элементы).

всплывание событий в элементы-предки.

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

связанные с

таймера

setInterval() может вызывать функцию повторно, с фиксированным интервалом между каждым вызовом

setInterval(function () {
    // Эта функция будет автоматически вызываться через фиксированный интервал}, 2000); // Второй параметр — интервал в миллисекундах // Эта функция может получать 3-й, 4-й... параметры, и они будут передаваться по порядку. Введите функцию setInterval(function (a, b) {
    // Значение формального параметра a равно 88, а значение формального параметра b равно 66}, 2000, 88, 66); // Начиная с третьего параметра, он представляет параметры, передаваемые в функцию // Именованные функции могут также передается в setIntervalvar a = 0 function fun() {;
    console.log(++a);};setInterval(fun, 1000);

Очистить таймер.

ФункцияclearInterval() может очистить таймер

// Установите таймер и используйте переменную таймера для получения таймера var timer = setInterval(function ( ) {
    }, 2000);//При нажатии кнопки очищаем таймер oBtn.onclick = function () {
    ClearInterval(timer); };

задержки

setTimeout() может установить задержку. По истечении указанного времени функция будет выполнена один раз и не будет выполняться повторно

.
    

Асинхронно

очистить задержку

: она не будет блокировать процессор для продолжения выполнения других операторов. Когда асинхронное выполнение завершится, «функция обратного вызова». " будет выполнен. (обратный вызов)

setInterval() и setTimeout() — два асинхронных оператора

setTimeout(function () {
    console.log('A');}, 2000); // Асинхронный оператор console.log('B'); // Асинхронный оператор не блокирует нормальное выполнение программы // Результат выполнения

функции BA ограничивает

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

var lock = true function function, которая требует регулирования () {;
    // Если замок закрыт, то if(!lock) не будет выполнен return;
    // Основной оператор функции // Блокировка lock = false;
    
    //Открываем замок через указанное количество миллисекунд setTimeout(function () {
        блокировка = правда;
    }, 2000);}

BOM

BOM (объектная модель браузера, объектная модель браузера) — это интерфейс JS для взаимодействия с окном браузера.

Объект

— это окно, в котором выполняется текущий js-скрипт, и это окно содержит DOM. структура, окно Свойство .document — это объект документа.

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

1. Глобальные переменные станут объектами окна.

   var a = 10; console.log(window.a == a); // true

   Это означает, что несколько js-файлов имеют общую глобальную область, то есть файлы js не имеют функции изоляции области,

2. как правило, являются функциями Windows

.
3. такие

   методы

   , как setInterval(), alert() и другие встроенные функции, обычно являются методами окна.

Свойства, связанные с размером окна.

.

событие изменения размера

в окне. После изменения размера будет вызвано событие изменения размера. Вы можете использовать window.onresize или window.addEventListener('resize') для привязки обработчика событий.

высоты прокрутки

представляет значение пикселя.

document.documentElement, который был прокручен в вертикальном направлении. Свойство .scrollTop также представляет высоту прокрутки окна

. Для лучшей совместимости с браузерами эти два значения обычно записываются вместе

var ScrollTop = window.scrollY || document.documentElement.scrollTop

document; documentElement.scrollTop не доступен только для чтения, а window.scrollY — это

событие прокрутки только для чтения.

После прокрутки окна будет запущено событие прокрутки. Вы можете использовать window.onscroll или window.addEventListener('scroll') для. привязать функцию обработчика событий

Объект Navigator.

Свойство window.navigator может получить объект navigator. Object, который содержит соответствующие атрибуты и идентификационные

объекта истории

. Объект .history предоставляет интерфейс для работы с историей сеансов браузера.

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

History.back() // Эквивалент нажатия кнопки возврата браузера.

(

-1

)

;

• ;

  window.location

.

• ПАРАМЕТРИЯ

  ​

• ​

  ​

​

​

этого

элемента

позиционного

предка

.

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

.
    Имя: 'Xiao Ming',
    Возраст: 12,
    Секс: «Мужчина»,
    

• Хобби

• :

[Футбол ', «Программирование»]}

;

• Имя атрибута не соответствует конвенции именования JS, вы должны использовать квадратные скобки для

• доступа

  .

      A: 1,
      b: 2,
      C: 3}; var key = 'b'; console.log (obj.key

)

;
    A: 10}; obj.b

=

40

;

    A: 1,
    

}

;

obj.a

;

    Имя: 'Xiao Ming',
    Возраст: 12,
    Секс: «Мужчина»,
    Хобби: [«Футбол», «Плавание», «Программирование»],
    «Любимая книга»: 'Shuke and Beta',
    sayhello: function () {
        console.log ('hello');
    

}

}

;

​

    console.log ('значение «атрибут» + k +' - + obj [k]);}

глубокий клон объекта

var obj1 = {
    A: 1, 
    b: 2, 
    C: [33, 44, {
        м: 55,
        n: 66,
        П: [77, 88]
    }]}; function deepClone (o) {
    if (array.isarray (o)) {
        var result = [];
        for (var i = 0; i <o.length; i ++) {
            result.push (deepClone (o [i]));
        }
    } else if (typeof o == 'Object') {
        var result = {};
        для (var k in o) {
            результат [k] = deepClone (o [k]);
        }
    } еще {
        var result = o;
    }
    Вернуть результат;}

Это

можно

контекстном

порядке

​

​

​

)

;

​
    Alert (this.c + this.m + this.e + b1 + b2);} sum.call (xiaming, 5, 3); 3];

(

1. Это
)
2. будет

3. указывать
   

   на этот объект.

/ {} Это указывает на этот пустой объект this.a = 3;
    this.b = 5; // {a: 3, b: 5}
    

//

автоматически добавлять это;} var obj = new Fun (); console.log (obj

)

;
    это.имя = имя;
    this.age = возраст;
    this.sex = sex;} var xiaming = new People ('小明', 12, 'male'); var xiaoming = new People ('小红', 10, 'nember'); var xiaogang = новые люди ('小

• Мужчина
• »

);

• Создайте новый объект », операторы внутри него добавят несколько свойств и методов в новый объект, завершить инициализацию объекта

и добавить функцию метода

люди (имя, возраст, пол) {
    это.имя = имя;
    this.age = возраст;
    this.sex = sex;
    this.sayhello = function () {
        console.log ('i am' + this.name);
    /

​

​По умолчанию атрибут конструктора возвращается к функции

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

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

к

свойствам и методам своего прототипа.

    это.имя = имя;
    this.age = возраст;
    this.sex = sex;} people.prototype.nationalty = 'Китай'; (Xiaming .nationality);

HasownProperty ()

Этот метод может проверить, действительно ли объект «владеет» определенным свойством или методом

xiaoming.hasownproperty («Имя»);

(

nationality

'

);

/ true'age 'in xiaming // true'sex' in xiaming // true'nationality 'в Xiaoming // true

добавить методы в прототип

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

Функция людей (имя, возраст, пол) {
    это.имя = имя;
    this.age = возраст;
    this.sex = sex;} people.prototype.sayhello = function () {
    

(

'xiaming', 12, 'male'); xioming.sayhello ();

Массив прототип цепь

Наследование

1. реализуется с помощью цепочки прототипа,

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

Проблема наследства через цепочку прототипа

• в атрибуте родительского класса
• . Многие атрибуты определены суперкласс.

2. конструктор

• подкласса не написан достаточно элегантно

. обычно

используется

.

    это.имя = имя;
    this.sex = sex;
    this.age = возраст;
    this.arr = [1, 2, 3];} Функция Функции (имя, пол, возраст, школа, sid) {
    People.call (это, имя, пол, возраст);
    this.school = школа ';
    this.sid = sid;} var xiaming = new Student ('xiao ming', 'Male', 12, 'School', 123456

)

3. ;

называется

псевдоклассиическим наследством

.

Прототип наследует

метод object.create (), который может создавать новый объект, основанный на указанном объекте как прототип (IE9)

var obj2 = object.create (obj1); , {// Нет. Два параметра являются объектом, а добавленные атрибуты записываются в IT D: {// Значение атрибута по -прежнему остается значением объекта: 99 // Значение равно 99
    } // Вы можете маскировать свойства с тем же именем на прототипе});

Когда нет необходимости «тратить много усилий» на создание конструктора, но вы просто хотите, чтобы новый объект был «похож на существующий объект, вы можете использовать object.create (), который называется совместимостью Прототипальный объект наследования

. CReate () Уникальный метод написания

реализует object.create () в браузерах нижней версии

// функция, написанная Дугласом Крокфордом // Функция функции заключается в использовании o в качестве прототипа для создания нового объекта функции (o ) {
    // Создать функцию временного конструктора f () {}
    // Пусть прототип этого временного конструктора указывает на o, чтобы новый объект, который он создает, __proto__ указывает на o
    F.Prototype = O;
    Верните новое f ();}

паразитным наследом

, которое может «улучшить объект». Назначьте новые объекты новому объекту

.
    var p = object.create (o);
    p.display = function () {
        Console.log (111);
    }
    Возврат P;}

Недостатки:

снижается

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

повторного использования (методы не записываются на прототип)

.

, супертип) {
    var prototype = object.create (supertype.prototype);
    subtype.prototype = prototype;
}

// Функция родительского класса люди (имя, пол, возраст) {
    это.имя = имя;
    this.sex = sex;
    this.age = возраст;
}

People.prototype.sayhello = function () {
    console.log ("Привет");
}
People.prototype.sleep = function () {
    console.log ("Sleep");
}

// Функция подкласса (имя, пол, возраст, школа, SID) {
    People.call (это, имя, пол, возраст);
    this.school = школа;
    this.sid = sid;
}

inheritprototype (студент, люди);
    console.log ("экзамен");
};

var xiaming = new Student ('xiao ming', 'мужчина', 12, «школа», 123456);

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

используется для обнаружения «является ли объект экземпляром определенного класса»

экземпляра Сююмиама // Основного механизма: проверьте, находится ли атрибут прототипа. Это)

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

JavaScript

имеет много встроенных конструкторов.

.

Связь между встроенными конструкторами:

объект.

Любая функция может рассматриваться как функция «Новый».

Класс обертки

Math Object

Math.pow ()

из прототипа их конструктора

Math.sqrt ()
Math.ceil () // Tround Up Math.floor () // Trul Down Math.round () // Trul Up Math.max () // Максимальное значение списка параметров Math.min ()

// Рассчитайте максимальное значение массива ARR var arr = [3, 6, 9, 2];

math.max.apply

(

null, arr);

2020-12-01 ')

Общие методы

(

TimeStamp.

TimeStamp

.

​

​

​(Регулярное выражение) описывает «шаблон« конструкции », часто используется для проверки того, соответствует ли строка с заранее определенным форматом. Создайте регулярное выражение

1. с использованием /内容/ синтаксис -форма

var str = '123456'; var regxp = /^ d {6} $/; if (regxp.text (str)) {
	Alert ('соответствовать правилам');} else {
	ALERT ('не соответствует правилам');}

2. Форма нового regexp ('content')

var regxp2 = new Regexp ('^\ d {6} $')

Metacharacter

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

символ

.

Квадратные

кронштейн

- ^

квантификатор

модификаторов M Times,

также называемые флагами используются для

выражений

.

строку.

его

     
// Метод search (), очень похожий на indexof (), возвращает первый найденный индекс, или -1, если его не найден.
var result1 = str.search (/ d+/g);
var result2 = str.search (/m/g);
Console.log (Result1);
Console.log (Result2);

// Метод Match () возвращает найденной массив.
var result3 = str.match (/ d+/g);
Console.log (Result3);

// Метод заменить (), заменить var result4 = str.replace (/[az] +/g, '*'); ; //*123*4567*89

// split () метод, разделить строку на массив var result5 = str.split (/ d+/g);
console.log (result5);