深入解析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 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
详解vue中axios的封装
Jul 18 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
Vue如何清空对象
Mar 03 Vue.js
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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php读取本地json文件的实例
2018/03/07 PHP
php intval函数用法总结
2019/04/14 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python pip配置国内源的方法
2020/02/14 Python
python如何将图片转换素描画
2020/09/08 Python
python实现控制台输出颜色
2021/03/02 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
软件测试面试题
2015/10/21 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
小区门卫值班制度
2014/01/24 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
护理专科自荐书范文
2014/02/18 职场文书
给校长的建议书200字
2014/05/16 职场文书
2014年售票员工作总结
2014/11/19 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android