Зачем нам нужно связывать, вызывать и применять в Javascript

В Javascript у нас есть нечто, называемое this. this — это ключевое слово, которое ссылается на значение, обычно на объект, который ссылается на текущий контекст выполнения. Я знаю, что это может сбивать с толку. Давайте немного помедлим.

Что такое контекст выполнения?

Контекст исполнения скважины в терминах неспециалиста объем значения/объекта.

Таким образом, текущим контекстом выполнения будет текущая область действия ключевого слова this, на которое ссылается.

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

// In web browsers, the window object is also the global object:
console.log(this === window); // true

Когда вы используете this внутри функции, значение this будет зависеть от того, как оно вызывается.

Например,

function basicFunc() {
  return this;
}

// In a browser, the basicFunc refers to the global object
basicFunc() // window
function getValueOfthis() {
 console.log(this);
}
const newObject = {
 text: "Hello World",
  getValueOfthis
}
// In a browser, the current context would changed to newObject 
newObject.getValueOfthis();
/* Output: 
{
  getValueOfthis: function getValueOfthis() {
    console.log(this);
},
  text: "Hello World"
}
*/

Зачем нам нужен this ?

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

Какой смысл в связывании, вызове и применении?

Привязка, вызов и применение помогают изменить текущий контекст выполнения для вашего this

let newAgent = {
  name: 'Burt Macklin'
};
function modifyAgent() {
  this.name = 'Andy Dwyer';
  return this.name;
}
console.log(modifyAgent()); // 'Andy Dwyer'
console.log(newAgent.name); // 'Burt Macklin'

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

let newAgent = {
  name: 'Burt Macklin'
};
function modifyAgent() {
  this.name = 'Andy Dwyer';
  return this.name;
}
/* Notice: bind() will create a new function while call and apply instantly calls the function */
const bindContext = modifyAgent.bind(newAgent);
console.log(bindContext()); // 'Andy Dwyer'
console.log(modifyAgent.call(newAgent)); // 'Andy Dwyer'
console.log(modifyAgent.apply(newAgent)); // 'Andy Dwyer'
console.log(newAgent.name); // 'Andy Dwyer'

Вот как нам помогают bind(), call() и apply().

Я знаю, что это, вероятно, было плохим объяснением основных понятий, таких как this, bind, call и apply. Но вот несколько ресурсов для дальнейшего чтения: