深入解析JavaScript编程中的this关键字使用


Posted in Javascript onNovember 09, 2015

JavaScript 里的 this 到底指得是什么?很多人都会告诉你 this 指的是当前对象。这样理解对么?在大多数情况下确实没错。比如我们经常会在网页上写这样的 JavaScript:

<input type="submit" value="提交" onclick="this.value='正在提交数据'" />

这里的this显然指的是当前对象,即这个提交按钮。通常,我们使用this的情况都与此类似。但是有什么情况不是这样的呢?

大家看看这个例子:

var foo = function() {
  console.log(this);
}
foo();
new foo();

 

比较一下 foo() 和 new foo() 的运行结果,你会发现,前者 this 指向的并非 foo 本身,而是当前页面的window对象,而后者才真正的指向foo。这是为什么呢?

其实这牵涉到JavaScript的一条重要特性,就是所谓的“闭包”。闭包这个概念说复杂也不复杂,但也不是简单到能用一两句话说清。偶会在以后的文章中深入探讨这个Javascript 最重要的特性。现在,我要告诉大家的是,因为闭包的存在,JavaScript中的作用域变得相当重要。

所谓的作用域,简单的说,就是创建一个函数时在什么环境下创建的。而this变量的值,如果没有指定的话,就是函数当前的作用域。

在前面的例子里,foo() 函数是在全局作用域(这里就是window对象),所以this的值是当前的window对象。而通过 new foo() 这样的形式,其实是创建了一个foo()的副本,并在这个副本上进行的操作,所以这里的this就是foo()的这个副本。

这样讲可能有点抽象,大家来看个实际的例子:

<input type="button" id="aButton" value="demo" onclick="" />
<script type="text/javascript">
function demo() {
  this.value = Math.random();
}
</script>

 

如果直接调用demo() 函数,程序就会报错,因为demo函数是在window对象中定义的,所以demo的拥有者(作用域)是window,demo的this也是window。而window是没有value属性的,所以就报错了。

深入解析JavaScript编程中的this关键字使用

如果我们通过创建副本的方式,将这个函数的副本添加到一个HTML元素,那么他的所有者就成了这个元素,this也指代了这个元素:

document.getElementById("aButton").onclick = demo;

这样就将aButton的onlick属性设置为demo()的一个副本,this也指向了aButton。

深入解析JavaScript编程中的this关键字使用

你甚至可以为多个不同的HTML元素创建不同的函数副本。每个副本的拥有者都是相对应的HTML元素,各自的this也都指向他们的拥有者,不会造成混乱。

深入解析JavaScript编程中的this关键字使用

但是,如果你这样定义某个元素的onlick事件:

<input type="button" id="aButton" value="demo" onclick="demo()" />

 

点击这个button之后,你会发现,程序又会报错了——this又指向了window!

其实,这种方法并没有为程序创建一个函数,而只是引用了这个函数。

具体看一下区别吧。

使用创建函数副本的方法:

<input type="button" id="aButton" value="demo" />
<script type="text/javascript">
var button = document.getElementById("aButton");
function demo() {
  this.value = Math.random();
}
button.onclick= demo;
alert(button.onclick);
</script>

得到的输出是:

function demo() {
  this.value = Math.random();
}

 使用函数引用的方法:

<input type="button" id="aButton" value="demo" onclick="demo()" />
<script type="text/javascript">
var button = document.getElementById("aButton");
function demo() {
  this.value = Math.random();
}
alert(button.onclick);
</script>

得到的输出是:

function onclick() {
  demo();
}

这样就能看出区别了吧。函数引用的方式中,onclick事件只是直接调用demo()函数,而demo()函数的作用域仍旧是window对象,所以this仍然指向window。

深入解析JavaScript编程中的this关键字使用

这样就又引出了一个问题:既然函数副本这么好用,为什么还需要函数引用的方法呢?答案是性能。每新建一个函数的副本,程序就会为这个函数副本分配一定的内存。而实际应用中,大多数函数并不一定会被调用,于是这部分内存就被白白浪费了。而使用函数引用的方式,程序就只会给函数的本体分配内存,而引用只分配指针,这样效率就高很多。程序员么,节约为主,恩

所以我们来看一个更好的解决方案:

<script type="text/javascript">
function demo(obj) {
  obj.value = Math.random();
}
</script>
<input type="button" value="demo" onclick="demo(this)" />
<input type="button" value="demo" onclick="demo(this)" />
<input type="button" value="demo" onclick="demo(this)" />

 

这样,效率和需求就都能兼顾了。

 
this的指向
JavaScript由于其在运行期进行绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。常言道,字不如表,表不如图。为了让人更好的理解JavaScript this 到底指向什么?下面用一张图来进行解释:

深入解析JavaScript编程中的this关键字使用

上图我称之为”JavaScript this决策树“(非严格模式下)。下面通过例子来说明这个图如何来帮助我们对this进行判断:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
   this.x = this.x + x; 
   this.y = this.y + y; 
   } 
 };
//决策树解释:point.moveTo(1,1)函数不是new进行调用,进入否决策,
//是用dot(.)进行调用,则指向.moveTo之前的调用对象,即point
point.moveTo(1,1); //this 绑定到当前对象,即point对象

point.moveTo()函数在 “JavaScript this决策树“中进行判定的过程是这样的:

1)point.moveTo函数调用是用new进行调用的么?这个明显不是,进入“否”分支,即函数是否用dot(.)进行调用?;

2)point.moveTo函数是用dot(.)进行调用的,即进入“是”分支,即这里的this指向point.moveTo中.之前的对象point;

图解point.moveTo函数的this指向什么的解析图如下图所示:

深入解析JavaScript编程中的this关键字使用

再举例,看下面的代码:

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window,x为全局变量
//决策树解析:func()函数是用new进行调用的么?为否,进入func()函数是用dot进行调用的么?为否,则 this指向全局对象window
x;//x => 5

func()函数在 “JavaScript this决策树“中进行判定的过程是这样的:

1)func(5)函数调用是用new进行调用的么?这个明显不是,进入“否”分支,即函数是否用dot(.)进行调用?;

2)func(5)函数不是用dot(.)进行调用的,即进入“否”分支,即这里的this指向全局变量window,那么this.x实际上就是window.x;

图解func函数的this指向什么的解析图如下图所示:

深入解析JavaScript编程中的this关键字使用

针对作为函数直接调用的方式,下面看一个复杂的例子:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
   // 内部函数
   var moveX = function(x) { 
   this.x = x;//this 指向什么?window
  }; 
  // 内部函数
  var moveY = function(y) { 
  this.y = y;//this 指向什么?window
  }; 
  moveX(x); 
  moveY(y); 
  } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

point.moveTo(1,1)函数实际内部调用的是moveX()和moveY()函数, moveX()函数内部的this在 “JavaScript this决策树“中进行判定的过程是这样的:

1)moveX(1)函数调用是用new进行调用的么?这个明显不是,进入“否”分支,即函数是否用dot(.)进行调用?;

2)moveX(1)函数不是用dot(.)进行调用的,即进入“否”分支,即这里的this指向全局变量window,那么this.x实际上就是window.x;

下面看一下作为构造函数调用的例子:

function Point(x,y){ 
  this.x = x; // this ?
  this.y = y; // this ?
 }
var np=new Point(1,1);
np.x;//1
var p=Point(2,2);
p.x;//error, p是一个空对象undefined
window.x;//2

Point(1,1)函数在var np=new Point(1,1)中的this在 “JavaScript this决策树“中进行判定的过程是这样的:

1)var np=new Point(1,1)调用是用new进行调用的么?这个明显是,进入“是”分支,即this指向np;

2)那么this.x=1,即np.x=1;

Point(2,2)函数在var p= Point(2,2)中的this在 “JavaScript this决策树“中进行判定的过程是这样的:

1)var p= Point(2,2)调用是用new进行调用的么?这个明显不是,进入“否”分支,即函数是否用dot(.)进行调用?;

2)Point(2,2)函数不是用dot(.)进行调用的?判定为否,即进入“否”分支,即这里的this指向全局变量window,那么this.x实际上就是window.x;

3)this.x=2即window.x=2.

最后看一下函数用call 和apply进行调用的例子:

function Point(x, y){ 
  this.x = x; 
  this.y = y; 
  this.moveTo = function(x, y){ 
    this.x = x; 
    this.y = y; 
  } 
 } 

var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
p2.x//10

p1.moveTo.apply(p2,[10,10])函数在 “JavaScript this决策树“中进行判定的过程是这样的:

我们知道,apply 和 call 这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。p1.moveTo.apply(p2,[10,10])实际上是p2.moveTo(10,10)。那么p2.moveTo(10,10)可解释为:

1)p2.moveTo(10,10)函数调用是用new进行调用的么?这个明显不是,进入“否”分支,即函数是否用dot(.)进行调用?;

2)p2.moveTo(10,10)函数是用dot(.)进行调用的,即进入“是”分支,即这里的this指向p2.moveTo(10,10)中.之前的对象p2,所以p2.x=10;

关于JavaScript函数执行环境的过程,IBM developerworks文档库中的一段描述感觉很不错,摘抄如下:

“JavaScript 中的函数既可以被当作普通函数执行,也可以作为对象的方法执行,这是导致 this 含义如此丰富的主要原因。一个函数被执行时,会创建一个执行环境(ExecutionContext),函数的所有的行为均发生在此执行环境中,构建该执行环境时,JavaScript 首先会创建 arguments变量,其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量,首先初始化函数的形参表,值为 arguments变量中对应的值,如果 arguments变量中没有对应值,则该形参初始化为 undefined。如果该函数中含有内部函数,则初始化这些内部函数。如果没有,继续初始化该函数内定义的局部变量,需要注意的是此时这些变量初始化为 undefined,其赋值操作在执行环境(ExecutionContext)创建成功后,函数执行时才会执行,这点对于我们理解 JavaScript 中的变量作用域非常重要,鉴于篇幅,我们先不在这里讨论这个话题。最后为 this变量赋值,如前所述,会根据函数调用方式的不同,赋给 this全局对象,当前对象等。至此函数的执行环境(ExecutionContext)创建成功,函数开始逐行执行,所需变量均从之前构建好的执行环境(ExecutionContext)中读取。”
理解这段话对于理解Javascript函数将大有好处。

Javascript 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
3种js实现string的substring方法
Nov 09 #Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 #Javascript
js中substring和substr两者区别和使用方法
Nov 09 #Javascript
浅析js中substring和substr的方法
Nov 09 #Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 #Javascript
比较常见的javascript中定义函数的区别
Nov 09 #Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 #Javascript
You might like
PHP调用VC编写的COM组件实例
2014/03/29 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
js 操作select相关方法函数
2009/12/06 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python创建日历实例
2014/08/21 Python
python自定义类并使用的方法
2015/05/07 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
为什么说python适合写爬虫
2020/06/11 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
医学专业个人求职自荐信格式
2013/09/23 职场文书
韩语专业本科生求职信
2013/10/01 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL