透彻理解并掌握JavaScript的this
前言
无论是JavaScript新手还是老手,JavaScript中的this
关键词可能都会令你困惑。本文旨在透彻地阐述this
。读完本文,就再也不用怕JavaScript中的this
了。你将会知道在各种情况下怎么使用this
,即使是最晦涩的用法也将不再是问题。
this的用法与自然语言英语法语中的代词差不多。我们会这么说:“约翰跑的很快,因为他正在赶火车。”注意代词“他”的用法。我们也可以这样说:“约翰跑的很快,因为约翰正在赶火车。”我们当然不会以这种方式复用“约翰”,因为这样子我们的家人朋友和同事都会对我们避而远之,真的会的。好吧,可能你的家人不会,但有些酒肉朋友或者不能共患难的同事则会抛弃你。与在自然语言中优雅地使用代词的方式类似,在JavaScript中我们将this
这个关键词当成快捷方式,当成指示词。它指代的是一个物体–上下文环境中的主语(上下文指的是执行代码的主语)。看看下面这个例子:
var person = {
firstName: "Penelope",
lastName: "Barrymore",
fullName: function () {
//注意this的使用方式与上文使用“他”这个代词的方式一样:
console.log(this.firstName + " " + this.lastName);
//我们也可以这样子写:
console.log(person.firstName + " " + person.lastName);
}
}
如果我们像上方示例代码那样子使用person.firstName
和person.lastName
,代码就会变得指代不明。假设还有一个叫person
的全局变量(不管你知不知道),那么person.firstName
就会尝试访问全局变量person
的firstName
属性,这样子出错时就很难调试了。所以this关键词的使用不单单是为了简洁的美感(比如将其作为指示词),也是为了准确性。正如代词“他”让句子含义更加清晰一样,使用this
可以让代码的含义更加明确。上方范例句子中,代词让我们知道它指代的是句子开头提到的那个“约翰”,而this
关键词的作用也于此类似。
代词“他”用来指代先行词(先行词就是其指代的名词),相似地this
关键词也用来指代使用它的函数(function)绑定的对象(object)。this
关键词不单单指代对象,还会包含该对象的值。与代词一样,this可以当成快捷方式(或者指代明确的替身),指代上下文环境中的对象(或者你可以叫它“先行对象”)。下文我们会学习更多关于上下文环境的内容。
JavaScript this关键词基础知识
首先你要知道JavaScript中所有的函数都有属性,就如对象有属性一样。函数执行时会获取this
属性的值,此时this
就是一个变量,储存着调用该函数的对象的值。
this
这个引用总是指代对象并储存着它的值(只能指代一个对象),一般都在函数或者对象方法里使用,但是也能用在函数外的全局作用域里。需要注意的是,如果在函数里使用严格模式,全局函数里this的值就是undefined
。而在匿名函数里则不会绑定任何对象。
假设在函数A里使用this
,它就储存着调用函数A的对象的值。要获取调用函数A的对象的属性和方法,就需要用到this
,特别是当我们不知道改对象的名称或者没有名称可以指代该对象。所以,需要用this
作为一个快捷方式来指代“先行对象”,也就是调用函数的对象。
思考一下下面这段代码,它展示了如何在JavaScript中使用this
:
var person = {
firstName :"Penelope",
lastName :"Barrymore",
//因为下方的showFullName方法使用了“this”关键词而且该方法是在person对象里定义的,
//那么“this”就会储存着person对象的值,因为该对象会调用showFullName()方法
showFullName:function () {
console.log (this.firstName + " " + this.lastName);
}
}
person.showFullName (); // Penelope Barrymore
看看下面很基础的jQuery范例代码,里面也用了this
:
//这是一段很常见的jQuery代码 $ ("button").click (function (event) {
//$(this)会储存按钮对象($("button"))的值
//因为click()方法是由该按钮对象调用的
console.log ($ (this).prop ("name"));
});
我解释一下上面的jQuery范例。JavaScript this关键词在jQuery里的语法形式是$(this)
,它被用在一个匿名函数里面,而该函数则在按钮对象的click()方法里执行。$(this)
会被绑定到按钮对象,是因为jQuery库将$(this)
绑定到了调用click方法的对象中。所以尽管$(this)
在匿名函数里定义且该函数本身无法访问外部函数的this
变量,$(this)
还是储存着jQuery按钮对象$(“button”)
的值。
需要注意的是,该按钮不但是HTML页面的DOM元素,而且是一个对象。因为我们将它封装在 jQuery $()函数里,在这种情况下它就是一个jQuery对象。
更新:下文的“最大的误区”部分是在本文发布几天后新增的。
JavaScript this 关键词使用最大的误区
只有当定义this
的函数被对象调用时,this
才会被赋值。如果你理解这个JavaScript原则,那么你就能深刻地理解this
关键词。我们暂且将定义this
的函数称为“THIS函数”。
尽管表面上看起来this
指代的是定义它的对象,但只有当THIS函数被一个对象时,this
才会被赋值。该值完全取决于调用THIS函数的对象。在大部分情况下,this
储存的都是调用对象的值。然而少数情况下this储存的却不是调用对象的值,稍后我会讨论这些情况。
在全局作用域下使用this
当代码在浏览器里执行时,全局作用域里的所有全局变量和函数都在window
对象里定义,所以在全局函数里使用this
,它指代window对象并储存着该对象的值(如上文提到的一样,严格模式除外)。window对象是整个JavaScript程序或网页的主储存器。
var firstName = "Peter",
lastName = "Ally";
function showFullName () {
//这个函数里的"this"会储存window对象的值
//因为与变量firstName和lastName一样,showFullName()函数是在全局作用域里定义的
console.log (this.firstName + " " + this.lastName);
}
var person = {
firstName :"Penelope",
lastName :"Barrymore",
showFullName:function () {
//这行的"this"指代person对象,因为showFullName函数会被person对象调用
console.log (this.firstName + " " + this.lastName);
}
}
showFullName (); // Peter Ally
//因为所有全局变量和函数都是在window对象里定义的,所以:
window.showFullName (); // Peter Ally
//showFullName()方法定义于person对象里,它里面的"this"依旧指代person对象,所以:
person.showFullName (); // Penelope Barrymore
this最容易用错的情况
this
关键词在下列情况下最容易被用错:
- 当使用
this
的方法被“借用”时; - 当使用
this
的方法被赋值给变量时; - 当使用
this
的方法被用作回调函数时; - 当
this
被用于闭包-内部函数里时。
下文将探讨每种情况,并通过范例给出让this获取正确值的方法。
题外话:浅析“上下文环境”
JavaScript里的上下文环境与英语里句子的主语的含义相似:“约翰赢了比赛,却把钱还了回去。”句子的主语是约翰,我们可以说句子的上下文环境的就是约翰,因为这个句子关注的是约翰这个人。就连句子后半部分被省略的“他”,指的也是约翰这个先行词。在英文里可以用分号改变句子的主语,于此类似,函数可以在一个对象里定义并将其作为自己当前的上下文环境,也可以被其他对象调用,从而将上下文环境换成那个对象。
在JavaScript代码里可以做类似的事情:
var person = {
firstName :"Penelope",
lastName :"Barrymore",
showFullName:function () {
// “上下文环境”
console.log (this.firstName + " " + this.lastName);
}
}
//当调用在person对象上定义的showFullName方法时,其“上下文环境”就是person对象
//showFullName()方法里的this储存着person对象的值
person.showFullName (); // Penelope Barrymore
// If we invoke showFullName with a different object:
//如果用其他对象来调用showFullName()方法:
var anotherPerson = {
firstName :"Rohit",
lastName :"Khan"
};
//可以使用apply方法将this的设为特定的值 - 稍微会继续讨论apply()方法
//无论哪个对象调用了this,this都会获取该对象的值,所以:
person.showFullName.apply (anotherPerson); // Rohit Khan
//所以上下文环境现在就是anotherPerson对象,因为是它通过使用apply()方法调用了person.showFullName ()这个方法
总结起来就是:调用THIS函数的对象就是其上下文环境,但其他对象调用THIS函数就会变成其上下文环境。
当使用this的方法被用作回调函数时
当使用this的方法作为回调函数传给其他函数时,情况就有点棘手了。例如:
//创建一个包含clickHandler()方法的简单对象,当页面上的按钮被点击时可以使用
var user = {
data:[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
clickHandler:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 0到1之间的随机整数
//这行代码从data数组里随机获取名字(person's nam)和年龄(age)并输入
console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
//button被封装在jQuery的美元符封装器($)里,所以可以直接作为jQuery对象使用
//因为button对象没有data属性,所以结果为undefined
$ ("button").click (user.clickHandler); //无法获取undefined名为“0”的属性
上方的代码中,按钮($(“button”)
)本身就是一个对象,我们将user.clickHandler()
方法作为其click()
方法的回调函数传入,所以user.clickHandler()
方法里的this
将不再指代user
对象。现在this
指代的是执行user.clickHandler()
方法的对象。虽然this
是在user
对象里定义的,但是button
对象调用了user.clickHandler()
方法 - 确切的说,user.clickHandler()
方法是在button
对象的click()
方法里被执行的。
需要注意的是,尽管我们是通过user.clickHandler()
这种形式(必须这样子做,因为clickHandler()
是在user
对象里定义的方法)来调用clickHandler ()
方法的,clickHandler ()
方法被执行时其上下文环境是button
对象,所以this现在指代的是button
对象($(“button”)
)。
说了这么多,应该很清楚了:当上下文环境改变时,也就是说方法在一个对象里定义却到另外一个对象里执行时,this关键词不再指代原对象,而是指代调用该方法的对象。
当方法作为回调函数时,让this获取正确值的方式
如果要让this.data
指代user
对象的data
属性,可以使用Bind ()
,Apply ()
或者Call ()
方法给this
设置特定的值。
在我另一篇文章JavaScript程序员必学:JavaScript的Apply、Call和Bind方法里,详细地探讨了这些方法,并讲解了如何在各种容易出错的情况下使用他们正确设置this
的值。这里就不重发一遍了。我觉得这篇文章作为JavaScript程序员都应该读一读,建议你好好看一下。
要解决前例的问题,可以使用bind()
方法,所以
我们不这么写:
$ ("button").click (user.clickHandler);
而是这样子将clickHandler()
方法绑定到user
对象:
$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43
当this
被用于闭包时
另外一种this
容易被用错的情况是使用闭包。一定要记住,闭包使用this
关键词无法访问外部函数的this
变量。函数的this变量只能被自身访问,其内部变量不行。例如:
var user = {
tournament:"The Masters",
data:[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
clickHandler:function () {
//在这里使用this.data是没问题的,因为“this”指代的是user对象而data是user对象的属性
this.data.forEach (function (person) {
//但在这个匿名函数(作为forEach方法的参数)里,“this”不再指代user对象
//这个内部函数无法访问外部函数里的“this”
console.log ("What is This referring to? " + this); //[object Window] console.log (person.name + " is playing at " + this.tournament);
// T. Woods is playing at undefined
// P. Mickelson is playing at undefined
})
}
}
user.clickHandler(); // What is "this" referring to? [object Window]
匿名函数里的this
无法访问外部函数的this,所以在非严格模式下其被绑定了window对象上。
在匿名函数里让this获取正确的值
在匿名函数里使用this,然后将函数传入为forEach()方法的参数,会出问题。解决这个问题可以用JavaScript里一种常用的手法。在将匿名函数传给forEach()方法前,将this赋值给其他变量:
var user = {
tournament:"The Masters",
data:[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
clickHandler:function (event) {
//要在“this”指代user对象时获取到它的值,我们必须将其值传给其他变量:将“this”的值传给theUserObj变量,以待后面使用
var theUserObj = this;
this.data.forEach (function (person) {
//不用this.tournament,而用theUserObj.tournament
console.log (person.name + " is playing at " + theUserObj.tournament);
})
}
}
user.clickHandler();
// T. Woods is playing at The Masters
// P. Mickelson is playing at The Masters
值得注意的是,很多JavaScript开发者喜欢将变量命名为that
(见下方例子),然后将this
赋值给它。个人觉得使用“that”这个词太过简单粗暴,我尽量让命名体现this指代的对象,所以我才在上面的代码中使用theUserObj = this
。
// JavaScript使用者的常用手法
var that = this;
当使用this的方法被赋值给变量时
如果将方法赋值给变量,与我们期望的不同,this
的值绑定的会是另外一个对象。见下方例子:
//此处的data是全局变量
var data = [
{name:"Samantha", age:12},
{name:"Alexis", age:14}
];
var user = {
//此处的data是user对象的属性
data:[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
showData:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 0到1之间的随机整数
//这行代码由data数组里产生一个随机的person数据加到text字段里
console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
//将user.showData赋值给变量
var showUserData = user.showData;
//当执行showUserData()函数时,控制台输出的值来自全局的data数组,而不是user对象的data数组
showUserData (); // Samantha 12 (来自全局的data数组)
在方法被赋值给变量时让this获取正确的值
可以用bind()
方法设置this的值来解决问题:
//将showData方法绑定到user对象上
var showUserData = user.showData.bind (user);
//因为this关键词绑定到了user对象上,现在得到的是user对象的值
showUserData (); // P. Mickelson 43
当使用this的方法被“借用”时
在JavaScript开发里借用其他对象的方法是很常见的行为,作为JavaScript开发者当然时不时会这样子做,以此来节省开发时间。我在另外一篇文章里深入剖析了如何借用其他对象的方法:JavaScript程序员必学:JavaScript的Apply、Call和Bind方法。
我们来看下方法被借用后,this怎么样指代对象:
//这里有两个对象,一个有叫avg()的方法而另外一个没有
//所以我们会让另外一个对象借用一下该方法
var gameController = {
scores :[20, 34, 55, 46, 77],
avgScore:null,
players :[
{name:"Tommy", playerID:987, age:23},
{name:"Pau", playerID:87, age:33}
]
}
var appController = {
scores:[900, 845, 809, 950],
avgScore:null,
avg:function () {
var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
return prev + cur;
});
this.avgScore = sumOfScores / this.scores.length;
}
}
//如果运行下方代码,gameController.avgScore属性就会被设置为由appController对象"scores"数组得出的平均分数 //别运行下面这行代码,它只作展示用。让appController.avgScore的值为null
gameController.avgScore = appController.avg();
avg
方法的this
关键词不会指代gameController
对象,而是指代appController
对象,因为调用它的是appController
对象。
方法被借用时让this获取正确的值
要解决问题,确保appController.avg ()
里的this
指代的是gameController
对象,可以使用apply ()
方法:
//注意使用的是apply()方法,所以第二个参数必须是数组-这些参数最后都会被传给appController.avg()方法
appController.avg.apply (gameController, gameController.scores);
//gameController对象上的avgScore属性成功设置,尽管avg()方法是从appController对象借过来的
console.log (gameController.avgScore); // 46.4
//appController.avgScore依然未null,其值没有被更新,只有gameController.avgScore的值被更新了
console.log (appController.avgScore); // null
gameController
对象借用了appController
对象的avg()
方法。appController.avg ()
里this
的值会被设置为gameController
对象,因为apply ()
方法的第一个参数传入的是gameController
对象。apply ()
方法的首个参数会将this
设置为特定的值。
结束语
希望学习完本文,你就完全理解JavaScript里的this关键词了。要在各种情况下正确使用JavaScript的this关键词,你也已经掌握了方法 - bind、apply、call方法以及将this赋值给其他变量。
现在你应该知道,this的上下文环境一改变,有时就会很麻烦。当涉及到回调函数,或者方法由其他对象调用,又或者方法被其他对象借用时,会特别绕。反正你记住this储存的是调用THIS函数的对象的值就行了。
祝各位顺利,好好休息。编程快乐!
透彻理解并掌握JavaScript的this的更多相关文章
- 全面理解面向对象的 JavaScript (share)
以下分享自: http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/ 简介: JavaScript 函数式脚本语言特性以及其看似随 ...
- 全面理解面向对象的 JavaScript
前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...
- 摘抄--全面理解面向对象的 JavaScript
全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...
- 全面理解面向对象的JavaScript
转载:http://justcoding.iteye.com/blog/2019293 原文:http://www.ibm.com/developerworks/cn/web/1304_zengyz_ ...
- 全面理解面向对象的 JavaScript(转载)
http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/#resources 前言 当今 JavaScript 大行其道,各种应用对其依赖日 ...
- 深入全面理解面向对象的 JavaScript
深入全面理解面向对象的 JavaScript (原著: 曾 滢, 软件工程师, IBM,2013 年 4 月 17 日) JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来 ...
- 转载:全面理解面向对象的 JavaScript
来源:DeveloperWorks – 曾滢著 简介: JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向 ...
- 回调函数透彻理解Java
http://blog.csdn.net/allen_zhao_2012/article/details/8056665 回调函数透彻理解Java 标签: classjavastringinterfa ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
随机推荐
- 高级UI晋升之常用View(三)上篇
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下两个内容来介绍常用View: [RecycleView] [Ca ...
- JS 将对象转换成字符 字符串转换成json对象
//js对象 var user = { "name": "张学友", "address": "中国香港" }; //将对 ...
- form编码方式application/x-www-form-urlencoded和multipart/form-data的区别?
application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔 multipart/form-data: 表单数据编码为一条消息,每个控件对应消息的一部分 ...
- JAVA里面的int类型 和Integer类型,有什么不一样
JAVA里面的int类型 和Integer类型,有什么不一样 原创 2013年09月04日 23:15:11 标签: java / 2120 编辑 删除 JAVA里面的int类型 和Integer类型 ...
- CentOS7.6编译安装Python-3.7.4
安装步骤 1. 下载安装包.wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz<说明>如果报SSL/TSL错误,则加 ...
- 笔记29 视图解析 ——InternalResourceViewResolver
Spring自带了13个视图解析器,能够将逻辑视图名转换为物理实现 首先将会介绍 InternalResourceViewResolver,这个视图解析器一般会用来 解析JSP视图. 1. Spri ...
- vue生态系统之vue-router
一.vue-router安装与使用 1.安装 进入项目目录中安装vue-router模块 E:\vueProject\webpackProject>cnpm install vue-router ...
- PHP 类中静态方法调用非静态方法
静态方法调用非静态方法: 在类中静态方法中,需要实例化对象,然后再调用类中的方法 非静态方法调用静态方法: 可以self 或者 类名加::的形式调用 如下面的案例: <?php class A{ ...
- 解决 AUTH` failed: ERR Client sent AUTH, but no password is set [tcp://127.0.0.1:6379]
页面报错: ConnectionException In AbstractConnection.php line 155 AUTH` failed: ERR Client sent AUTH, but ...
- SCOI 2014 new :未来展望
后期计划(可能延续到noip) 后期计划这种东西..唉...经历了三周的停课生涯,我似乎已经找到了一种状态,就是我一直期盼的状态,然后为了不落泪退役,具体是这样的: 由于现在的学习任务不太紧张了,所以 ...