改变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 继承的实现
Jul 09 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
js实现电灯开关效果
Jan 19 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
零基础php编程好学吗
2019/10/11 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
vue.js的安装方法
2017/05/12 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python判断两个对象相等的原理
2017/12/12 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python如何提升爬虫效率
2020/09/27 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
文秘个人求职信范文
2014/04/22 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
七年级作文之秋游
2019/10/21 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android