Understanding ExtJs Class properties

Question

I try to understand how properties works in ExtJs class. Refer to below code:

Ext.define('My.sample.Person', {
    name: 'Unknown',
    food: undefined,
    foodList: [],
    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        console.log(this.name + " is eating: " + foodType);
        this.food = foodType;
        this.foodList.push(foodType);
        //this.foodList = [foodType]
    },
    
    showFood:function() {
         console.log(this.name);
        console.log(this.food);
    },
    
     showFoodList:function() {
         console.log(this.name);
        console.log(this.foodList);
    }
});

var bob = Ext.create('My.sample.Person', 'Bob');
bob.eat("Salad"); 
bob.showFood(); 
bob.showFoodList(); 
console.log(bob)
var alan = Ext.create('My.sample.Person', 'alan');
console.log(alan)
alan.showFood();
alan.showFoodList(); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>

If you check the result of "alan", the food = undefined and foodList = ['salad'] because somehow foodList was assigned to prototype.

---

Meanwhile, if you do like this, then it will behave normally like it should. Any idea why? What is the concept behind?

Result: