改变javascript函数内部this指针指向的三种方法
更新时间：2010年04月23日 19:06:55 作者：
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，方便操作。
这里只是简单的做个演示：
代码
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";
}
);
可以看到我头部导航的链接都变成红色了。
规则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 < lists.length; i++)
{
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style.color = "red";
}
);
可以看到我头部导航的链接都变成红色了。
相关文章
几乎每个开发人员都有面向对象语言（比如C++、C#、Java）的开发经验。 在传统面向对象的语言中，有两个非常重要的概念 - 类和实例。2009-07-07
项目中需要比较两个对象是否相等，给Object对象开展了（别紧张，别说我把它污染了），一个实现而已，象java一样可以只给自己想要的类重写equals方法。2011-02-02
在上一遍我们简单的介绍了怎么样使用JavaScript进行构造函数的书写，现在来认识下JavaScript的构造函数其原理，主要是关注与原型的概念，首先看如下代码。2010-06-06
这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。2011-08-08
接口是面向对象Javascript工具箱中最有用的特性之一。我们都知道GOF在设计模式中说到：面向接口编程，而非面向实现编程2012-01-01
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
AppBaseJs类库。一个借鉴了网上常用的函数及其他js类库写的,方便大家的调用。2010-03-03
接口的实现，从而使不同子类可以被同等的对待,恰当的使用工厂模式,但不要拘泥与形式,理解本质。2010-04-04
在Javascript面向对象设计一——工厂模式 中介绍了使用CreateEmployee（）函数创建员工类。ECMAScript中的构造函数可以用来创建特定类型的对象，如Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中，此外也可以创建自定义的构造函数，从而创建自定义对象类型的属性和方法2011-12-12
这里的面向对象主要是使用prototype属性，大家可以参考下。2009-12-12
这里通过JS字符串替换、随机数运算实现混淆JS代码,达到降低代码可读性,以保护代码的目的,需要的朋友可以参考一下2007-12-12
最新评论