深入浅析JavaScript系列(13):This? Yes,this!


Posted in Javascript onJanuary 05, 2016

前言

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题。

许多程序员习惯的认为,在程序语言中,this关键字与面向对象程序开发紧密相关,其完全指向由构造器新创建的对象。在ECMAScript规范中也是这样实现的,但正如我们将看到那样,在ECMAScript中,this并不限于只用来指向新创建的对象。

英文翻译: Dmitry A. Soshnikov在Stoyan Stefanov的帮助下发布: 2010-03-07http://dmitrysoshnikov.com/ecmascript/chapter-3-this/俄文原文: Dmitry A. Soshnikov修正: Zeroglif发布: 2009-06-28; 更新:2010-03-07http://dmitrysoshnikov.com/ecmascript/ru-chapter-3-this/本文绝大部分内容参考了:http://www.denisdeng.com/?p=900部分句子参考了:justin的中文翻译

让我们更详细的了解一下,在ECMAScript中this到底是什么?

定义

this是执行上下文中的一个属性:

activeExecutionContext = { VO: {...}, this: thisValue};

这里VO是我们前一章讨论的变量对象。

this与上下文中可执行代码的类型有直接关系,this值在进入上下文时确定,并且在上下文运行期间永久不变。

下面让我们更详细研究这些案例:

全局代码中的this

在这里一切都简单。在全局代码中,this始终是全局对象本身,这样就有可能间接的引用到它了。

// 显示定义全局对象的属性this.a = 10; // global.a = 10alert(a); // 10 // 通过赋值给一个无标示符隐式b = 20;alert(this.b); // 20 // 也是通过变量声明隐式声明的// 因为全局上下文的变量对象是全局对象自身var c = 30;alert(this.c); // 30

函数代码中的this

在函数代码中使用this时很有趣,这种情况很难且会导致很多问题。

这种类型的代码中,this值的首要特点(或许是最主要的)是它不是静态的绑定到一个函数。

正如我们上面曾提到的那样,this是进入上下文时确定,在一个函数代码中,这个值在每一次完全不同。

不管怎样,在代码运行时的this值是不变的,也就是说,因为它不是一个变量,就不可能为其分配一个新值(相反,在Python编程语言中,它明确的定义为对象本身,在运行期间可以不断改变)。

var foo = {x: 10}; var bar = { x: 20, test: function () { alert(this === bar); // true alert(this.x); // 20 this = foo; // 错误,任何时候不能改变this的值 alert(this.x); // 如果不出错的话,应该是10,而不是20 } }; // 在进入上下文的时候// this被当成bar对象// determined as "bar" object; why so - will// be discussed below in detail bar.test(); // true, 20 foo.test = bar.test; // 不过,这里this依然不会是foo// 尽管调用的是相同的function foo.test(); // false, 10

那么,影响了函数代码中this值的变化有几个因素:

首先,在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式。

为了在任何情况下准确无误的确定this值,有必要理解和记住这重要的一点。正是调用函数的方式影响了调用的上下文中的this值,没有别的什么(我们可以在一些文章,甚至是在关于javascript的书籍中看到,它们声称:“this值取决于函数如何定义,如果它是全局函数,this设置为全局对象,如果函数是一个对象的方法,this将总是指向这个对象。?这绝对不正确”)。继续我们的话题,可以看到,即使是正常的全局函数也会被调用方式的不同形式激活,这些不同的调用方式导致了不同的this值。

function foo() { alert(this);} foo(); // global alert(foo === foo.prototype.constructor); // true // 但是同一个function的不同的调用表达式,this是不同的 foo.prototype.constructor(); // foo.prototype

有可能作为一些对象定义的方法来调用函数,但是this将不会设置为这个对象。

var foo = { bar: function () { alert(this); alert(this === foo); }}; foo.bar(); // foo, true var exampleFunc = foo.bar; alert(exampleFunc === foo.bar); // true // 再一次,同一个function的不同的调用表达式,this是不同的 exampleFunc(); // global, false

那么,调用函数的方式如何影响this值?为了充分理解this值的确定,需要详细分析其内部类型之一——引用类型(Reference type)。

引用类型(Reference type)

使用伪代码我们可以将引用类型的值可以表示为拥有两个属性的对象——base(即拥有属性的那个对象),和base中的propertyName 。

var valueOfReferenceType = { base: <base object>, propertyName: <property name>};

引用类型的值只有两种情况:

1. 当我们处理一个标示符时

2. 或一个属性访问器

标示符的处理过程在下一篇文章里详细讨论,在这里我们只需要知道,在该算法的返回值中,总是一个引用类型的值(这对this来说很重要)。

标识符是变量名,函数名,函数参数名和全局对象中未识别的属性名。例如,下面标识符的值:

var foo = 10;function bar() {}

在操作的中间结果中,引用类型对应的值如下:

var fooReference = { base: global, propertyName: 'foo'}; var barReference = { base: global, propertyName: 'bar'};

为了从引用类型中得到一个对象真正的值,伪代码中的GetValue方法可以做如下描述:

function GetValue(value) { if (Type(value) != Reference) { return value; } var base = GetBase(value); if (base === null) { throw new ReferenceError; } return base.[[Get]](GetPropertyName(value)); }

内部的[[Get]]方法返回对象属性真正的值,包括对原型链中继承的属性分析。

GetValue(fooReference); // 10GetValue(barReference); // function object "bar"

属性访问器都应该熟悉。它有两种变体:点(.)语法(此时属性名是正确的标示符,且事先知道),或括号语法([])。

foo.bar();foo['bar']();

在中间计算的返回值中,我们有了引用类型的值。

var fooBarReference = { base: foo, propertyName: 'bar'}; GetValue(fooBarReference); // function object "bar"

引用类型的值与函数上下文中的this值如何相关?——从最重要的意义上来说。 这个关联的过程是这篇文章的核心。 一个函数上下文中确定this值的通用规则如下:

在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。注:第5版的ECMAScript中,已经不强迫转换成全局变量了,而是赋值为undefined。

我们看看这个例子中的表现:

function foo() { return this;} foo(); // global

我们看到在调用括号的左边是一个引用类型值(因为foo是一个标示符)。

var fooReference = { base: global, propertyName: 'foo'};

相应地,this也设置为引用类型的base对象。即全局对象。
同样,使用属性访问器:

var foo = { bar: function () { return this; }}; foo.bar(); // foo

我们再次拥有一个引用类型,其base是foo对象,在函数bar激活时用作this。

var fooBarReference = { base: foo, propertyName: 'bar'};

但是,用另外一种形式激活相同的函数,我们得到其它的this值。

var test = foo.bar;test(); // global

因为test作为标示符,生成了引用类型的其他值,其base(全局对象)用作this 值。
var testReference = { base: global, propertyName: 'test'};
现在,我们可以很明确的告诉你,为什么用表达式的不同形式激活同一个函数会不同的this值,答案在于引用类型(type Reference)不同的中间值。

function foo() { alert(this);} foo(); // global, because var fooReference = { base: global, propertyName: 'foo'}; alert(foo === foo.prototype.constructor); // true // 另外一种形式的调用表达式 foo.prototype.constructor(); // foo.prototype, because var fooPrototypeConstructorReference = { base: foo.prototype, propertyName: 'constructor'};

另外一个通过调用方式动态确定this值的经典例子:

function foo() { alert(this.bar);} var x = {bar: 10};var y = {bar: 20}; x.test = foo;y.test = foo; x.test(); // 10y.test(); // 20

函数调用和非引用类型

因此,正如我们已经指出,当调用括号的左边不是引用类型而是其它类型,这个值自动设置为null,结果为全局对象。
让我们再思考这种表达式:

(function () { alert(this); // null => global})();

在这个例子中,我们有一个函数对象但不是引用类型的对象(它不是标示符,也不是属性访问器),相应地,this值最终设为全局对象。

更多复杂的例子:

var foo = { bar: function () { alert(this); }}; foo.bar(); // Reference, OK => foo(foo.bar)(); // Reference, OK => foo (foo.bar = foo.bar)(); // global?(false || foo.bar)(); // global?(foo.bar, foo.bar)(); // global?

为什么我们有一个属性访问器,它的中间值应该为引用类型的值,在某些调用中我们得到的this值不是base对象,而是global对象?

问题在于后面的三个调用,在应用一定的运算操作之后,在调用括号的左边的值不在是引用类型。

1.第一个例子很明显———明显的引用类型,结果是,this为base对象,即foo。

2.在第二个例子中,组运算符并不适用,想想上面提到的,从引用类型中获得一个对象真正的值的方法,如GetValue。相应的,在组运算的返回中———我们得到仍是一个引用类型。这就是this值为什么再次设为base对象,即foo。

3.第三个例子中,与组运算符不同,赋值运算符调用了GetValue方法。返回的结果是函数对象(但不是引用类型),这意味着this设为null,结果是global对象。

4.第四个和第五个也是一样——逗号运算符和逻辑运算符(OR)调用了GetValue 方法,相应地,我们失去了引用而得到了函数。并再次设为global。

引用类型和this为null

有一种情况是这样的:当调用表达式限定了call括号左边的引用类型的值, 尽管this被设定为null,但结果被隐式转化成global。当引用类型值的base对象是被活动对象时,这种情况就会出现。
下面的实例中,内部函数被父函数调用,此时我们就能够看到上面说的那种特殊情况。正如我们在第12章知道的一样,局部变量、内部函数、形式参数储存在给定函数的激活对象中。

function foo() { function bar() { alert(this); // global } bar(); // the same as AO.bar()}

活动对象总是作为this返回,值为null——(即伪代码的AO.bar()相当于null.bar())。这里我们再次回到上面描述的例子,this设置为全局对象。

有一种情况除外:如果with对象包含一个函数名属性,在with语句的内部块中调用函数。With语句添加到该对象作用域的最前端,即在活动对象的前面。相应地,也就有了引用类型(通过标示符或属性访问器), 其base对象不再是活动对象,而是with语句的对象。顺便提一句,它不仅与内部函数相关,也与全局函数相关,因为with对象比作用域链里的最前端的对象(全局对象或一个活动对象)还要靠前。

var x = 10; with ({ foo: function () { alert(this.x); }, x: 20 }) { foo(); // 20 } // because var fooReference = { base: __withObject, propertyName: 'foo'};

同样的情况出现在catch语句的实际参数中函数调用:在这种情况下,catch对象添加到作用域的最前端,即在活动对象或全局对象的前面。但是,这个特定的行为被确认为ECMA-262-3的一个bug,这个在新版的ECMA-262-5中修复了。这样,在特定的活动对象中,this指向全局对象。而不是catch对象。

try { throw function () { alert(this); };} catch (e) { e(); // ES3标准里是__catchObject, ES5标准里是global } // on idea var eReference = { base: __catchObject, propertyName: 'e'}; // ES5新标准里已经fix了这个bug,// 所以this就是全局对象了var eReference = { base: global, propertyName: 'e'};

同样的情况出现在命名函数(函数的更对细节参考第15章Functions)的递归调用中。在函数的第一次调用中,base对象是父活动对象(或全局对象),在递归调用中,base对象应该是存储着函数表达式可选名称的特定对象。但是,在这种情况下,this总是指向全局对象。

(function foo(bar) { alert(this); !bar && foo(1); // "should" be special object, but always (correct) global })(); // global

作为构造器调用的函数中的this

还有一个与this值相关的情况是在函数的上下文中,这是一个构造函数的调用。

function A() { alert(this); // "a"对象下创建一个新属性 this.x = 10;} var a = new A();alert(a.x); // 10

在这个例子中,new运算符调用“A”函数的内部的[[Construct]] 方法,接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“A”都将this的值设置为新创建的对象。

函数调用中手动设置this

在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。

例如:

var b = 10; function a(c) { alert(this.b); alert(c);} a(20); // this === global, this.b == 10, c == 20 a.call({b: 20}, 30); // this === {b: 20}, this.b == 20, c == 30a.apply({b: 30}, [40]) // this === {b: 30}, this.b == 30, c == 40

结论

在这篇文章中,我们讨论了ECMAScript中this关键字的特征(对比于C++ 和 Java,它们的确是特色)。我希望这篇文章有助于你准确的理解ECMAScript中this关键字如何工作。同样,我很乐意在评论中回到你的问题。

Javascript 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
基于javascript实现图片懒加载
Jan 05 #Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 #Javascript
基于javascript实现图片预加载
Jan 05 #Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 #Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
You might like
在PHP中使用模板的方法
2008/05/24 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python del()函数用法
2013/03/24 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python flask中动态URL规则详解
2019/11/22 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
金融专业推荐信
2013/11/14 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
工作人员思想汇报
2014/01/09 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
人力资源总监工作说明
2014/03/03 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2014年网管工作总结
2014/12/11 职场文书
工作态度不好检讨书
2015/05/06 职场文书
入党群众意见范文
2015/06/02 职场文书
2015年暑假生活总结
2015/07/13 职场文书
春节慰问简报
2015/07/21 职场文书
python实现三次密码验证的示例
2021/04/29 Python