this

1. call

可以改变一个函数运行时内部的this的指向对象

用法:func.call(context, arg1, arg2, ...);

  • context是设置的this对象,后面的为参数列表;

2. apply

用法:func.apply(context, [argsArray]);

  • context是设置的this对象,后面的为参数数组;

3. bind

用法:

function test() {
    console.log(this)
}
let obj = {name: 'aaa'} 
test.bind(obj)  //此时返回的是一个函数,内部this指向obj对象 
test.bind(obj)()  //此时执行test函数,输出obj对象

this的指向

将函数调用的形式全部转化成call形式的函数调用,再判断this的指向;

  • 如果传的 context 是null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)

实例:

var app = {
  fn1() {
      setTimeout(function(){
          console.log(this)
      }, 10)      
  },
  fn2() {
      setTimeout(()=>{
          console.log(this)
      },20)
  },
  fn3() {
      setTimeout((function(){
          console.log(this)
      }).bind(this), 30)        
  },
  fn4: ()=> {
      setTimeout(()=>{
          console.log(this)
      },40)        
  },
  fn5: function(){
    console.log(this)
  }
}
app.fn1()
app.fn2()
app.fn3()
app.fn4()
app.fn5()

相当于:

var app = {
  fn1() {
    function fn(){
      console.log(this)
    }
    过10ms 后执行这个函数
    当通过app.fn1()调用时,相当于fn.call(undefined) ,所以输出 Window
  },

  fn2() {
    过20ms 执行箭头函数
    箭头函数里面没有自己的 this,借用 setTimeout 外面的 this,也就是 app
  },

  fn3() {
    setTimeout的回调函数是一个新创建函数,这个新函数里面绑定了 外面的this,也就是 app
    20 ms 后执行新函数,输出 this,也就是刚刚绑定的 app    
  },

  fn4: ()=> {
    过40ms 执行箭头函数
    箭头函数里面没有 this,用 setTimeout 外面的 this
    setTimeout 所在的 fn4也是箭头函数,没有自己的 this,借用外面的 this ,也就是 Window  
  },

  fn5: function(){
    console.log(this)
  }
  通过app.fn5()调用时,相当于app.fn5.call(app),this指向app
}    

Event Handler(事件监听函数) 中的 this

通常来说this的值是触发事件的元素的引用,这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。
当使用 addEventListener() 为一个元素注册事件的时候,句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

button.addEventListener('click' ,function handler(){
  console.log(this)
})

当触发事件,执行handler函数时,相当于:
handler.call(event.currentTarget,event)
this指向的就是event.currentTarget

jQuery事件监听函数中的 this

当jQuery的调用处理程序时,this关键字指向的是当前正在执行事件的元素。对于直接事件而言,this 代表绑定事件的元素。对于代理事件而言,this 则代表了与 selector 相匹配的元素。(注意,如果事件是从后代元素冒泡上来的话,那么 this 就有可能不等于 event.target。)若要使用 jQuery 的相关方法,可以根据当前元素创建一个 jQuery 对象,即使用 $(this)。

参考

this 的值到底是什么?
你怎么还没搞懂 this?

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

推荐阅读更多精彩内容

  • 目标:js中this的指向? 问题的引出 指出this指向什么 js中函数的三种调用形式 func(p1, p2)...
    放风筝的小小马阅读 226评论 0 0
  • 新手在入门 JavaScript 的过程中,一定会踩很多关于 this 的坑,出现问题的本质就是 this 指针的...
    一缕殇流化隐半边冰霜阅读 3,807评论 15 47
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,346评论 0 2
  • 涵义 this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。 首先,thi...
    许先生__阅读 558评论 0 4
  • 与其他语言相比,函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有...
    codingC阅读 575评论 0 0