Javascript——this指向

  • 了解this和this指向

    • this定义:this是一个在作用域内部的关键字
    • this指向:

      1. 全局下使用,this指向window
      2. 函数内使用,this指向调用者

        • 全局调用,this指向window
        • 对象调用,this指向函数名.前面所有名称
        • 定时器处理函数,this指向window
        • 事件处理函数,this指向事件源
        • 自执行函数,this指向window
        • 箭头函数里的this是捕获其所在(即定义的位置)上下文的this指向, 作为自己的this指向
  • 改变this指向

    • 使用call()方法
    • 特点:改变指向后立即执行函数
    函数名.call(指向目标, 实参1, 实参2···)
    对象名.函数名.call(指向目标, 实参1, 实参2···)
    
    参数说明:参数一为改变后的 this指向,参数二开始给函数传递参数
    
    使用:
    // 获取到的li是一个伪数组,无法使用数组的forEach方法,所以借用一个数组进行调用forEach方法,使用call方法将this指向li的伪数组
    [].forEach.call(li,function(item){
      item.addEventListener('click',function(){
          console.log(this,item)
      })
    })
    • 使用apply()方法
    • 特点:改变指向后立即执行函数
    函数名.apply(指向目标, 实参1, 实参2···)
    对象名.函数名.apply(指向目标, 实参1, 实参2···)
    
    参数说明:参数一为改变后 `this`指向,参数二开始给函数传递参数,一个数组或伪数组
    
    作用:可以以数组形式给一些无法使用数组传参的功能函数进行传参
    如:如 Math.max()方法
    let max=Math.max.apply(this,arr)
    console.log(max)
    • 使用bind()方法
    • 特点:改变指向后不会立即执行函数,返回一个改变this指向的新函数
    函数名.bind(指向目标, 实参1, 实参2···)
    对象名.函数名.bind(指向目标, 实参1, 实参2···)
    
    参数说明:参数一为改变后 this指向,参数二开始给函数传递参数
    
    作用:改变事件处理函数或定时器处理函数的 this指向
    function liClick(){
      console.log(this)
    }
    ul.addEventListener('click',liClick.bind(li))

你可能感兴趣的