改变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 animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
JS合并两个数组的3种方法详解
Oct 24 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
example1.php
2006/10/09 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python利用opencv实现颜色检测
2021/02/23 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
学生实习自我鉴定
2013/10/11 职场文书
激励员工的口号
2014/06/16 职场文书
美术教师求职信范文
2015/03/20 职场文书
护士求职自荐信
2015/03/25 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python