改变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 相关文章推荐
require.js深入了解 require.js特性介绍
Sep 04 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
神经网络相关之基础概念的讲解
2018/12/29 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
会计岗位职责
2013/11/08 职场文书
学校万圣节活动方案
2014/02/13 职场文书
求职信的正确写法
2014/07/10 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
个人简历求职信范文
2015/03/20 职场文书
2016年教师新年寄语
2015/08/18 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Python使用Web框架Flask开发项目
2022/06/01 Python