改变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代码
Aug 13 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
Ajax基础知识详解
Feb 17 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 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
Cannot modify header information错误解决方法
2008/10/08 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python获取url的返回信息方法
2018/12/17 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
反邪教标语
2014/06/23 职场文书
工作求职信
2014/07/04 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python