改变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中获取选中对象的类型
Apr 02 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
Bootstrap基础学习
2015/06/16 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python类如何定义私有变量
2020/02/03 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
职业生涯规划书范文
2014/03/10 职场文书
妇女干部培训方案
2014/05/12 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书