Для чего еще используется ключевое слово this?

13 мая 2021, 23:20

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

function User(argname,argage){
    this.name = argname;         //  c помощью this обращаемся к свойству name объекта vasya        
    this.age = argage;        
}   
var vasya = new User("Вася",20);
//новосозданный обьект
var vasya ={
name = "Вася",             
age = 20;
}

Тут все просто и понятно. Но как говорит документация this также может иметь другое значение в зависимости от контекста. Я гуглил но когда начал читать другие варианты использования (его значение), чем больше я читал тем больше я запутивался, возможно мне нужно что б кто-то просто человеческим языком объяснил без воды.

Пример из жизни:

Бейсбольная бита используется для: 1) игры в бейсбол 2) как элемент самозащиты 3) как выбивалка для ковров (допустим такой вариант=)) ... и т.д.

Хочу что б так же вы мне объяснили по ключевому слову this, какое еще его использование в зависимости от контекста:

Ключевое слово this используется(его значение): 1) для того чтобы можно было обратиться к новосозданному объекту в функции-конструкторе. ... // я привел пример выше

2) ..... // вариант использования ..... // пример маленького и просто кода

3) ..... // вариант использования ..... // пример маленького и просто кода

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

Answer 1

Начнем:

this используется для того чтобы получить доступ к текущему объекту.

Пример:

console.log(this);

Что мы получаем ? Ответ:Объект window со всеми его свойствами.

То есть он указывает на глобальный объект window.

Второй пример:

const team = {
    name:'Groot',
 }

У нас есть объект team и нам нужно внутри этого объекта получить доступ к имени персонажа. Как мы делаем это

const team = {
    name:'Groot',
    showTeam(){
        console.log(this.name);
    }
}
team.showTeam(); // //Groot

У тебя может возникнуть вопрос этот пример мы можем так же написать без this какая между ними разница :

const team = {
    name:'Groot',
    showTeam(){
        console.log(team.name);
    }
 }
team.showTeam(); // //Groot

Разница следующая если ты на основе первого объекта team создашь новый объект z он будет ссылаться на основной (team) объект.Вот так:

const team = {
    name:'Groot',
    showTeam(){
        console.log(team.name);
    }
 }
const z = Object.create(team);
z.name = "z";
z.showTeam(); // Groot

Получили Groot - а: А если бы был this вместо team вот так console.log(this.name); Получили бы проста строку z так как и должно было быть.

Пример третий добавляем стражу в список:

У нас есть такой код.

const team = {
    prefix:"Guardian Of galaxy",
    list:["Guill","Gamora","Drax","Groot"],
}

И мы хотим внутри объекта получить доступ ко всему списку используем всем известный forEach

    const team = {
       prefix:"Guardian Of galaxy",
       list:["Guill","Gamora","Drax","Groot"],
       showTeam(){
           this.list.forEach(function(heroe){
              console.log(heroe);
           })
       }
    }
    team.showTeam(); // Guill, Gamor ,Drax ,Groot

И получаем всех героев.Но что если мы захотим туда добавить наш префикс чтобы было вот так: Guardian Of galaxy Guill

Для этого делаем так

const team = {
    prefix:"Guardian Of galaxy",
    list:["Guill","Gamora","Drax","Groot"],
    showTeam(){
        this.list.forEach(function(heroe){
            console.log(this.prefix + " " + heroe);
        })
    }
}
team.showTeam(); // undefined Guill, undefined Gamor ,undefined Drax ,undefined Groot

Мы получили undefined Guill почему?Потому что это функция не метод объекта и он ссылается на глобальный объект window.

Но как это исправить?

К счастью у forEach есть второй необязательный параметр this.Связываем this с текущим объектом и все.

const team = {
    prefix:"Guardian Of galaxy",
    list:["Guill","Gamora","Drax","Groot"],
    showTeam(){
        this.list.forEach(function(heroe){
            console.log(this.prefix + " " + heroe);
        },this )
    }
}
team.showTeam(); // Guardian Of galaxy Guill, Guardian Of galaxy Gamora , Guardian Of galaxy Drax  , Guardian Of galaxy Groot