звоните, связывайте и применяйте в JavaScript!

Конечно! Вызов, привязка и применение — это три метода в JavaScript, которые позволяют вам установить значение this внутри функции. В этой статье мы рассмотрим, что такое this, почему это важно и как использовать вызов, привязку и применение для управления им.

Что такое this в JavaScript?

В JavaScript this относится к объекту, на котором выполняется текущий код. Значение this может меняться в зависимости от того, как выполняется код, и это является распространенным источником путаницы для многих разработчиков JavaScript.

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

const myObject = {
  myMethod() {
    console.log(this);
  }
};

myObject.myMethod(); // logs { myMethod: ƒ }

В этом примере this относится к объекту myObject, потому что myMethod вызывается как метод myObject.

Однако, если вы вызываете ту же функцию без контекста объекта, this будет ссылаться на глобальный объект window (или undefined в строгом режиме):

function myFunction() {
  console.log(this);
}

myFunction(); // logs Window (or undefined in strict mode)

В этом примере this относится к объекту window, потому что myFunction не вызывается как метод какого-либо объекта.

Почему this важно?

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

Например, допустим, у вас есть функция, которая вычисляет площадь прямоугольника:

function calculateArea() {
  return this.width * this.height;
}

Эта функция предполагает наличие свойств width и height у объекта, для которого она вызывается. Но что, если вы хотите использовать эту функцию с разными объектами, имеющими разные имена свойств?

Используя call, bind или apply, вы можете установить значение this внутри функции для любого объекта, который вы хотите, независимо от того, какие имена свойств он использует.

Call

Метод call позволяет вызывать функцию с указанным значением this и любыми аргументами, которые ожидает функция. Вот пример:

const rectangle = {
  width: 10,
  height: 20
};

function calculateArea() {
  return this.width * this.height;
}

const area = calculateArea.call(rectangle);
console.log(area); // logs 200

В этом примере мы вызываем функцию calculateArea с объектом rectangle в качестве значения this. Это означает, что this.width и this.height внутри функции будут ссылаться на свойства width и height объекта rectangle.

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

const nees = {
  firstName: "Nischal",
  lastName: "Dahal",
};
const anki = {
  firstName: "Ankita",
  lastName: "Dahal",
};
console.log(person.fullName.call(nees));
console.log(person.fullName.call(anki));

Используя call, мы можем установить значение this. Первый аргумент — это присваиваемый объект, затем мы можем ввести дополнительные аргументы, которые затем будут использоваться функцией Function !

const obj = { name: "ankita" };

let greeting = function (a, b) {
  return `${a} ${this.name}, ${b}`;
};

На этот раз наша функция имеет 2 parameters, мы можем сначала назначить наш объект, а затем предоставить наш аргумент.

console.log(greeting.call(obj, "Hello", "How are you"));

Применять

Метод apply аналогичен методу вызова the only difference is that the call method takes arguments separately via comma(,) where as the apply will takes arguments as an array.

console.log(greeting.call(obj, ["Hello", "How are you !"]));
// Hello ankita, How are you !

Итак, при работе с массивами вы хотели бы использовать apply! здесь у меня есть несколько интересных вещей, которые вы можете сделать с помощью метода apply. например, массивы JavaScript не имеют метода max,

console.log(Math.max(1,3,4)) // 4

Что, если у нас есть массив чисел, и мы хотим получить от него максимальное значение, мы могли бы использовать apply.

const numbers = [1,2,4,5,6,7,8];
console.log(Math.max.apply(null, numbers)); // 8

Здесь мы ничего не присваиваем ключевому слову this, поэтому мы передаем объект как null и аргумент с массивами чисел!

Bind

Метод связывания создает новую связанную функцию, которая wraps выполняет функцию original с object, поэтому здесь мы, по сути, создаем новую функцию bound для obj, а затем вызываем функцию вместе с нашей arguments.

const obj = { name: "ankita" };

let greeting = function (a, b) {
  return `${a} ${this.name}, ${b}`;
};
let bound = greeting.bind(obj);
console.log(bound("Hello", "How are you!"));
// Hello ankita, How are you ?

Метод bind похож на call, но вместо немедленного вызова функции он возвращает новую функцию со значением this и любыми предварительно установленными аргументами. Вот пример:

const rectangle = {
  width: 10,
  height: 20
};

function calculateArea() {
  return this.width * this.height;
}
const boundCalculateArea = calculateArea.bind(rectangle);
const area = boundCalculateArea();

console.log(area); // logs 200

В этом примере мы создаем новую функцию с именем boundCalculateArea и передаем ей прямоугольник объекта!

Магический раздел:

const fn = Function.bind.bind(Function.call);
fn(console.log("hello world")); // hello world
fn(alert("hello from neeswebservices!")); // hello from neeswebservices
export const c = console.log.bind(console); 
c('Hello Nischal'); // Hello Nischal
function random() {
  alert(this.foo);
}

var bb = Function.bind.bind(Function.call);
var randomcall = bb(random);

randomcall({ foo: "hello world" }); // alerts "hello world"
var uncurryThis = Function.bind.bind(Function.call);
var uc = uncurryThis(String.prototype.toUpperCase);
console.log(uc("hello")) // in contrast to "hello".toUpperCase() HELLO

то же самое у нас:

Function.bind.bind(Function.call)
// return new Function.bind with its `this` is replaced by `Function.call`

Спасибо, что нашли время прочитать мою статью! Надеюсь, вы нашли его информативным и полезным. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, не стесняйтесь обращаться ко мне. Ваша поддержка и участие очень ценятся!

Дайте ХЛОП 👏, если вам помог контент!

Это мой первый блог, отзывы принимаются, если они у вас есть 💗.

Читать далее…



Как удалить повторяющиеся значения из массива объектов и все, что вам нужно знать о…
Итак, в общем, почему этот пост будет вам полезен? Прежде чем погрузиться в блог, моргните на секунду здесь!medium.com