JavaScript中this的工作原理以及注意事项
在JavaScript中,this 的概念比较复杂。除了在面向对象编程中,this 还是随处可用的。这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子。 要根据this 所在的位置来理解它,情况大概可以分为3种:
1、在函数中:this 通常是一个隐含的参数。
2、在函数外(顶级作用域中):在浏览器中this 指的是全局对象;在Node.js中指的是模块(module)的导出(exports)。
3、传递到eval()中的字符串:如果eval()是被直接调用的,this 指的是当前对象;如果eval()是被间接调用的,this 就是指全局对象。
对这几个分类,我们做了相应的测试:
1、在函数中的this
函数基本可以代表JS中所有可被调用的结构,所以这是也最常见的使用this 的场景,而函数又能被子分为下列三种角色:
- 实函数
- 构造器
- 方法
1.1 在实函数中的this
在实函数中,this 的值是取决于它所处的上下文的模式。
Sloppy模式:this 指的是全局对象(在浏览器中就是window)。
|
1
2
3
4
|
function sloppyFunc() { console.log(this === window); // true}sloppyFunc(); |
Strict模式:this 的值是undefined。
|
1
2
3
4
5
|
function strictFunc() { 'use strict'; console.log(this === undefined); // true}strictFunc(); |
this 是函数的隐含参数,所以它的值总是相同的。不过你是可以通过使用call()或者apply()的方法显示地定义好this的值的。
|
1
2
3
4
5
6
7
|
function func(arg1, arg2) { console.log(this); // 1 console.log(arg1); // 2 console.log(arg2); // 3}func.call(1, 2, 3); // (this, arg1, arg2)func.apply(1, [2, 3]); // (this, arrayWithArgs) |
1.2 构造器中的this
你可以通过new 将一个函数当做一个构造器来使用。new 操作创建了一个新的对象,并将这个对象通过this 传入构造器中。
|
1
2
3
4
5
6
|
var savedThis;function Constr() { savedThis = this;}var inst = new Constr();console.log(savedThis === inst); // true |
JS中new 操作的实现原理大概如下面的代码所示(更准确的实现请看这里,这个实现也比较复杂一些):
|
1
2
3
4
5
|
function newOperator(Constr, arrayWithArgs) { var thisValue = Object.create(Constr.prototype); Constr.apply(thisValue, arrayWithArgs); return thisValue;} |
1.3 方法中的this
在方法中this 的用法更倾向于传统的面向对象语言:this 指向的接收方,也就是包含有这个方法的对象。
|
1
2
3
4
5
6
|
var obj = { method: function () { console.log(this === obj); // true }}obj.method(); |
2、作用域中的this
在浏览器中,作用域就是全局作用域,this 指的就是这个全局对象(就像window):
|
1
2
3
|
<script> console.log(this === window); // true</script> |
在Node.js中,你通常都是在module中执行函数的。因此,顶级作用域是个很特别的模块作用域(module scope):
|
1
2
3
4
5
6
7
|
// `global` (not `window`) refers to global object:console.log(Math === global.Math); // true// `this` doesn’t refer to the global object:console.log(this !== global); // true// `this` refers to a module’s exports:console.log(this === module.exports); // true |
3、eval()中的this
eval()可以被直接(通过调用这个函数名’eval’)或者间接(通过别的方式调用,比如call())地调用。要了解更多细节,请看这里。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// Real functionsfunction sloppyFunc() { console.log(eval('this') === window); // true}sloppyFunc();function strictFunc() { 'use strict'; console.log(eval('this') === undefined); // true}strictFunc();// Constructorsvar savedThis;function Constr() { savedThis = eval('this');}var inst = new Constr();console.log(savedThis === inst); // true// Methodsvar obj = { method: function () { console.log(eval('this') === obj); // true }}obj.method(); |
4、与this有关的陷阱
你要小心下面将介绍的3个和this 有关的陷阱。要注意,在下面的例子中,使用Strict模式(strict mode)都能提高代码的安全性。由于在实函数中,this 的值是undefined,当出现问题的时候,你会得到警告。
4.1 忘记使用new
如果你不是使用new来调用构造器,那其实你就是在使用一个实函数。因此this就不会是你预期的值。在Sloppy模式中,this 指向的就是window 而你将会创建全局变量:
|
1
2
3
4
5
6
7
8
9
10
|
function Point(x, y) { this.x = x; this.y = y;}var p = Point(7, 5); // we forgot new!console.log(p === undefined); // true// Global variables have been created:console.log(x); // 7console.log(y); // 5 |
不过如果使用的是strict模式,那你还是会得到警告(this===undefined):
|
1
2
3
4
5
6
7
|
function Point(x, y) { 'use strict'; this.x = x; this.y = y;}var p = Point(7, 5);// TypeError: Cannot set property 'x' of undefined |
4.2 不恰当地使用方法
如果你直接取得一个方法的值(不是调用它),你就是把这个方法当做函数在用。当你要将一个方法当做一个参数传入一个函数或者一个调用方法中,你很可能会这么做。setTimeout()和注册事件句柄(event handlers)就是这种情况。我将会使用callIt()方法来模拟这个场景:
|
1
2
3
4
|
/** Similar to setTimeout() and setImmediate() */function callIt(func) { func();} |
如果你是在Sloppy模式下将一个方法当做函数来调用,*this*指向的就是全局对象,所以之后创建的都会是全局的变量。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var counter = { count: 0, // Sloppy-mode method inc: function () { this.count++; }}callIt(counter.inc);// Didn’t work:console.log(counter.count); // 0// Instead, a global variable has been created// (NaN is result of applying ++ to undefined):console.log(count); // NaN |
如果你是在Strict模式下这么做的话,this是undefined的,你还是得不到想要的结果,不过至少你会得到一句警告:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var counter = { count: 0, // Strict-mode method inc: function () { 'use strict'; this.count++; }}callIt(counter.inc);// TypeError: Cannot read property 'count' of undefinedconsole.log(counter.count); |
要想得到预期的结果,可以使用bind():
|
1
2
3
4
5
6
7
8
9
|
var counter = { count: 0, inc: function () { this.count++; }}callIt(counter.inc.bind(counter));// It worked!console.log(counter.count); // 1 |
bind()又创建了一个总是能将this的值设置为counter 的函数。
4.3 隐藏this
当你在方法中使用函数的时候,常常会忽略了函数是有自己的this 的。这个this 又有别于方法,因此你不能把这两个this 混在一起使用。具体的请看下面这段代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var obj = { name: 'Jane', friends: [ 'Tarzan', 'Cheeta' ], loop: function () { 'use strict'; this.friends.forEach( function (friend) { console.log(this.name+' knows '+friend); } ); }};obj.loop();// TypeError: Cannot read property 'name' of undefined |
上面的例子里函数中的this.name 不能使用,因为函数的this 的值是undefined,这和方法loop()中的this 不一样。下面提供了三种思路来解决这个问题:
1、that=this,将this 赋值到一个变量上,这样就把this 显性地表现出来了(除了that,self 也是个很常见的用于存放this的变量名),之后就使用那个变量:
|
1
2
3
4
5
6
7
|
loop: function () { 'use strict'; var that = this; this.friends.forEach(function (friend) { console.log(that.name+' knows '+friend); });} |
2、bind()。使用bind()来创建一个函数,这个函数的this 总是存有你想要传递的值(下面这个例子中,方法的this):
|
1
2
3
4
5
6
|
loop: function () { 'use strict'; this.friends.forEach(function (friend) { console.log(this.name+' knows '+friend); }.bind(this));} |
3、用forEach的第二个参数。forEach的第二个参数会被传入回调函数中,作为回调函数的this 来使用。
|
1
2
3
4
5
6
|
loop: function () { 'use strict'; this.friends.forEach(function (friend) { console.log(this.name+' knows '+friend); }, this);} |
5、最佳实践
理论上,我认为实函数并没有属于自己的this,而上述的解决方案也是按照这个思想的。ECMAScript 6是用箭头函数(arrow function)来实现这个效果的,箭头函数就是没有自己的this 的函数。在这样的函数中你可以随便使用this,也不用担心有没有隐式的存在。
|
1
2
3
4
5
6
7
8
|
loop: function () { 'use strict'; // The parameter of forEach() is an arrow function this.friends.forEach(friend => { // `this` is loop’s `this` console.log(this.name+' knows '+friend); });} |
我不喜欢有些API把this 当做实函数的一个附加参数:
|
1
2
3
4
5
6
7
|
beforeEach(function () { this.addMatchers({ toBeInRange: function (start, end) { ... } }); }); |
把一个隐性参数写成显性地样子传入,代码会显得更好理解,而且这样和箭头函数的要求也很一致:
|
1
2
3
4
5
6
7
|
beforeEach(api => { api.addMatchers({ toBeInRange(start, end) { ... } });}); |
原文链接: 2ality 翻译: 伯乐在线 - kmokidd
JavaScript中this的工作原理以及注意事项的更多相关文章
- 详解javascript中this的工作原理
在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向. 一.指向 window: 在全局中使用 this,它将会指向全 ...
- javaScript中闭包的工作原理
一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话 ...
- JavaScript中实现DI的原理(二)
JavaScript中实现DI的原理 在JavaScript中实现DI,看起来难,实际上原理很简单,它的核心技术是Function对象的toString().我们都知道,对一个函数对象执行toStri ...
- 转:ListView中getView的工作原理
ListView中getView的工作原理: [1]ListView asks adapter “give me a view” (getView) for each item of the list ...
- JavaScript的计时器的工作原理
最近都在看一些JavaScript原理层面的文章,恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析,于是诚惶诚恐地决定把原文翻译成中文,一来是为了和大家分享,二来是为了加深自 ...
- MVC中RenderBody的工作原理
A)什么是RenderBody 根据MSDN的解释(http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US& ...
- Java中GC的工作原理
转文: 一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能提高整个 ...
- 梳理源码中 View 的工作原理
欢迎Follow我的GitHub, 关注我的掘金. 在View的工作过程中, 执行三大流程完成显示, 测量(measure)流程, 布局(layout)流程, 绘制(draw)流程. 从perform ...
- Tomcat中JSP引擎工作原理
http://blog.csdn.net/linjiaxingqqqq/article/details/7164449 JSP运行环境: 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有W ...
随机推荐
- Toast提示信息
用Toast来作为操作成功以及用户误操作等等的提示,非常的简单.直接上代码: 创建方式一: ps: 此处没有设置toast的其他属性,均使用默认的风格(个人觉得默认的风格除了字体比较小之外 还是挺好看 ...
- 【转】Linux Soclet编程
原文地址:http://www.cnblogs.com/skynet/archive/2010/12/12/1903949.html “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编 ...
- jqGrid(2)
jqGrid使用方法: 原文地址:http://blog.csdn.net/y0ungroc/article/details/12008879 1. 下载文件 1. 下载jqGrid的软件包, ...
- python 序列化之JSON和pickle详解
JSON模块 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...
- 发布web项目时,忽略指定文件夹或文件
参考:http://blogs.msdn.com/b/webdev/archive/2010/04/22/web-deployment-excluding-files-and-folders-via- ...
- 在WPF中显示GIF图片并实现循环播放
WPF中有一个MediaElement媒体控件,可以来播放媒体,同时也可以显示GIF图片.但看到网上有些人说用MediaElement不能加载作为资源或内嵌的资源的GIF图片,我猜他们一定是在前台用X ...
- XSS的原理分析与解剖[转http://www.freebuf.com/articles/web/40520.html]
0×01 前言: <xss攻击手法>一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的<白帽子讲WEB安全>和cn4rry的<XSS跨站脚本攻击剖析 ...
- React Native相关
安装相关工具参考(视频):http://ninghao.net/course/3001?a=26 学习参考:http://reactnative.cn/ 学习参考:http://www.ruanyif ...
- JavaScript高级程序设计之Date类型
ECMAScript 中的 Date 类型是在早期 Java 的 java.util.Date 类基础上构建的. Date 类型使用自 UTC (国际协调时间)1970年1月1日午夜(零时)开始经过的 ...
- IBM X3650 M4安装win 2008 Server操作指南
由于IBM服务器是IBM原有的Linux系统,所以需要在此硬件上安装Win 2008 Server系统(以下简称win8),中间遇到了很多坑,在下面的描述中会阐述.以下是安装的整个步骤: 一.所需工具 ...