JS之this关键字

Posted 2020-12-11 jiaweixie

JS之this关键字

JS中this就是执行的主体(谁来执行的this就是谁)

如何确定this呢

this这个 keyword确实非常的让人困惑,但是其实有一个好方法可以理解.

1. 检查 ‘ . ‘ 左边是谁invoke 这个函数. 例如 xiaoming.age(); age函数里面有this, 然后 ‘. ‘ 旁边是xiaoming , 那么this就是指向xiaoming了.这种叫做 Implicit Binding.

2. 如果点旁边没有,那就检查有没有用到 bind, apply, call 这三种, 有的话就是调用此方法的对象. 这种叫做 explicit binding.

3. 如果上面两个都没有就检查代码里面有没有用到new 这个keyword, 有的话那就是指向new左边的函数对象。 这种叫做new binding

4. 上面三个都没有, 检查是不是有arrow function, 有arrow function的话就是, 那么指向是arrow function的lexical binding 的对象. 就是它的parent. 这种叫做 lexical binding

5. 全部都没有,如果不是strict mode那就是window对象了。如果是strict那就是 error (undefined).

实例

投票的实现原理

要求：实现点击一下，加一；

有4种方式：

1. 利用全局作用域不销毁的原理
2. 使用闭包
3. 使用自定义的属性（this）
4. 使用innerhtml的方式

var count = 0;
oBtn.onclick = function () {
   count++;
   spanNum.innerHTML = count;
};

oBtn.onclick = (function () {
    var count = 0;
    return function () {
        count++;
        spanNum.innerHTML = count;
    }
})();
//或者写成下面的也可以
(function () {
    var count = 0;
    oBtn.onclick = function () {
        count++;
        spanNum.innerHTML = count;
    }
})();

// 推荐使用
var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
oBtn.count = 0;
oBtn.onclick = function () {
　　spanNum.innerHTML = ++this.count;
};

oBtn.onclick = function () {
    var oldNum = spanNum.innerHTML;
    //下面两个都可以
    // spanNum.innerHTML = Number(oldNum) + 1;
    spanNum.innerHTML++;
}