What does "With a regular function 'this' represents the object that calls the function" mean?

In the explanation of arrow functions, w3schools says, "In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever" and "With a regular function this represents the object that calls the function". Link: https://www.w3schools.com/js/js_arrow_function.asp

I'm trying to understand this sentence, not in relation to arrow functions but by itself. It seems that many other sources I found on the net contradict to this, saying that when a function gets called on its own (not as a method), 'this' gets bound to either the toplevel object (e.g. window) or undefined, depending on strict mode.

So I built a simple example (running non-strict in the browser). I did not want to use the examples from the w3schools site because they use event handlers for explanation, and I want to make sure that I avoid any additional binding logic that event handlers introduce.

<script type="text/javascript">

function foo() {
    console.log('foo on ' + this.prop);
}

function bar() {
    console.log('bar on ' + this.prop);
    var f = this.foo;
    f();
}

var x = {
    prop: 'x'
};
window.prop = 'w';

x.foo = foo;
x.bar = bar;
x.bar();

</script>

This logs: "bar on x" and "foo on w", which seems to indicate that in foo, this refers to the window. So obviously the w3schools explanation does NOT refer to an automatic binding of foo's this to bar's this when foo gets called inside bar. But what else does it mean?