Рубрики
Без рубрики

JavaScript: упрощение “это”

Основы, которые это в любой области, эквивалентны объекту, неявно это объект от … Tagged with JavaScript, WebDev, новички.

Основы

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

Простой пример

var obj = {
  age: 2,
  printAge: function () {
    console.log(this.age);
  },
};

obj.printAge(); // 2

Функции стрелы

Функции стрел – это не просто синтаксический сахар по сравнению с нормальной функцией, помимо других различий, одним из основных различий является ценность это Это следует за лексическим статическим связыванием, т. Е. это больше не динамично. это так же, как это Внешнего лексического прицела. Что означает внешняя лексическая область?

Сфера применения родительской функции!

const x = {
  y: 2,
  x1: {
    m1: () => console.log(1, this),
  },
  x2: function () {
    const y2 = {
      m1: () => console.log(2, this),
      m2: function () {
        const y3 = {
          m3: () => console.log(3, this),
        };
        return y3;
      },
    };
    return y2;
  },
};

x.x2().m1(); // 2, {y: 2, x1: Object, x2: ƒ x2()}
x.x2().m2().m3(); // 3, {m1: ƒ m1(), m2: ƒ m2()}

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

Давайте приведем пример

var a = 1;

function incA() {
  this.a = this.a + 1;
}

incA();

console.log(a); // 2

ПРИМЕЧАНИЕ. Приведенный выше пример содержится только для «Скрипта», а не «модуля», он будет работать в консоли браузера, но не в CodeSandbox по той же причине.

Класс и “это”

Есть некоторые правила, соответствующие для нашего обсуждения

  1. Функция стрелки не может быть использована в качестве конструктора.
  2. это В стрелке будет равен экземпляру этого класса. Как? Оформление: Пример транспилированного кода для класса

Давайте приведем пример

class X {
  name = 2;
  method1() {
    console.log(this.name);
  }
  method2 = () => {
    console.log(this.name);
  };
}

const z = new X();
z.method1(); // 2
z.method2(); // 2

Давайте добавим еще два метода

class X {
  name = 2;
  method1() {
    console.log(this.name);
  }
  method2 = () => {
    console.log(this.name);
  };
  method3() {
    this.method1();
  }
  method4 = () => {
    this.method2();
  };
}

const z = new X();
z.method3(); // 2
z.method4(); // 2

Все еще ничего не меняется как Метод 3 призывается к самому объекту ( z ), чтобы он получил контекст и Метод 4 имеет статическое связывание.

Добавьте следующий код в конце:

const method5 = z.method3;
const method6 = z.method4;

method6(); // 2
method5(); // TypeError: Cannot read property 'method1' of undefined

Как Метод 5 Теперь потерял контекст, он не может указывать на это Вы должны задаться вопросом, почему он бросает ошибку вместо неопределенное Как мы обсуждали изначально!

Модуль? Нет, не на этот раз!

Это связано с внедрением класса. Класс определяется как функция внутри, немедленно вызванная экспрессией функции.

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

Перепроявляя “это”

Может быть случай, когда вы хотели бы вызвать метод из одного объекта с другим объектом, например,

Этот пример будет использоваться в разделе

const square1 = {
  side: 5,
  getArea: function () {
    return this.side * this.side;
  },
};

const square2 = {
  side: 10,
};

console.log(square1.getArea()); // 25
console.log(square1.getArea.call(square2)); //100

// This will work as well
const getArea = square1.getArea;
console.log(getArea.call(square2)); //100

// This too
const getArea2 = square1.getArea.bind(square2);
console.log(getArea2()); //100

привязать VS Call

С Позвоните Вы можете указать объект при вызове метода, и с помощью каждого вызова вы можете передать другой объект.

const square3 = {
  side: 20,
};
console.log(getArea.call(square3)); //400

связывать Один раз, когда метод сформировал связь с объектом, его нельзя сломать, вы не можете связывать это снова или используйте Позвоните в теме.

// const getArea2 = square1.getArea.bind(square2);
console.log(getArea2()); //100
console.log(getArea2.call(square3));

const getArea3 = getArea2.bind(square3); // 100
console.log(getArea3()); // 100

применить так же, как вызов , он просто ожидает массива параметров вместо отдельных параметров.

-eof–

Оригинал: “https://dev.to/mukuljainx/javascript-simplifying-this-48g2”

Читайте ещё по теме: