改变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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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输出时间差函数代码
2013/01/28 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
javascript折半查找详解
2015/01/26 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python collections模块的使用方法
2020/10/09 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
学校个人对照检查材料
2014/08/26 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
故宫英文导游词
2015/01/31 职场文书
初二英语教学反思
2016/02/15 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电