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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
Python机器学习之决策树和随机森林
Jul 15 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
PHP5 安装方法
2006/10/09 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python实现图像拼接功能
2020/03/23 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
接口可以包含哪些成员
2012/09/30 面试题
企业厂长岗位职责
2013/12/17 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
网吧消防安全制度
2014/01/28 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
情况说明书格式及范文
2019/06/24 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
vue 实现上传组件
2021/05/31 Vue.js