исследуя ключевое слово "это" в javascript

Question

У меня есть следующий блок кода в javascript:

const obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"

    function a() {
      console.log(this.name)
    }
    a();

  }
}

obj.func1();

почему я не получаю ни одного состояния console.log об этом ключевом слове? Я действительно запутался, это ни obj, ни undefined, ни объект window

Answer 1

const obj = {
  name: "sri1",
  func1: function() {  // <-- 1
    const name = "sri2"

    function a() { // <-- 2
      console.log(this.name)
    }
    a();

  }
}

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

Итак, для вашего примера. Я пометил ваш код двумя ссылочными точками в комментариях.

1. Функция Mark 1, это функция свойства объекта. Таким образом, this указывает на объект obj.
2. Функция Mark 2, она внутри функции mark 1, теперь this внутри функции a() указывает на объект window. ( Если вы мне не верите, проверьте это с помощью console.log(this) внутри function a())

Как я могу получить this объекта во внутренней функции ?

Есть несколько способов добиться этого. Я упоминаю о некоторых из них.

Использование arrow function.

Функция стрелки не изменяет ссылку на указатель this. Он указывает на блоки this, в которых лежит функция.

const obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"

    const a = () => { // Using arrow function
      console.log(this.name)
    }

    a();
  }
}

Сохранение предыдущего this в переменной.

Вы можете поместить this в переменную скажем, that, затем получите доступ к значению, используя that.name.

const obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"
    const that = this; // Put this into that

    function a() {
      console.log(that.name); // Access the name using that.name
    }

    a();
  }
}

Bind this при вызове функции.

Вы можете связать this с помощью функции использовать внутри него.

const obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"

    function a() {
      console.log(this.name)
    }

    const withThis = a.bind(this); // Make a function reference with `this` bindings
    withThis(); // Call the function
  }
}

Использование call() или apply()

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

Хотя синтаксис этой функции почти идентичен синтаксису apply(), принципиальное отличие состоит в том, что call() принимает список аргументов, а apply() принимает один массив аргументов.

const obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"

    function a() {
      console.log(this.name)
    }

    a.call(this); // call() binds the `this`
    // Or
    a.apply(this); // apply() also binds the `this`
  }
}

Answer 2

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

То, что ваш this.name возвращает в обычной среде, это просто пустая строка. Вот почему вы ничего не видите - как сказал @dellink. window.name - это "", если вы не установили его. Итак, что вы на самом деле видите, это просто строка, внутри которой ничего нет.

Причина, по которой в вашем примере записывается какое-то странное свойство, заключается в изолированной программной среде переполнения стека. Здесь ключевое слово this относится не к общему объекту window, а к другому объекту, который действительно имеет свойство name с некоторым значением.

Проверка это:

console.log(this.name)

Answer 3

Сложность в том, что когда вы определяете функцию a - она ​​определяется в глобальной области видимости.

var obj = {
  name: "sri1",
  func1: function() {
    const name = "sri2"
    console.log(this); // obj (!) *2
    function a() {
      console.log(this); // window (!) *3
    }
    a();

  }
}
obj.func1();
console.log (a()) // window (!) *1

Посмотрите на точку № 1: a функция существует. И это контекст window. И это то, что происходит в первую очередь - определение функций и переменных.

Когда вы вызываете "obj.func1 ();" он действительно вызывает в контексте obj (* 2)

Когда вы вызываете a, контекст функции снова переключается в окно. (* 3)

Answer 4

Вы регистрируетесь window.name в своей функции. Это «», если вы не установите его.