Контекст в JS (this)

195

14 июня 2018, 00:10

Правильно ли я понимаю, что в этом коде в 1-м варианте так как у стрелочных функций нету this она берет this у "родителя" , а во 2-м варианте this вообще нету поэтому будет ошибка?

const user = { 
  name: 'Bob', 
  city: ["Madrid", 'Rome', 'LA'], 
  printLocation: function() { 
    this.city.forEach(city => { 
      console.log(`${this.name} live in ${city}`) 
    }) 
  } 
} 
 
user.printLocation() 
 
const user2 = { 
  name: 'Bred', 
  city: ["Madrid", 'Rome', 'LA'], 
  printLocation: () => { 
    this.city.forEach(city => { 
      console.log(`${this.name} live in ${city}`) 
    }) 
  } 
} 
 
user2.printLocation()

Answer 1

а во 2м варианте this вообще нету

this есть, но в данном случае ссылается он на объект window. В стрелочных функциях, this подхватывает значение лексического контекста. Если простым словами, то значение this внутри стрелочной функции, будет таким же, как и снаружи. Однако, в ES6 появились именно методы объекта и для более короткого синтаксиса, можете использовать их:

const user = { 
  name: 'Bred', 
  city: ["Madrid", 'Rome', 'LA'], 
  printLocation() { 
    this.city.forEach(city => { 
      console.log(`${this.name} live in ${city}`); 
    }); 
  } 
}; 
user.printLocation();

Answer 2

const user = { 
  name: 'Bob', 
  city: ["Madrid", 'Rome', 'LA'], 
  printLocation: function() { 
    this.city.forEach(city => { 
      console.log(`${this.name} live in ${city}`) 
    }) 
  } 
} 
 
user.printLocation() 
 
const user2 = { 
  name: 'Bred', 
  city: ["Madrid", 'Rome', 'LA'], 
  printLocation: () => { 
    user2.city.forEach(city => { 
      console.log(`${user2.name} live in ${city}`) 
    }); 
  } 
} 
 
user2.printLocation()