JS进阶-this

普通函数this指向

普通函数的调用方式决定了this的值,即谁调用this的值指向谁

普通函数没有明确调用者时this值为window,严格模式下没有调用者时this的值为undefined

箭头函数this指向

箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在this

1.箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的

2.箭头函数中的this引用的就是最近作用域中的this

3.向外层作用域中,一层一层查找this,直到有this的定义

情况1:在开发中【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数如果里面需要DOM对象的this,则不推荐使用箭头函数

情况2:同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数

总结:

1.函数内不存在this,沿用上一级的

过程:向外层作用域中,一层一层查找this,直到有this的定义

2.不适用:构造函数,原型函数,字面量对象中函数,dom事件函数等

3.适用:需要使用上层this的地方

4.使用正确的话,它会在很多地方带来方便

改变this

call()--了解

使用call方法调用函数,同时指定被调用函数中this的值

语法:

fun.call(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回值就是函数的返回值,因为它就是调用函数

apply()-理解

使用apply方法调用函数,同时指定被调用函数中this的值

语法:

fun.apply(thisArg,[argsArray])

thisArg:在fun函数运行时指定的this值

argsArray:传递的值,必须包含在数组里面

返回值就是函数的返回值,因为它就是调用函数

因此apply主要跟数组有关系,比如使用Math.max()求数组的最大值

    const obj = {
      age: 18
    }
    function fn(x, y) {
      console.log(this)
      console.log(x + y)
    }
    fn.apply(obj, [1, 2])

求最大值

    const arr = [100, 44, 77]
    const max = Math.max.apply(Math, arr)
    const min = Math.min.apply(Math, arr)
    console.log(max, min)

bind()-重点

bind()方法不会调用函数,但是能改变函数内部this指向

语法:

fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝(新函数)

因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="Author" content="" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
</head>

<body>
  <button>发送短信</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      this.disabled = true
      window.setTimeout(function () {
        this.disabled = false
      }.bind(btn), 2000)
    })
  </script>
</body>

</html>

call,apply,bind总结

相同点:都可以改变函数内部的this指向

区别点:

1)call和apply会调用函数,并且改变函数内部this指向。

2)call和apply传递的参数不一样,call传递参数aru1,aru2...形式,apply必须数组形式[arg]

3)bind不会调用函数,可以改变函数内部this指向

主要应用场景:

1)call调用函数并且可以传递参数

2)apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值

3)bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值