改变 javascript 函数 内部 this 指针 指向 的三种方法

改变 javascript 函数 内部 this 指针 指向 的三种方法

javascript 的this 值,真的是非常的莫名奇妙。我一直被搞的很头晕,也许正是这个this,让大多数人感觉js 非常的莫名其妙。

在查了大量的资料后,我总结了

 

下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题

 

规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量。

function a()

{

    alert(this);

}

 

或者 var a = function()

{

    alert(this);

}

都可以认为是创建了一个变量,这个变量的值就是一个函数。

 

规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象。

这个规则很好理解:

 

var a = function(obj)

{

    alert(this == obj);

}

 

var o = {};

o.afun = a;

o.afun(o); //true

 

函数就是一个变量,但是可以绑定到某个对象的下面,并且 this 就会指向 o 对象。

这里必须要注意,没有被绑定的对象,默认this 指向window 对象。

举几个例子:

function a()

{

    //this == window

}

 

function a()

{

    //this == window

     function b()

     {

          //this == window

     }

}

还必须注意的是,绑定没有传递性,比如上面的嵌套的函数,a绑定到 o 对象,那么就影响了a函数,

而b 还是指向到window。

 

规则2:如果函数new 了一下,那么就会创建一个对象,并且this 指向 新创建的对象。

 

var o = new a();

这个时候,o 不再是个函数,而实际上,可以认为是这样的一个过程。

创建一个对象 var o = {};

然后,把this 指向 o,通过this 把 o 给初始化了。

 

规则3:通过apply 可以改变this 的指向

 

这个apply 的绑定就更加的灵活了,实际上,apply的功能和下面的功能差不多。

var a = function (obj)

{

    alert(this == obj);

};

obj.fun = a;

obj.fun(obj);//true

简单的,可以a.apply(obj, [obj]); // true

 

javascript 的this 可以简单的认为是 后期绑定,没有地方绑定的时候,默认绑定window。

 

综合实例:

jquery 里面有一个很常用的函数 each,可以把循环的对象元素绑定到this,方便操作。

这里只是简单的做个演示:

 

ExpandedBlockStart.gif 代码
function  each(tagName,  callback)
{
    
var  lists  =  document.getElementsByTagName(tagName);

    
for  ( var  i  =   0 ; i  <  lists.length; i ++ )
    {
        callback.apply(lists[i]);
    }
}

each(
" a " ,
    
function  ()
    {
        
this .style.color  =   " red " ;
    }
);

 


可以看到我头部导航的链接都变成红色了。

posted @ 2010-04-23 00:21 暮夏 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:(改变 javascript 函数 内部 this 指针 指向 的三种方法)