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?

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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