关于xxx 函数is not a function的问题

本片文章相关话题：JavaScript函数not a function问题

核心知识: this指向问题

上述话题基础请自行补脑

document.getElementById('timeTips').addEventListener('click',function (){
          var mobileCodeBtn= document.getElementById('timeTips');
          var mobile = $("#mobile").val();

          if(mobile == ''){
             return WST.msg('手机号不能为空');
          }
          var phon = /^1[3|4|5|7|8]\d{9}$/;
          $.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus){
              if (data.status == -1) {
                  return WST.msg('请使用绑定的手机');
              }else if(data.status == 1){
                  // alert(data.status);exit();
                  if ( mobile && mobile != null && phon.test(mobile)){
                      ruleCode(this,mobile,mobile+"-"+num);
                      remoeDis(this);
                  }
              }
          });
      });

• 这些代码放到浏览器执行后，肯定要报错了，错误代码如下

editPass.html:690 Uncaught TypeError: btn.setAttribute is not a function
    at removeDis (editPass.html:690)
    at Object.success (editPass.html:744)
    at j (jquery.min.js?v=1.4.1_170330_:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=1.4.1_170330_:2)
    at x (jquery.min.js?v=1.4.1_170330_:5)
    at XMLHttpRequest.b (jquery.min.js?v=1.4.1_170330_:5)

btn.setAttribute is not a function
at removeDis (editPass.html:690)
主要看这行错误，xxx is not a function就是正主了

错误原因：

• 出在这里ruleCode(this,mobile,mobile+"-"+num)函数和remove(this)中的this上

• 主要还得从这行代码入手$.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus)

接下来找到jQuery的$.post()事件源码：

Query.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {

        // Shift arguments if data argument was omitted
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }

        // The url can be an options object (which then must have .url)
        return jQuery.ajax( jQuery.extend( {
            url: url,
            type: method,
            dataType: type,
            data: data,
            success: callback
        }, jQuery.isPlainObject( url ) && url ) );
    };
} );

可以发现它返回了一个ajax对象，这就造成了this指向错误了，
解决方法是在$.post()事件之前将this指针用一个变量存放起来。改动后的代码具体如下：

document.getElementById('timeTips').addEventListener('click',function (){
          var mobileCodeBtn= document.getElementById('timeTips');
          var mobile = $("#mobile").val();
          var that = this;

          if(mobile == ''){
             return WST.msg('手机号不能为空');
          }
          var phon = /^1[3|4|5|7|8]\d{9}$/;
          $.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus){
              if (data.status == -1) {
                  return WST.msg('请使用绑定的手机');
              }else if(data.status == 1){
                  // alert(data.status);exit();
                  if ( mobile && mobile != null && phon.test(mobile)){
                      ruleCode(that,mobile,mobile+"-"+num);
                      remoeDis(that);
                  }
              }
          });
      });

• 补充一点：this是根据上下文查找当前对象(个人编程理解)

以上分享如有错误，还请各位大佬<strong>匡正、指正、斧正</strong>