页面中this的用法和数据解析

101 阅读2分钟
原文链接: www.shsxt.com
this的用法
(1)dom0事件中:谁调用了函数,this就是谁;
   例:<div>哈哈</div>
       var div = document.querySelector('div');
        div.onclick = function(){
                console.log(this);
        }
(2)HTML事件中:指向window对象;
   例:<div onclick='func()'>哈哈</div>
          function func(){
                console.log(this);
          }
(3)dom2事件中:非IE下,谁调用函数this指向谁;
                                IE下,指向window对象;
    例:非IE下:
                     <div>哈哈</div>
                    div.addEventListenter('click',function (){
                            console.log(this);
                    })
        IE下:
                 div.addEventListenter('onclick',function         (){
                         console.log(this);
                })
(4)间隔调用和延迟调用:指向window对象;
    例:<div>哈哈</div>
        var div = document.querySelector('div');
        var timer = null;
        timer = setInterval(function(){
               console.log(this);
        },1000)
(5)call和apply中:第一个参数是谁this就是谁;
    例:var username = 'quanJuBianLiang';
           var obj1 = {
                 username:'obj1Name',
                 getName:function (x,y) {
                        console.log(this.username);
                        console.log(x);
                        console.log(y);
                 }
             };
         var obj2 = {username:'obj2Name'};
         function getName(x,y) {
                 console.log('--一次输出--');
                 console.log('this:'+this);
                 console.log('this.username:'+this.username);
                 console.log('参数x:'+x);
                 console.log('参数y:'+y);
             }
       getName.call(null,'call1','call2');
       getName.apply(obj2,['apply1','apply2']);
       getName.apply(obj2,['apply3','apply4']);


(6)闭包:指向window对象;
    例:var num = 8;
          function func(){
                var num = 88;
                return function(){
                        console.log(this);
                }
          }
(7)自执行函数:指向widow对象;
    例:var num = 2;
           (function(){
                 var num = 4;
                 console.log(this.num);//2
                 console.log(num);//4
        })();