Detailed explanation of this reference and custom properties in JavaScript

function fn() {
	consolo.log(this);
}
fn()

<button onclick="fn()">Click me to try</button>

function fn() {
	console.log(this)
}

<button id="btn">Click me to try</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
	console.log(this);
}

var btn = document.getElementById('btn');
btn.index = 1;

 var uli = document.querySelector('ul').querySelectorAll('li');
 var oli = document.querySelector('ol').querySelectorAll('li');

for (var i = 0; i < uli.length; i++) {          
            uli[i].addEventListener('click', function () {   
               } )
        }

  uli[i].index = i;

for (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].addEventListener('click', function () {
                for (var j = 0; j < uli.length; j++) {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                this.className = 'current';
                oli[this.index].className = 'current';
            })
        }

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            height: 250px;
            width: 300px;
            border: 2px solid;
        }
        ul {
            display: flex;
            justify-content: space-between;
            background: red;
            border-bottom: 2px #ccc;
        }
        ul li {
            float: left;
            width: 100px;
            color: #fff;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul li.current {
            border-bottom: 5px green solid;
        }
        ol li {
            margin: 30px;
            display: none;
        }
        ol li.current {
            display: block;
        }
    </style>
    <div class="box">
        <ul>
            <li class="current">First page</li>
            <li>Page 2</li>
            <li>Page 3</li>
        </ul>
        <ol>
            <li class="current">I am the first page</li>
            <li>I am the second page</li>
            <li>I am the third page</li>
        </ol>
    </div>