this

你以为 你以为的 只是你以为的

javascript 中 this 指当前行为执行的主体
context 代表的是当前行为执行的环境(区域)

  1. 全局中的 this 就是 window
  2. 函数中的 this 要看函数执行的时候前面有没有点,如果前面有点, 点前面是谁this就是谁, 如果没有点, 就是window
    函数中的 this 和函数在哪里执行 在哪里定义没有任何关系 只看执行的时候
  3. 自执行函数里面的 this 永远是 window 
  4. 给元素绑定事件, 事件触发的时候, 里面的 this 就是当前绑定事件的元素 
  5. 定时器中的 this 也是window

投票实例

  1. 利用全局作用域不销毁的原理

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

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

  2. 自己形成一个不销毁的私有的作用域来保存我们需要累加的数字

    ~function () {
        var count = 0;
        oBtn.onclick = function () {
            count++;
            spanNum.innerHTML = count;
        };
    }();
    
    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;
    }