Правильно ли я понимаю функцию(предназначение) слова this в даном примере?

Question

[75db77]

Есть такой код:

module.exports = function Cart(oldCart) {
    this.items = oldCart.items || {};                
    this.totalQty = oldCart.totalQty || 0;           
    this.totalPrice = oldCart.totalPrice || 0;

    this.add = function(item, id) {
        var storedItem = this.items[id];
        if (!storedItem) {
            storedItem = this.items[id] = {item: item, qty: 0, price: 0};
        }
        storedItem.qty++;
        storedItem.price = storedItem.item.price * storedItem.qty;
        this.totalQty++;
        this.totalPrice += storedItem.item.price;
    };

 this.reduceByOne = function(id) {              
        this.items[id].qty--;
        this.items[id].price -= this.items[id].item.price;
        this.totalQty--;
        this.totalPrice -= this.items[id].item.price;

        if (this.items[id].qty <= 0) {
            delete this.items[id];
        }
    };

Насколько я понял ключевое слово this служит для того что б обратиться к новосозданному обьекту.
Тоесть если взять только эти строки:
this.items = oldCart.items || {};
this.totalQty = oldCart.totalQty || 0;
this.totalPrice = oldCart.totalPrice || 0;

то новосозданный обьект выглядит вот так:

var Cart = {
    items = oldCart.items || {},               
    totalQty = oldCart.totalQty || 0,           
    totalPrice = oldCart.totalPrice || 0
}

Или здесь другая функция(предназначение) слова this? И оно не служит для того что б обратиться к новосозданному обьекту?

А вот дальше такой код идет:
this.add = function(item, id)
и еще онда функция:
this.reduceByOne = function(id)
Какая функция(предназначение) у этих this?
Вот тут я совсем не понимаю для чего this.

Answer 1

[Алексей П]

привет.
если говорить коротко, да и про JS, то ты на верном пути.
ключевое слово `this` указывает на контекст исполнения функции, соответственно контекст можно менять.
к явным методам изменения контектса относят методы: `bind`, `call`, `apply`, к неявным - оператор "точка" (`obj.getName()`), ключевое слово `new` и другие случаи.

те 2 сниппета, что ты указал с примерами `Сart` не равнозначны, хоть занимаются, примерно, одним и тем же.

разберем пример неявного случая с оператором "точка":

/**
 * какая-то функция, которая возвращает поле объекта name
 * @returns {String}
 */
function getName () {
  return this.name ? this.name : null;
}

var obj1 = {
  name: 'name1',
  getName: getName
}

var obj2 = {
  name: 'name2',
  getName: getName
}

// в данном случае, getName смотрит на obj1#name
console.log(obj1.getName()) // name1

// в данном случае, getName смотрит на obj2#name
console.log(obj2.getName()) // name2

советую, ознакомиться с методами задания контекста исполнения функции в книге `Reliable JavaScript: How to Code Safely in the World's Most Dangerous Language`, там достаточно наглядно описано.

если лень читать книгу, то посмотри эти 2 раздела: learn.javascript.ru/functions-closures и learn.javascript.ru/objects-more

Comments

[75db77]

Привет.Спасибо
А для чего нужны эти два this? обращение к новосозданным объектам или другая какая-то функция у них?
this.add = function(item, id)
и еще онда функция:
this.reduceByOne = function(id)

[Алексей П]

75db77,
если коротко:
this используется, чтобы обогатить this реализацией методов add и reduceByOne.

если долго:
давай начнем с того, что "эти два this" - это одна ссылка this на контекст, в данном случае, используется для объявления методов внутри контекста.

рассмотрим еще 1 пример:

// есть какая-то функция Person, которая возвращает свой контекст
// назовем эту функцию конструктором Person

/**
 * возвращает объект
 * @param {String} personName - имя, переданное в фунцию
 * @returns {Object}
 */
function Person (personName) {
  // инициализируем свойсво контекста name, полученным параметром
  this.name = personName;

  // сохраним ссылку на контекст этой функции в переменной,
  // т.к. внутри другой функции будет другой контектс
  var that = this;

  // объявляем метод внутри контекста, который вернет нам name
  this.getName = function getName () {
    // здесь нам доступна переменная that за счет замыкания
    return that.name;
  };
  
  // возвращаем контекст
  return this;
}

var obj1 = Person('name1');

var obj2 = Person('name2');

console.log(obj1.getName()); // name2

console.log(obj2.getName()); // name2

Почему такой вывод? Потому что функция была объявлена 1 раз и был создан только 1 контекст. Отсюда следует, что нужен какой-то механизм, который позволит "обновлять" контекст. Тут и пригодится оператор new.
Дополним наш пример.

var obj3 = new Person('name3');

var obj4 = new Person('name4'); 

console.log(obj3.getName()); // name3

console.log(obj4.getName()); // name4

Суть примера в том, что с this мы работаем так, как если бы мы работали с литералом объекта. Можно добавлять методы и поля, переопределять их и т.д. Главное, не потерять контекст исполнения функции, т.к. с this можно лекго ошибиться.

https://jsbin.com/sizilanaso/edit?js,console - ссылка на пример, советую поменять console.log'и местами и посмотреть на результат.