Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


JavaScript это ключевое слово


Пример

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Что это ?

Ключевое слово JavaScript thisотносится к объекту, которому оно принадлежит.

Он имеет разные значения в зависимости от того, где он используется:

  • В методе thisссылается на объект-владелец .
  • В одиночку thisотносится к глобальному объекту .
  • В функции thisссылается на глобальный объект .
  • В функции в строгом режиме thisесть undefined.
  • В событии thisотносится к элементу , который получил событие.
  • Методы типа call(), и apply()могут ссылаться thisна любой объект .

это в методе

В объектном методе thisотносится к « владельцу » метода.

В примере вверху этой страницы thisотносится к объекту person .

Объект person является владельцем метода fullName .

fullName : function() {
  return this.firstName + " " + this.lastName;
}

это один

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

В окне браузера глобальный объект [object Window]:

Пример

let x = this;

 В строгом режиме , когда используется отдельно, thisтакже относится к объекту Global [object Window]:

Пример

"use strict";
let x = this;

это в функции (по умолчанию)

В функции JavaScript владельцем функции является привязка по умолчаниюthis для .

Итак, в функции thisссылается на глобальный объект [object Window].

Пример

function myFunction() {
  return this;
}

это в функции (строгой)

Строгий режим JavaScript не разрешает привязку по умолчанию.

Итак, при использовании в функции в строгом режиме thisis undefined.

Пример

"use strict";
function myFunction() {
  return this;
}

это в обработчиках событий

В обработчиках событий HTML thisотносится к элементу HTML, получившему событие:

Пример

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>


Связывание метода объекта

В этих примерах thisэто объект person (объект person является «владельцем» функции):

Пример

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

Пример

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Другими словами: this.firstName означает свойство firstName этого (человека) объекта.


Явное связывание функций

Методы call()и apply()являются предопределенными методами JavaScript.

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

Вы можете прочитать больше об этом call()и apply()позже в этом руководстве.

В приведенном ниже примере при вызове person1.fullName с аргументом person2 thisбудет ссылаться на person2, даже если это метод person1:

Пример

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // Will return "John Doe"