Как работает ключевое слово "this"? - PullRequest
Новая
       112

Как работает ключевое слово "this"?

1210 голосов
/ 27 июня 2010

Я заметил, что нет четкого объяснения, что такое ключевое слово this и как оно правильно (и неправильно) используется в JavaScript на сайте переполнения стека.

Iбыли свидетелями какого-то очень странного поведения с ним и не смогли понять, почему это произошло.

Как работает this и когда его следует использовать?

Ответы [ 22 ]

0 голосов
/ 30 ноября 2018

Простой ответ:

Ключевое слово "this" всегда зависит от контекста вызова. Они упомянуты ниже.

  1. ФУНКЦИЯ ВЫЗВАНА С НОВЫМ КЛЮЧОМ СЛОВА

    Если функция вызывается с ключевым словом NEW, тогда ЭТО будет привязана к вновь созданному объекту. 

    function Car(){
  this.name="BMW";
}
const myCar=new Car();
myCar.name; // output "BMW"

    В приведенном выше примере это будет связано с объектом 'myCar'

  2. ФУНКЦИЯ ВЫЗЫВАЕТСЯ ТОЛЬКО С ИСПОЛЬЗОВАНИЕМ МЕТОДОВ ВЫЗОВА И ПРИМЕНЕНИЯ.

    В этом случае THIS будет привязан к объекту, который явно передан функции. 

    var obj1={"name":"bond"};
function printMessage(msg){
    return msg+" "+this.name;
}
const message=printMessage.call(obj1,"my name is ");
console.log(message); //HERE THIS WILL BE BOUND TO obj1 WHICH WE PASSED EXPLICITLY. SAME FOR APPLY METHOD ALSO.

  3. ЕСЛИ ФУНКЦИЯ ВЫЗЫВАЕТСЯ С ОБЪЕКТОМ, ПОЭТОМУ НЕОБХОДИМО, ЭТО БУДЕТ СВЯЗАНО С ЭТИМ ОБЪЕКТОМ 

    var obj1={
   "name":"bond",
    getName: function () {
                return this.name;
             }
};
const newname=obj1.getName();
console.log(newname); //HERE THIS WILL BE BOUND TO obj1(WHITCHEVER OBJECT IS MENTIONED BEFORE THE DOT THIS WILL BE BOUND TO THAT)

  4. КОГДА ФУНКЦИЯ ВЫЗВАНА БЕЗ ЛЮБОГО КОНТЕКСТА, ПОТОМ ЭТО БУДЕТ СВЯЗАНО С ГЛОБАЛЬНЫМ ОБЪЕКТОМ 

    const util = {
   name: 'Utility',
   getName: function () {
                return this.name;
};

const getName=util.getName;
const newName=getName();
console.log(newName); // IF THIS EXECUTED IN BROWSER THIS WILL BE  BOUND TO WINDOW OBJECT. IF THIS EXECUTED IN SERVER THIS WILL BE BOUND TO GLOBAL OBJECT

  5. В СТРОГО РЕЖИМЕ ЭТО БУДЕТ НЕ УКАЗАНО 

    function setName(name){
    "use strict"
    return this.name;
}
setName(); //WILL BE ERROR SAYING name IS UNDEFINED.
0 голосов
/ 21 августа 2018

Резюме this Javascript:

  • Значение this определяется , как функция вызывается не там, где она была создана!
  • Обычно значение this определяется объектом, который находится слева от точки. (window в глобальном пространстве)
  • В прослушивателях событий значение this относится к элементу DOM, для которого было вызвано событие.
  • При вызове функции с ключевым словом new значение this относится к вновь созданному объекту
  • Вы можете манипулировать значением this с помощью функций: call, apply, bind

Пример: * * тысяча двадцать-восемь let object = { prop1: function () {console.log(this);} } object.prop1(); // object is left of the dot, thus this is object const myFunction = object.prop1 // We store the function in the variable myFunction myFunction(); // Here we are in the global space // myFunction is a property on the global object // Therefore it logs the window object Пример прослушивателей событий: 

document.querySelector('.foo').addEventListener('click', function () {
  console.log(this);   // This refers to the DOM element the eventListener was invoked from
})


document.querySelector('.foo').addEventListener('click', () => {
  console.log(this);  // Tip, es6 arrow function don't have their own binding to the this v
})                    // Therefore this will log the global object
.foo:hover {
  color: red;
  cursor: pointer;
}
<div class="foo">click me</div>

Пример конструктора: 

function Person (name) {
  this.name = name;
}

const me = new Person('Willem');
// When using the new keyword the this in the constructor function will refer to the newly created object

console.log(me.name); 
// Therefore, the name property was placed on the object created with new keyword.
Страница:
...