JavaScript-this详解

每次在创建函数时，系统都会分配一个this的关键字，它链接到运行该函数的对象。换个说法就是，this对齐函数作用域是可见的，而且它是函数属性/方法所在对象的一个引用。

 

this一句话原则：

 

永远指向所在函数的所有者，如果没有所有者时，指向window。

 

理解this的要点：关键在于将函数与函数名分开看待。同一个函数，在不停的执行方法下，会有不同的效果。

理解this的几个实例：

 

1.function test() {

       alert(this);

}

 

详解：这个函数没有所有者，所以它的this指向window。

2.对象中的this指向

 

myObj.test = function(){

     alert(this == myObject);

}

myObj.test();

 

详解：输出为true,myObj.test表示test这个函数的所有者是对象myObj,因此this指向对象myObj。

 

3.绑定函数时的this（一）

 

如下代码，test1和test2中this并不相同。

 

var test2 = myObj.test1;

 

myObj.test1 = function() {
     alert(this);

}

 

详解：test2这个函数并没有所有者，虽然test2调用了test1这个函数，但是this仍然指向window，并没有指向test1的所有者myObj。

 

4.绑定函数时的this（二）

 

function fn1() {

   alert(this);

}

fn1() //   输出为window

 

var myObj  = {};

 

myObj.fn2 = fn1;

 

myObj.fn2(); // 输出myObj

 

备注：第三点和第四点就是需要把函数和函数名分开来思考。

 

5.鼠标单击等事件进行函数绑定时。

 

thisEle.onclick = function() {
     alert(this);

}

 

详解：输出thisEle,用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行。

 

6.setTimeout等传参形式的this指向

 

注意点：不要去看传的参数种函数的所有者，看执行函数的所有 var obj = {};

 

var  myObj = {};

myObj.x = 1;

myObj.y = 2;

 

window.x = 100;

window.y = 200;

 

myObj.method = function() {

     alert(this.x+this.y);

}

 

setTimeout(myObj.method,1000);   // this指向window，输出300

 

setTimeout(function() {

     myObj.method();    // this指向myObj,输出3

},1000);