javascript中this的指向

Author Avatar
Nico Zhang 1月 24, 2018
  • 在其它设备中阅读本文章

this的指向只有在函数执行的时候才能确定,实际上this的最终指向就是那个调用它的对象

普通函数调用

在这段代码中f1函数作为普通函数调用,实际上fn1是作为全局对象window的一个方法来进行调用的,即window.f1();
所以这个地方是window对象调用了fn1方法,那么fn1函数当中的this即指window,同时window还拥有了另外一个属性a,值为’jack’

var a="jack";
function fn1(){
   console.log(this);
   console.log(this.a)
}

 f1();  //输出  window     'jack'

函数嵌套产生的内部函数的this不是其父函数,仍然是全局对象window

function fn1(){
    function fn2(){
        console.log(this);
    }
    fn2();
}

fn1();     //window

作为对象方法调用

函数b作为对象obj的方法调用,所以的this指向obj

var obj={
     var a='jack';
     b:function(){
            console.log(this.a);
        }
    }

  obj.b();     //'jack'

将obj.b方法赋给全局变量c,也就相当于执行的是window.c(),所以this指向window。

var a='frank'
var obj={
     a:'jack',
     b:function(){
            console.log(this.a);
        }
    }
 var c= obj.b;   
 c()                    //    'frank''

作为构造函数来调用

构造函数中的this,指的是实例对象。

var obj = function (p) {
  this.p = p;
};
var o = new obj('Hello');
o.p         // "Hello"

DOM对象绑定事件

在事件处理程序中this代表事件源DOM对象

document.addEventListener('click', function(e){
    console.log(this);    //document
    var _document = this;
    setTimeout(function(){
        console.log(this);        //window
        console.log(_document);        //document
    }, 200);
}, false);

call、apply、bind改变函数中this的指向

查看链接