JS之this关键字
JS之this关键字
JS中this就是执行的主体(谁来执行的this就是谁)
如何确定this呢
this
这个 keyword
确实非常的让人困惑,但是其实有一个好方法可以理解.
-
检查 ' . ' 左边是谁invoke 这个函数. 例如 xiaoming.age(); age函数里面有this, 然后 '. ' 旁边是xiaoming , 那么this就是指向xiaoming了.这种叫做
Implicit Binding
. -
如果点旁边没有,那就检查有没有用到 bind, apply, call 这三种, 有的话就是调用此方法的对象. 这种叫做
explicit binding
. -
如果上面两个都没有就检查代码里面有没有用到
new
这个keyword
, 有的话那就是指向new左边的函数对象。 这种叫做new binding
-
上面三个都没有, 检查是不是有
arrow function
, 有arrow function
的话就是, 那么指向是arrow function
的lexical binding
的对象. 就是它的parent
. 这种叫做lexical binding
-
全部都没有,如果不是strict mode那就是window对象了。如果是strict那就是 error (undefined).
实例
投票的实现原理
要求:实现点击一下,加一;
有4种方式:
- 利用全局作用域不销毁的原理
- 使用闭包
- 使用自定义的属性(this)
- 使用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++;
}