改变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中setMonth()方法的使用详解
Jun 11 Javascript
常用jQuery代码分享
Jul 14 Javascript
浅谈js的异步执行
Oct 18 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
angular多语言配置详解
May 16 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php下将XML转换为数组
2010/01/01 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python 3.8 新功能全解
2019/07/25 Python
python 字符串常用方法汇总详解
2019/09/16 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
"序列点" 是什么
2016/07/29 面试题
如何高效率的查找一个月以内的数据
2012/04/15 面试题
办公室主任竞聘演讲稿
2014/05/15 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
python 中的jieba分词库
2021/11/23 Python
MySQL分布式恢复进阶
2022/07/23 MySQL