改变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 相关文章推荐
通过url查找a元素应用案例
Apr 29 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
vue项目中自定义video视频控制条的实现代码
Apr 26 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长字符串定义方法
2012/07/12 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
医药营销个人求职信范文
2014/02/07 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
春季运动会开幕词
2015/01/28 职场文书
英文导游词
2015/02/13 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android