改变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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
VUE项目初建和常见问题总结
Sep 12 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php限制ip地址范围的方法
2015/03/31 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python中with用法讲解
2020/02/07 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
超级搞笑检讨书
2014/01/15 职场文书
期末自我鉴定
2014/02/02 职场文书
保安岗位职责
2014/02/21 职场文书
房屋租赁意向书
2014/04/01 职场文书
《搭石》教学反思
2014/04/07 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript