Кратко про this в JavaScript

10

Кратко о this

Определение функции не имеет значения для this

То, где мы определили функцию не влияет на значение this.

На this влияет то, откуда функция была вызвана

// var a = 92;
let a = 92;

var obj = {
    a: 1,
    b: 2,
    c: 3
}

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

test();
obj.test = test;
obj.test();

Сначала когда мы запустим, то получим ответ 92 и 1. Так как сначала this ссылалает на глобальный объект, а во втором случае уже на объект из которого запустился метод.

Но если мы объявим a через let, то первый ответ будет undefined. Так происходит, потому что

Переменные объявленные через let не являются частью глобального объекта

Call и Apply

Мы можем явно указать контекст выполнения функции, явно указав куда должна ссылаться this используя методы call или apply.
Call и Apply отличаются только тем, как они получают параметры.

let a = 92;

var obj = {
    a: 1,
    b: 2,
    c: 3
}

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

test.call(obj); //1
test.apply(obj); //1

Жесткая привязка

Что если нам нужно передать функцию как функцию обратного вызова (callback). И вы хотите явно указать this.

Посмотрим, почему call и apply не подойдут при таком раскладе.

var obj = {
    a:1, b:2, c:3
};

function test() {
    console.log(this.a);
    console.log(this.b);
    console.log(this.c);
}

function callMeLater(cb) {
    setTimeout(() => {
        cb();
    }, 3000);
}

callMeLater(test); //undefined
callMeLater(test.bind(obj));

Bind вернёт ссылку на функцию, где this указывает на объект, который мы указали.

Bind не вызывает функцию!

Что по поводу new?

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    console.log(this);
}

let p = new Person('John', 'Smith', 30);
console.log(p);

Мы увидим, что в консоли отображается один и тот же объект. Это еще одно правило про this. Когда мы используем ключевое слово new для создания нового объекта, внутри функции конструктора this будет указывать на вновь созданный объект, который по умолчанию из этой функции возвращается.

You might also like More from author

Leave A Reply

Your email address will not be published.