【JS提升】重新探究this指向问题

一、重新探究this指向问题

（1）示例1

<button id="btn">点击</button>

<script>
    var oBtn = document.getElementById('btn');

    oBtn.onclick = function () {
        console.log(this); // 谁绑定事件处理函数，函数内部的this就指向谁
        this.innerHTML = '加载中...';
        this.disabled = true;

        var _self = this;

        setTimeout(function () {
            // this -> window
            _self.innerHTML = '点击';
            _self.disabled = false;
        }, 2000);

        // 或

        // setTimeout(function () {
        //     this.innerHTML = '点击';
        //     this.disabled = false;
        // }.bind(this), 2000);

    }
</script>

（2）示例2

<script>
    function Test() {
        this.oBtn = document.getElementById('btn');
        this.a = 0;
        this.init();
    }
    Test.prototype.init = function () {
        this.bindEvent();
    }
    Test.prototype.bindEvent = function () {
        var _self = this;
        this.oBtn.addEventListener('click', function () {
            _self.btnClick();
        }, false);
        // 或
        // this.oBtn.addEventListener('click', this.btnClick.bind(this), false);
    }
    Test.prototype.btnClick = function () {
        this.a++;
        console.log(this.a);
    }
    new Test();
</script>

（3）call/apply/bind的区别：

1. call/apply 改变this指向 并且立即执行，
   call(context, 原函数的参数们依次排列)，
   apply(context, 原函数的参数集合 用数组装载)
2. bind 改变this指向 并返回一个新函数
   写法同call