改变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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
js 处理URL实用技巧
Nov 23 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
JavaScript获取URL参数的方法分享
Apr 07 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python单元和文档测试实例详解
2019/04/11 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
小学英语教学反思
2014/01/30 职场文书
党务公开方案
2014/05/06 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
认错检讨书
2014/10/02 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
实习介绍信模板
2015/01/30 职场文书
小学生读书笔记范文
2015/06/30 职场文书