案例效果：手机验证码-this指向案例

最近在使用this指向这里突然想到以前的demo有待优化的地方，特此写篇文章记录下。

实现效果

html部分：

<div class="form">
        <div class="row">
            <div class="cell cols-1">请输入手机号码</div>
            <div class="cell cols-2">
                <input type="text" class="text">
            </div>
            <div class="cell cols-1">
                <input type="button" class="btn" value="获取验证码" id="getCode">
            </div>
        </div>
    </div>

css部分

.form {
            width: 600px;
            margin: 100px auto;
        }

        .row {
            width: 100%;
            display: flex;
            border-top: 1px solid #0094ff;
            border-bottom: 1px solid #0094ff;
        }

        .cols-1 {
            flex: 1;
        }

        .cols-2 {
            flex: 2;
        }

        .cell {
            border-left: 1px solid #0094ff;
            padding: 10px 6px;
            line-height: 42px;
            text-align: center;
        }

        .cell:last-child {
            border-right: 1px solid #0094ff;
        }

        .text {
            width: 268px;
            height: 30px;
            padding: 4px;
        }

        .btn {
            height: 38px;
            width: 104px;
        }

 // 获取dom
        var btn = document.querySelector('.btn');
        btn.onclick = function () {
            var n = 5;
            btn.value = "获取验证码(5)"
            btn.disabled = true;
            var timer = setInterval(function () {
                btn.value = "获取验证码" + "(" + --n + ")";
                if (n == 0) {
                    clearInterval(timer)
                    btn.value = "获取验证码";
                    btn.disabled = false;
                }
            }, 1000)
        }

现js（带this指向）

//this
        var btn = document.querySelector('.btn');
        btn.onclick = function () {
            var n = 5;
            this.value = "获取验证码(5)"
            this.disabled = true;
            var timer = setInterval(function () {
                btn.value = "获取验证码" + "(" + --n + ")";
                if (n == 0) {
                    clearInterval(timer)
                    this.value = "获取验证码";
                    this.disabled = false;
                }
            }.bind(this), 1000)
        }

---

至此呢，这个案例已经完成了this指向代替写死btn的方式，案例虽结束，我觉得有必要再次介绍一个this的指向问题，因为这个this，确实在工作中太重要了。

• this的指向
  • 1.普通函数--------------window
  • 2.对象函数--------------该方法所属的对象
  • 3.构造函数--------------new出来的实例对象
  • 4.绑定事件函数--------事件源，绑定时间对象
  • 5.定时器函数-----------window
  • 6.立即执行函数（自调用函数）------window
• 改变指向
  • 1.call（this，m，n…………）---------------调用函数
    • 参数：参数使用，逗号分隔开
    • 应用于父子继承上面
  • 2.apply（this，[m，n…………]） ------------调用函数
    • 参数：参数使用[] 数组包含上
    • 应用：常常跟数组有关系，例如：借助Math种的最大值，最小值，求出数组中的最大值，最小值
  • 3.bind（this，m，n…………）
    • 参数：参数使用，逗号分隔开
    • 应用：不调用函数，并且还想改变this的指向

大概介绍就说到这里吧，有疑问的以及有好的想法的欢迎大家前来评论