Метод apply() в JavaScript на практических примерах

В этом руководстве вы узнаете о методе JavaScript apply() типа Function и о том, как его эффективно использовать.

Метод Function.prototype.apply() позволяет вызывать функцию с заданным значением this и аргументами, представленными в виде массива. Синтаксис:

fn.apply(thisArg, [args]);

Метод apply() принимает два аргумента:

• thisArg — это значение this, предоставленное для вызова функции fn.
• Аргумент args — это массив, который определяет аргументы функции fn. Начиная с ES5, аргумент args может быть массивоподобным объектом или массивом.

Метод apply() подобен методу call(), за исключением того, что он принимает аргументы функции в виде массива, а не отдельных аргументов.

Примеры

Давайте рассмотрим несколько примеров использования метода apply().

1) Пример простого метода

Предположим, что у вас есть объект person :

const person = {
    firstName: 'John',
    lastName: 'Doe'
}

Функцию с именем greet() следующим образом:

function greet(greeting, message) { 
    return `${greeting} ${this.firstName}. ${message}`; 
}

Функция greet() принимает два параметра: greeting и message. Внутри функции greet() мы ссылаемся на объект со свойством firstName.

В следующем примере показано, как использовать метод apply() для вызова функции greet() с установленным this для объекта person :

let result = greet.apply(person, ['Hello', 'How are you?']); 
console.log(result);

Выход:

Hello John. How are you?

В этом примере мы устанавливаем значение this внутри функции для объекта person. Аргументы функции greet() были переданы в метод apply() в виде массива.

Метод apply() вызвал функцию greet() со значением this, установленным на объект person и аргументы в виде массива ['Hello', 'How are you?'].

Если вы используете метод call(), вам необходимо передать аргументы функции greet() отдельно следующим образом:

let result = greet.call(person, Hello', 'How are you?');

2) Заимствование функций

Метод apply() позволяет объекту заимствовать метод другого объекта без дублирования кода.

Предположим, что у вас есть следующий объект computer:

const computer = {
    name: 'MacBook',
    isOn: false,
    turnOn() {
        this.isOn = true;
        return`The $ {
            this.name
        }
        is On`;
    },
    turnOff() {
        this.isOn = false;
        return`The $ {
            this.name
        }
        is Off`;
    }
};

Следующий объект server :

const server = {
    name: 'Dell PowerEdge T30',
    isOn: false
};

Объект server не имеет turnOn() и turnOff().

Чтобы выполнить метод turnOn() объекта computer на объекте server, вы можете использовать метод apply() следующим образом:

let result = computer.turnOn.apply(server); 
console.log(result);

Выход:

The Dell PowerEdge T30 is On

В этом примере объект- server заимствует метод turnOn() объекта- computer.

Точно так же вы можете вызвать метод turnOff() объекта computer на объекте server:

let result = computer.turnOff.apply(server); 
console.log(result);

Выход:

The Dell PowerEdge T30 is Off

3) Использование для добавления массива к другому

Метод apply() позволяет добавлять элементы одного массива к другому:

let arr = [1, 2, 3]; 
let numbers = [4, 5, 6]; 
arr.push.apply(arr, numbers); 
console.log(arr);

В этом примере метод apply() изменяет исходный массив arr. Обратите внимание, что метод Array.prototype.concat() также дает тот же результат, за исключением того, что он возвращает новый массив вместо изменения исходного массива.

Заключение

• Метод apply() вызывает функцию с заданным значением this и аргументами, предоставленными в виде массива.
• Метод apply() аналогичен методу call(), за исключением того, что он принимает аргументы функции в виде массива, а не отдельных аргументов.