JS中的this变量的使用介绍


Posted in Javascript onOctober 21, 2013

JavaScript中this的使用

在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。

对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象。

示例一、

var obj = {}; obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100

这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。

示例二、

var checkThis = function(){ alert( this.x); 
}; 
var x = 'this is a property of window'; 
var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100 
checkThis(); //弹出 'this is a property of window'

这里为什么会弹出 'this is a property of window',可能有些让人迷惑。在JavaScript的变量作用域里有一条规则“全局变量都是window对象的属性”。当执行checkThis() 时相当于window.checkThis(),因此,此时checkThis函数体内的this关键字的指向变成了window对象,而又因为window对象又一个x属性('thisis a property of window'),所以会弹出 'thisis a property of window'。

上面的两个示例都是比较容易理解的,因为只要判断出当前函数是作为哪个对象的方法调用(被哪个对象调用)的,就可以很容易的判断出当前this变量的指向。

this.x 与apply()、call()

通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。

示例三:call()

function changeStyle( type , value ){ this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.call( one , 'fontSize' , '100px' ); 
changeStyle('fontSize' , '300px'); //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。

注意changeStyle.call()中有三个参数,第一个参数用于指定该函数将被哪个对象所调用。这里指定了one,也就意味着,changeStyle函数将被one调用,因此函数体内this指向是one对象。而第二个和第三个参数对应的是changeStyle函数里的type和value两个形参。最总我们看到的效果是Dom元素one的字体变成了20px。

示例四:apply()

function changeStyle( type , value ){ this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.apply( one , ['fontSize' , '100px' ]); 
changeStyle('fontSize' , '300px'); //出现错误,原因同示例三

apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。

无意义(诡异)的this用处

示例五:

var obj = { x : 100, 
y : function(){ 
setTimeout( 
function(){ alert(this.x); } //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined 
, 2000); 
} 
}; 
obj.y();

如何达到预期的效果
var obj = { x : 100, 
y : function(){ 
var that = this; 
setTimeout( 
function(){ alert(that.x); } 
, 2000); 
} 
}; 
obj.y(); //弹出100

事件监听函数中的this
var one = document.getElementByIdx( 'one' ); one.onclick = function(){ 
alert( this.innerHTML ); //this指向的是one元素,这点十分简单.. 
};

注意:js中的全局变量都会动态添加到Window 的实例 window,作为其属性。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

1、纯粹函数调用。

function test() { 
this.x = 1; 
alert(x); 
} 
test();

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。
var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0

2、作为方法调用,那么this就是指这个上级对象。
function test() { 
alert(this.x); 
} var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1

3、作为构造函数调用。所谓构造函数,就是生成一个新的对象。这时,这个this就是指这个对象。
function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1

4、apply调用

this指向的是apply中的第一个参数。

var x = 0; 
function test() { 
alert(this.x); 
} var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1

当apply没有参数时,表示为全局对象。所以值为0。
Javascript 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 #Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 #Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 #Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 #Javascript
You might like
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
聊聊Python中的pypy
2018/01/12 Python
python中正则表达式的使用方法
2018/02/25 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
学python最电脑配置有要求么
2020/07/05 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
前台接待员岗位职责
2014/01/02 职场文书
减负增效提质方案
2014/05/23 职场文书
校本教研活动总结
2014/07/01 职场文书
技术经济专业求职信
2014/09/03 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
交警失职检讨书
2015/01/26 职场文书
幼儿教师个人总结
2015/02/05 职场文书
世界文化遗产导游词
2015/02/13 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Python实战之实现简易的学生选课系统
2021/05/25 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server