Heim  >  Artikel  >  Web-Frontend  >  改变javascript函数内部this指针指向的三种方法_js面向对象

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

WBOY
WBOYOriginal
2016-05-16 18:28:531623Durchsuche

在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.
规则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,方便操作。
这里只是简单的做个演示:

代码
复制代码 代码如下:

function each(tagName, callback)
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i {
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style.color = "red";
}
);

可以看到我头部导航的链接都变成红色了。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn