this练习

this练习

<div class="box">
<h2>是小仙女的就点击</h2>
<div id="btn">我非常赞同<span id="spanNum">0</span></div>
</div>

错误方法
var obtn=document.getElementById("btn");
var spanNum=document.getElementById("spanNum");

obtn.onclick=function(){
var count=0;
count++;
spanNum.innerHTML=count;
};
>>从0-1，之后不会变成2

方法一

1、利用全局作用域不销毁的原理，把需要累加的数字定义为全局的变量

方法一
var count=0;
obtn.onclick=function(){
count++;
spanNum.innerHTML=count;
};

弊端：在项目中为了防止全局变量之间的冲突，我们一般禁止或者减少使用全局变量的

方法二

方法二1.0
~function(){
var count=0;
obtn.onclick=function(){
count++;
spanNum.innerHTML=count;
};
}();

方法二2.0
obtn.onclick=(function(){
var count=0;
return function(){
count++;
spanNum.innerHTML=count;
}
})();

弊端：有一个不销毁的私有作用域，所以占那么一丢丢的内存

方法三

3、利用innerHTML的方式处理：每一次点击的时候都先到页面中获取最新的值，任何累加，最后把累加的结果重新放回去

方法三
obtn.onclick=function(){
// spanNum.innerHTML获取页面的内容返回的是一个字符串
//spanNum.innerHTML=spanNum.innerHTML+1;
spanNum.innerHTML++;
};

弊端：每一次都需要把页面中的内容转化为字符串，任何再累加，累加完再重新添加回去，重新添加的时候，浏览器都要重新渲染

方法四

4、利用自定义属性存储（推荐）

方法四
obtn.count=0;
obtn.onclick=function(){
spanNum.innerHTML=++this.count;
};