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


Posted in Javascript onApril 23, 2010

在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.
规则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"; 
} 
);

可以看到我头部导航的链接都变成红色了。
Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 #Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 #Javascript
js 文件引入实现代码
Apr 23 #Javascript
网页图片延时加载的js代码
Apr 22 #Javascript
基于jQuery的表格操作插件
Apr 22 #Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 #Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php的curl封装类用法实例
2014/11/07 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python计算auc指标实例
2017/07/13 Python
Python中dict和set的用法讲解
2019/03/28 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
电脑教师的自我评价
2013/12/18 职场文书
会计学生自我鉴定
2014/02/06 职场文书
法人委托书范本
2014/09/15 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js