JavaScript контекст, методы функций bind, call и apply

В этом уроке (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() );

var obj1 = {

getName: function () {

console.log("'It's name is: '", this.name);

}

};

console.log( obj1.getName() );

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

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

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

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

var obj2 = {

};

Метод 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 возвращает функцию

var obj1 = {

getName: function () {

console.log("It's name is: ", this);

}

};

var obj2 = {

};

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); // тут мы написали параметры

var obj1 = {

getName: function (age) {

console.log("It's name is: ", this, age);

}

};

var obj2 = {

};

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);

var obj1 = {

getName: function (age) {

console.log("It's name is: ", this, age);

}

};

var obj2 = {

};

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); // то есть через запятую

var obj1 = {

getName: function (age) {

console.log("It's name is: ", this, age);

}

};

var obj2 = {

};

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]);

var obj1 = {

getName: function (age, age2) {

console.log("It's name is: ", this, age, age2);

}

};

var obj2 = {

};

obj1.getName.call(obj2, [18, 20]);

Параметры:

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

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

JavaScript контекст, Bind Call Apply

Слово this

Метод Bind

Метод Call

Метод apply

Рекомендую

Добавить комментарий Отменить ответ

Слово this

Метод Bind

Метод Call

Метод apply

Рекомендую

Похожие статьи:

Добавить комментарий Отменить ответ