JavaScript学习笔记 (3) this详解

概览

this关键字在Javascript中的表现和其他语言略有不同。在严格模式和非严格模式下同样存在区别。在大部分情形下,this的值由函数的调用方式所决定。

全局上下文

全局环境中,this指代全局对象,无论是否在严格模式。

 console.log(this===window);//true
 
 this.a=37;
 console.log(window.a);//37

函数上下文

  • 非严格模式下:
 function f1(){
  return this;
 }
 
 f1()===window; //true
  • 严格模式下:
 function f2(){
  "use strict";
  return this;
 }
 
 f2()===undefined;//true

在普通函数调用中,非严格模式下,并且没有用****call****或者****apply****指定****this****的值,那么****this****默认设置为全局变量;在严格模式下,****this****的值等于它进入执行作用域时被设定的值****.****在上例中****this****没有被赋予任何值,所以它等于默认值****undefined****

对象方法中的this

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

var object={
  value:10,
  getValue:function(){
    return this.value;
  }
};

console.log(object.getValue()); // 输出10

构造函数中的this

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

 var Person=function(){
  this.age=20;
 }
 
 var mario=new Person();
 console.log(mario.age); //输出20

call 和 apply

call 和 apply是为了动态改变this而出现的,当一个Object没有某个方法,但是其他的有,则可以借助call或apply用其他对象的方法来操作。

 function printInfo(gender,age){
  alert(this.name+" is a "+gender+" and "+age+" years old ");
 }
 
 var person={
  name:"mario"
 };
 
 printInfo.call(person,"man","20");//mario is a man and 20 years old.
 printInfo.apply(person,["man","20"]);//mario is a man and 20 years old.

call和apply的区别

foo.call(this,arg1,arg2,arg3)==foo.apply(this,[arg1,arg2,arg3])==this.foo(arg1,arg2,arg3)
//this是想指定的上下文

****JS****中,某个函数的参数数量是不固定的。所以当参数明确知道数量时,用****call****,而不确定的时候,用****apply****,然后将参数****push****进数组,当参数数量不确定时,函数内部也可以通过****arguments****这个数组来遍历所有的参数。

bind方法

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

 function origin(){
  return this.value;
 }
 
 var bind=origin.bind({value:"abcd"});
 console.log(bind());// "abcd"
 
 var object={value:100, origin:origin,bind: bind}
 console.log(object.origin(),object.bind()); //100,"abcd"

上面这段代码首先声明了一个原有函数origin,然后用origin函数创建了一个与origin具有相同函数体和作用域的函数bind,在bind函数中,this被永久的绑定到了第一个参数也就是"abcd",所以在最后我们创建一个新的同时带有origin和bind函数的实例object后,origin函数中的this指代的是object本身,所以能输出object本身的value值100,但bind中的this已经无法改变,this.value将永远等于"abcd".

DOM中的this

当函数被用作事件处理函数时,它的this指向触发事件的元素。(这一点和前面对象方法中的this相似)

假设我们有一个id为"test"的按钮:

 var button=document.getElementById("test");
 button.setEventListener("click",function(){
  alert(this.id);  //输出了按钮的id:test
 });

由此可见这里this指向的就是触发click事件的元素--id为“test”的按钮。

总结

综上所述,this出现的场景可以被分为四类:

  • 有对象就指向调用对象(无论是对象方法中还是DOM中)
  • 没调用对象就指向全局对象
  • 用new构造的就指向被创建的新对象
  • 通过apply或call或bind可以改变this的指向

参考

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

推荐阅读更多精彩内容