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 functions function sloppyFunc() { console.log(eval( 'this' ) === window); // true } sloppyFunc(); function strictFunc() { 'use strict' ; console.log(eval( 'this' ) === undefined); // true } strictFunc(); // Constructors var savedThis; function Constr() { savedThis = eval( 'this' ); } var inst = new Constr(); console.log(savedThis === inst); // true // Methods var 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); // 7 console.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 undefined console.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 ...
随机推荐
- 使用WIF实现单点登录Part III —— 正式实战
我们接下来的demo将包括以下的工程: SiteA —— 基于.net framework 4.5的MVC 4程序,使用WIF 4.5的SDK,第一个RP SiteB —— 基于.net framew ...
- 使用WIF实现单点登录Part II —— Windows Identity Foundation基本原理
在上一篇文章中,我们已经使用WIF构建了一个基于MVC4的简单的身份验证程序,在这篇文章里,我们将探讨一下到底什么是WIF,以及它的工作原理.然后在下一篇文章开始,我们将实际操作,实现单点登录功能. ...
- Flask Web Development —— Web表单(上)
Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ p ...
- 2016/09/21 java关键字static
1.static方法 static方法一般称作静态方法,由于静态方法不依赖于任何对象就可以进行访问,因此对于静态方法来说,是没有this的,因为它不依附于任何对象,既然都没有对象,就谈不上th ...
- 第三节:卸载AppDomain
AppDomain很出色的一个能力就是它允许卸载.卸载AppDomain会导致CLR卸载AppDomain中的所有程序集.还会释放AppDomain的Loader堆.为了卸载一个AppDomain,可 ...
- VS2013+Qt5.6+VSaddin1.2.5
1 下载Qt(1)Qt安装包http://download.qt.io/official_releases/qt/(2)Qt插件http://ftp.jaist.ac.jp/pub/qtproject ...
- [php]如何更改wamp默认的mysq空密码?
最近刚开始学php,爬坑中.上午看了会儿书,下了个源码,把文件部署到www下之后,也导入了sql文件,但是进入之后显示 = = 一开始不知道是什么.后来百度之后发现是mysql的问题,应该是源码中p ...
- jruby中的异常
先看看ruby中的异常知识: 异常处理raise 例子: raise raise "you lose" raise SyntaxError.new("invalid sy ...
- MIFARE系列1《MIFARE简介》
随着社会的发展,智能卡在很多领域得到了广泛的应用.特别是非接触卡,由于使用方便以及功能强大的特点,在管理.公交.工作证.身份识别等领域得到了快速的普及和推广. 非接触卡已经逐步发展成为一个独立的跨学科 ...
- 【转】C#中Invoke的用法
在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直接调用界面控件的方法是错误的做法,Invoke 和 BeginInvoke 就是为了解决这个问题而出现的,使你在多线程中安全的更新界 ...