关于前端学习:Javascriptthis指向

5次阅读

共计 962 个字符,预计需要花费 3 分钟才能阅读完成。

  • 理解 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))
正文完
 0