Один синтаксис геттера работает, а другой нет?

Question

Почему этот синтаксис геттера работает без Object.defineProperty?

var Vector = function(x, y) {
    this.x = x;
    this.y = y;
}

Vector.prototype = {
    getX: function() {
        return this.x;
    }
}

var vector = new Vector(22, 1);
vector.x = 3;
alert(vector.getX());

И этот синтаксис геттера не работает (в JSFiddle и CodePen)?

var Vector = function(x, y) {
    this.x = x;
    this.y = y;
}

Vector.prototype = {
    get x() {
        return x;
    }
}

alert(new Vector(3, 4).x);

В чем разница между этими синтаксисами геттеров и когда я должен их использовать?

Answer 1

У вас есть 2 проблемы с последним примером:

1. Вы ссылаетесь на несуществующую переменную x: JS не работает как C++ или C# или Java, где вы просто указываете имя члена, но вы должны использовать this ссылка для решения этого. Так должно быть this.x

2. Когда вы исправите #1, появится вторая проблема: переполнение стека.

   Vector.prototype = {
       get x() {
           return this.x;
       }
   }
   

   Этот код определяет метод получения, который обращается к себе, чтобы вернуть значение. Это приводит к тому, что метод get вызывается так, что он может вызывать себя снова, бесконечно.

   Решение для этого было бы использовать разные имена для самого элемента данных и его получателя (например, this.x против this.x_)

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