改变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 相关文章推荐
JS关键字变色实现思路及代码
Feb 21 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python3远程监控程序的实现方法
2019/07/15 Python
基于python代码批量处理图片resize
2020/06/04 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
开业典礼主持词
2014/03/21 职场文书
就业协议书范本
2014/04/11 职场文书
2014财务年终工作总结
2014/12/08 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
城南旧事观后感
2015/06/11 职场文书
女性健康讲座主持词
2015/07/04 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
学生检讨书范文
2019/06/24 职场文书