深入理解Javascript中this的作用域


Posted in Javascript onAugust 12, 2014

大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的。对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变。在Javascript中this总是指向调用它所在方法的对象。

举一个简单的例子:

function test(){

alert(this);

}

var obj=function(){

var name='testObj';

}

obj.objTest=test;

test();

obj.objTest();

把这段代码放到HTML中运行这个页面,你会看到首先提示一个警告[object window],然后第二个警告。

var obj=function(){

var name='testObj';

}

我们先定义了一个test()方法,并在方法内部调用alert()方法将this显示出来,然后定义了一个obj函数对象,并给它加了一个私有的字段name,同时给它加了一个静态的方法objTest(),而这个函数则直接指向test()函数。

分别调用test()和obj.objTest()方法,第一次警告框提示的是Window对象,而第二次提示的是我们定义的obj这个函数的代码。这说明了test函数在两次执行的时候this的值是不同的!

这就说明了当调用函数的对象不同的时候,其内部的this关键字指代的对象是不同的。这里需要值得注意的是Javascript是基于对象的语言,当我们的变量或者函数定义在<script></script>标签的根下的时候其实相当于给window对象加了相应的属性或方法,所以当我们利用function test(){}代码定义一个函数的时候,其实相当于给window对象添加了一个新的函数,即window.test()函数。

我们可以做一个实验:

function test(){

alert(this);

}

alert(test===window.test);

警告框提示的将是true,这说明当我们在调用test()这个函数时相当于调用的是window.test()。所以当我们调用test()函数的时候调用这个函数的对象其实是window对象,this指代的是window对象,所以我们在alert(this)的时候弹出的警告窗口内容是[object Window]。我们将obj.objTest=test相当于把obj.objTest()指向test(),所以当我们调用obj.objTest()函数时相当于在obj调用了test()这个函数,所以现在this指代的是obj对象,提示的就是obj这个Function也就是我们看到的代码。

说到这应该也解释的差不多了,可能上面的例子太抽象,想象不出来它能在什么情况下用到,那我们现在就假设一个需求,做一个贴近实用一点的例子。

假设我们现在页面中的所有超链接在点击之后颜色要改为红色,用Javascript实现。大体的思路应该是获取页面中所有的<a>标签,然后遍历所有的<a>标签,给每一个注册一个click事件,事件触发后我们将它的color值设为red。

示例代码如下:

//改变颜色

function changeColor(){

this.style.color='#f00';

}

//初始化,给所有 a 标签注册事件

function init(){

var customLinks=document.getElementsByTagName('a');

for(i in customLinks){

//你也可以使用事件侦听器方式来注册事件

//由于要兼容IE,FF等浏览器可能需要更多代码,您可以自行编写

customLinks[i].onclick=changeColor;

}

}

window.onload=init;

将这段代码添加到HTML文档中,并在文档中添加一些超链接,当超链接点击后颜色会变成红色,这里我们定义的changeColor()函数中this关键字在点击超链接触发函数的时候它指代的是当前这个超链接。而如果你直接调用changeColor()函数浏览器会报错,提示Error: ‘this.style' is null or not an object或者undefined之类的错误。

不知道说到这能不能让正在看文章的你对Javascript中的this关键字有了一些自己的了解呢?或者你已经不耐烦了?(:P)

其实要想真正对这个问题有更深入的理解那么必须对Javascript的作用域和作用域链有深入的理解。

作用域,顾名思义就是指某一属性或方法具有访问权限的代码空间,简单的说也就是这个变量或方法它在代码中的的适用范围。在大多数的OOP中主要有public,private,protect三种作用域,对着三种作用域在这里就不详细解释了,如果有OOP的经验应该都有深入的了解。在这里我要说的是这三种作用域类型对Javascript来说几乎是毫无意义的,因为Javascript中只有一种公共作用域,在Javascript中作用域是在函数中进行维护的。举个例子:

var test1='globle variable';

function example(){

var test2='example variable';

alert(test1);

alert(test2);

}

example();

alert(test1);

alert(test2);

根据我们前面解释的,这里的test1变量相当于window的一个属性,所以它会在整个window作用域内起作用,而test2则在example()函数的内部声明,所以它的作用域也就维持在example()方法的内部,如果在函数的外部调用test2浏览器会提示出错。而在example()内部调用test1则没问题。

根据这个我们再举一个例子:

var test='globle variable';

function example(){

var test='example variable';

}

example();

alert(test);

这个例子运行会是什么结果呢?对,警告框会提示“globle variable”,因为example()函数内部的test变量其作用域只维持在内部,不会影响外部的test变量。如果我们将example()内部test变量的var关键字去掉呢?你可以自己试试。

说到这就有牵扯出另外一个概念,那就是作用域链的概念。作用域链就是可以确定变量值的路径。由上面一个例子可以看出,var关键字是用来维护作用域链的,如果变量使用了var关键字声明那么他就可以看作为作用域链的终点。同样函数的形参的定义也会起到类似的作用。

说到这你对this这个精灵古怪的家伙有了比较清晰的认识了吧?根据它简单的一个诠释,this总是指向调用它所在函数的对象,根据作用域和作用域链,我们会很清晰的确定this的真面目。临末尾再来一个开始那个例子的简单变化:

function test(){

alert(this);

}

var obj=function(){

var name='testObj';

}

obj.objTest=test;

obj.objTest2=function(){

test();

}

test();

obj.objTest();

obj.objTest2();

你猜会提示什么内容呢?你可以运行一下试试(:P);

既然this是根据调用其所在函数的对象的改变而改变的,那我们可不可以强制改变它的调用对象呢?答案是肯定的,以后的文章会介绍一下这部分内容,以及Javascript中不同类型的数据成员的实现方式,闭包等概念。

本人在学习过程中的一些经验和心得体会,写出来一是与大家分享另外也能检视自己的不足,如写的有问题还请批评指教,甚为感谢!

Javascript 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
mouse_on_title.js
Aug 25 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 #Javascript
JavaScript弹出窗口方法汇总
Aug 12 #Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 #Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 #Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 #Javascript
JavaScript中跨域调用Flash的方法
Aug 11 #Javascript
You might like
PHP中Array相关函数简介
2016/07/03 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
简单谈谈json跨域
2016/03/13 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
21行Python代码实现拼写检查器
2016/01/25 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
工程招投标邀请书
2014/01/26 职场文书
励志演讲稿300字
2014/08/21 职场文书
个人收入证明范本
2014/09/18 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
关于颐和园的导游词
2015/01/30 职场文书
社会实践活动报告
2015/02/05 职场文书
电力培训学习心得体会
2016/01/11 职场文书
深入理解python多线程编程
2021/04/18 Python
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫