Почему вывод `this` через конструктор и через `set` совсем разный?

Question

[Aleksandr_ghost_23]

Всем доброго дня.
Наткнулся на одну проблему: через set не могу установить новые значения для свойств класса.

Вот чуть поподробнее:

class Example {

	constructor() {
		this.value_1 = 10;
		this.value_2 = 20;

		console.log("Through constructor");
		console.log(`value-1: ${this.value_1}\nvalue-2: ${this.value_2}`);
	}

	set set_value(newVal) {
		console.log("\nThrough set");
		console.log(`value-1: ${this.value_1}\nvalue-2: ${this.value_2}`);

		this.value_1 = newVal;
	}

	printValue() {
		console.log(`\nThrough method`);
		console.log(`value-1: ${this.value_1}\nvalue-2: ${this.value_2}`);
	}
};

const newExample = new Example();
Example.prototype.set_value = 30;
newExample.printValue();

То есть нам нужно установить новое значение для свойства value_1 через set,
но при выводе в консоль он не видит свойства класса и при попытке установки value_1 через set не получается.

Но мне захотелось вывести сам обьект через this в самом конструктуре, и вывести через set и змаетил что они разные.

class Example {

	constructor() {
		this.value_1 = 10;
		this.value_2 = 20;

		console.log(this);
	}

	set set_value(newVal) {
		console.log(this);
	}

	printValue() {
		console.log(this.value_1, this.value_2);
	}
};

const newExample = new Example();

Example.prototype.set_value = 30;

И как мы видим: если выводим обьект через его инициализацию, то все свойства находятся на первом уровне вложенности, но его метод printValue находится в __proto__, и ещё здесь находится новое свойство value_1: 30 которое мы попытались установить через set.

Но если мы выведем this в set то увидим другую картину: this здесь совсем отличается - он не видит свойства класса, и устанавливает новое свойство value_1 в своем обьекте.

И чтобы получить это новое свойство надо обращаться по такому длинному пути:
this.constructor.prototype.value_1

Так в чём суть вопроса: почему вывод `this` через конструктор и через `set` совсем разный? И почему чтобы получить новое значение свойства которое мы установили через set надо обращаться по такому длинному пути: this.constructor.prototype.value_1 ?

Comments

[Алексей Уколов]

А зачем вы вообще что-то в прототип пытаетесь писать? Геттеры и сеттеры предназначены для работы с экзмепляром объекта, в вашем случае это newExample.

Answer 1

[Aetae]

Так работает this в javascript. Если утрировать, то this внутри функции, это то, что стоит перед точкой при вызове этой функции.
Делая так Example.prototype.set_value = 30; вы получаете this === Example.prototype и, соответственно, пишете туда значение.
Если вы хотите записать значение в newExample, пишите newExample.set_value = 30.
Всё просто.

Answer 2

[Сергей delphinpro]

Муть какая-то.

class Example {

  constructor() {
    this._myValue = 10;

    console.log("Through constructor");
    console.log(`myValue: ${this._myValue}`);
  }

  set myValue(val) {
    console.log("Through set");
    console.log(`myValue: ${this._myValue}`);

    this._myValue = val;
  }
	
	get myValue() {
	  return this._myValue;
	}

  printValue() {
    console.log(`Through method`);
    console.log(`myValue: ${this._myValue}`);
  }
};

const newExample = new Example();
newExample.myValue = 30;

console.log({newExample});