javascript之this

与其他语言相比,函数的 this 关键字在JavaScript中的行为略有不同。它在严格模式和非严格模式之间也有一些区别。

在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值,而不用考虑函数如何被调用的。

全局上下文

在全局运行上下文中(在任何函数体外部),this指代全局对象,无论是否在严格模式下。

console.log(this.document===document);// true// 在浏览器中,全局对象为 window 对象:console.log(this===window);// truethis.a=37;console.log(window.a);// 37

函数上下文

在函数内部,this的值取决于函数是如何调用的。

直接调用

因为下面的代码不是在严格模式下执行,并且this的值不会在函数执行时被设置,此时的this的值会默认设置为全局对象。

functionf1(){returnthis;}f1()===window;// true

然而,在严格模式下,this将保持他进入执行环境时的值,所以下面的this将会默认为undefined

functionf2(){"use strict";// 这里是严格模式returnthis;}f2()===undefined;// true

在严格模式下,如果this未被执行的上下文环境定义,那么它将会默认为undefined。

在第二个例子中,this应该是undefined。因为f2不是作为方法调用的(见下文)。这个功能并未在所有第一次开始支持严格模式的浏览器中都得到了实现。因此有些浏览器返回了错误的结果 :window 对象。

对象方法中的 this

当以对象里的方法的方式调用函数时,它们的 this 是调用该函数的对象.

下面的例子中,当o.f()被调用时,函数内的this将绑定到o对象。

varo={prop:37,f:function(){returnthis.prop;}};console.log(o.f());// logs 37

注意,在何处或者如何定义调用函数完全不会影响到this的行为。在上一个例子中,我们在定义o的时候为其成员f定义了一个匿名函数。但是,我们也可以首先定义函数然后再将其附属到o.f。这样做this的行为也一致:

varo={prop:37};functionindependent(){returnthis.prop;}o.f=independent;console.log(o.f());// logs 37

这说明this的值只与函数 f 作为 o 的成员被调用有关系。

类似的,this 的绑定只受最靠近的成员引用的影响。在下面的这个例子中,我们把一个方法g当作对象o.b的函数调用。在这次执行期间,函数中的this将指向o.b。事实上,这与对象本身的成员没有多大关系,最靠近的引用才是最重要的。

o.b={g:independent,prop:42};console.log(o.b.g());// logs 42

原型链中的this

相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上,那么this指向的是调用这个方法的对象,表现得好像是这个方法就存在于这个对象上一样。

varo={f:function(){returnthis.a+this.b;}};varp=Object.create(o);p.a=1;p.b=4;console.log(p.f());// 5

在这个例子中,对象p没有属于它自己的f属性,它的f属性继承自它的原型。但是这对于最终在o中找到f属性的查找过程来说没有关系;查找过程首先从p.f的引用开始,所以函数中的this指向p。也就是说,因为f是作为p的方法调用的,所以它的this指向了p。这是JavaScript的原型继承中的一个有趣的特性。

getter 与 setter 中的 this

再次,相同的概念也适用时的函数作为一个 getter 或者 一个setter调用。作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。

functionmodulus(){returnMath.sqrt(this.re*this.re+this.im*this.im);}varo={re:1,im:-1,getphase(){returnMath.atan2(this.im,this.re);}};Object.defineProperty(o,'modulus',{get:modulus,enumerable:true,configurable:true});console.log(o.phase,o.modulus);// logs -0.78 1.4142

构造函数中的 this

当一个函数被作为一个构造函数来使用(使用new关键字),它的this与即将被创建的新对象绑定。

注意:当构造器返回的默认值是一个this引用的对象时,可以手动设置返回其他的对象,如果返回值不是一个对象,返回this。

/*

* Constructors work like this:

*

* function MyConstructor(){

*  // Actual function body code goes here.

*  // Create properties on |this| as

*  // desired by assigning to them.  E.g.,

*  this.fum = "nom";

*  // et cetera...

*

*  // If the function has a return statement that

*  // returns an object, that object will be the

*  // result of the |new| expression.  Otherwise,

*  // the result of the expression is the object

*  // currently bound to |this|

*  // (i.e., the common case most usually seen).

* }

*/functionC(){this.a=37;}varo=newC();console.log(o.a);// logs 37functionC2(){this.a=37;return{a:38};}o=newC2();console.log(o.a);// logs 38

在最后的例子中(C2),因为在调用构造函数的过程中,手动的设置了返回对象,与this绑定的默认对象被取消(本质上这使得语句“this.a = 37;”成了“僵尸”代码,实际上并不是真正的“僵尸”,这条语句执行了但是对于外部没有任何影响,因此完全可以忽略它)。

call和apply

当一个函数的函数体中使用了this关键字时,通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用时,它的值可以绑定到一个指定的对象上。

functionadd(c,d){returnthis.a+this.b+c+d;}varo={a:1,b:3};// The first parameter is the object to use as 'this', subsequent parameters are passed as// arguments in the function calladd.call(o,5,7);// 1 + 3 + 5 + 7 = 16// The first parameter is the object to use as 'this', the second is an array whose// members are used as the arguments in the function calladd.apply(o,[10,20]);// 1 + 3 + 10 + 20 = 34

使用call和apply 函数的时候要注意,如果传递的 this 值不是一个对象,JavaScript 将会尝试使用内部 ToObject 操作将其转换为对象。因此,如果传递的值是一个原始值比如7或'foo',那么就会使用相关构造函数将它转换为对象,所以原始值7通过new Number(7)被转换为对象,而字符串'foo'使用 new String('foo')转化为对象,例如:

functionbar(){console.log(Object.prototype.toString.call(this));}bar.call(7);// [object Number]

bind方法

ECMAScript 5 引入了Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数,但是在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。

functionf(){returnthis.a;}varg=f.bind({a:"azerty"});console.log(g());// azertyvaro={a:37,f:f,g:g};console.log(o.f(),o.g());// 37, azerty

DOM事件处理函数中的 this

当函数被用作事件处理函数时,它的this指向触发事件的元素(一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定)。

// 被调用时,将关联的元素变成蓝色functionbluify(e){console.log(this===e.currentTarget);// 总是 true// 当 currentTarget 和 target 是同一个对象是为 trueconsole.log(this===e.target);this.style.backgroundColor='#A5D9F3';}// 获取文档中的所有元素的列表varelements=document.getElementsByTagName('*');// 将bluify作为元素的点击监听函数,当元素被点击时,就会变成蓝色for(vari=0;i

内联事件处理函数中的 this

当代码被内联处理函数调用时,它的this指向监听器所在的DOM元素:

Show this

上面的alert会显示button。注意只有外层代码中的this是这样设置的:

Show inner this

在这种情况下,没有设置内部函数的this,所以它指向global/window对象(即非严格模式下调用的函数未设置 this 时指向的默认对象)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容

  • JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScrip...
    晚晴幽草阅读 787评论 3 19
  • this是JavaScript中的一个很特别的关键字,同时,它也是JavaScript中最复杂的机制之一,重要性同...
    萧玄辞阅读 158评论 0 0
  • this 不指向函数本身。 人们很容易把this 理解成指向函数自身,事实上,this 并不像我们所想的那样指向函...
    cfighter阅读 183评论 0 1
  • 我以为今天学了好久,结果才三个小时,失望。 好了不说了,继续看毛概吧,看完毛概明天收拾东西回家啦!
    muziyue阅读 104评论 0 0
  • 飞利浦Ozeo (2002年使用) 东信EG750(2004年使用) 摩托罗拉MS900(2008年使用) 苹果i...
    子虚乌有先生阅读 528评论 0 0