В этом уроке (JavaScript контекст) разберём:

• что такое ключевое слово this в рамках языка
• и разберём 3 стандартные функций
  1. Bind
  2. Call
  3. Apply

Слово this

Для начало создадим объект:

var obj1 = {
    name: 'Obj 1',
    getName: function () {
        console.log("'It's name is: '", this.name);
    }
};
console.log( obj1.getName() );

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

Если посмотрим что лежит в объекте this то увидим следующее:

Создадим ещё один объект:

var obj2 = {
    name: 'Obj 2'
};

Метод Bind

До пустим с помощью функций getName объекта obj1, получить значение name объекта obj2. Для этого существует специальный метод у функций, что характерно только для языка JavaScript:

var obj1 = {
    name: 'Obj 1',
    getName: function () {
        console.log("It's name is: ", this);
    }
};

var obj2 = {
    name: 'Obj 2'
};
obj1.getName.bind(obj2)(); // последние круглые скобки написаны потому что функция bind возвращает функцию

При таком подходе, будет вызываться функция getName но объект this в ней, будет obj2. Можем убедиться в этом, посмотрев результат кода который написан выше:

Как передать параметры с помощью метода bind:

var obj1 = {
    name: 'Obj 1',
    getName: function (age) {
        console.log("It's name is: ", this, age);
    }
};

var obj2 = {
    name: 'Obj 2'
};
obj1.getName.bind(obj2)(18); // тут мы написали параметры

Метод Call

Это тоже метод функций. Делает то же самое что и bind но при этом сразу же вызывает функцию. То есть, метод bind возвращает как результат функцию, а call так-же возвращает функцию но и запускает её.

var obj1 = {
    name: 'Obj 1',
    getName: function (age) {
        console.log("It's name is: ", this, age);
    }
};

var obj2 = {
    name: 'Obj 2'
};
obj1.getName.call(obj2);

Параметры с помощью метода call передаются так:

var obj1 = {
    name: 'Obj 1',
    getName: function (age) {
        console.log("It's name is: ", this, age);
    }
};

var obj2 = {
    name: 'Obj 2'
};
obj1.getName.call(obj2, 18); // то есть через запятую

Метод apply

Это так-же метод функций. И метод apply работает точно как метод call, только разница в способе передачи параметров:

var obj1 = {
    name: 'Obj 1',
    getName: function (age, age2) {
        console.log("It's name is: ", this, age, age2);
    }
};

var obj2 = {
    name: 'Obj 2'
};
obj1.getName.call(obj2, [18, 20]);

Параметры:

1. Контекст с которым нужно вызвать функцию.
2. Массив аргументов которые передадутся в функцию.

Результат выполнения кода:

---

Рекомендую

Если хотите изучить JavaScript то рекомедую данные курсы.

Платные:

• JavaScript&jQuery с нуля до профи автор Виктор Гавриленко, WebForMySelf
• JavaScript, jQuery и Ajax с Нуля до Гуру автор Михаил Русаков
• Angular 4 с Нуля до Профи автор Владилен Минин, WebForMySelf
• React JS, Redux, ES2015 с Нуля до Гуру автор Владилен Минин

Бесплатные:

• Основы JavaScript, jQuery и Ajax автор Михаил Русаков
• Практический курс по React JS для начинающих автор Владилен Минин
• Мини-курс Angular автор Владилен Минин, WebForMySelf

---

Может возникнуть вопрос: “Зачем нужно было делать 2 эти метода?”, и вот, было сделано 2 метода потому что порой Мы не знаем какое количество параметров получает функция.

Удачного Вам кодирования! 🙂