【JS重点19】this指向问题总结

程序员微木

已于 2024-06-18 15:17:01 修改

阅读量337

点赞数 10

分类专栏： JS重点文章标签： javascript 前端开发语言

于 2024-06-18 12:21:30 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/139769160

版权

JS重点专栏收录该内容

18 篇文章 0 订阅

订阅专栏

阅读本文章目标：够知道this在不同环境下的默认值，知道动态指定函数this值的方法

一：普通函数this指向

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

 setTimeout(function () {
      console.log(this);//window
    }, 1000)
}
//以及setInterval都是指向window，因为其完整的写法是window.setInterval、window.setTimeout

普通函数在严格模式下：

    function fn() {
      console.log(this);//undefined
    }
    fn()

对于在严格模式下，如果没有写清楚普通函数的调用者，this返回undefined

二：箭头函数this指向

this指向说明

箭头函数中本身不存在this，其this是沿着作用域链查找；直到找到外层作用域中有this指向的部分，沿用它的this指向

不适用this情况

构造函数、原型函数（因为在普通函数中，构造函数、原型函数指向实例对象，有其特殊的作用）DOM事件中的函数（指向函数的调用者）

因此要在合适的环境下，合理的使用this0

三：改变this指向

JS中允许指定函数中this的指向，以下3个方法可以动态指定普通函数中this的指向

1 call()

语法格式：

函数名.call(this指向,参数1，参数2....)

作用：

可以调用函数，并传参
指定this的指向

const obj = {
      uname: "郭富城"
    }
    function fn(x, y) {
      console.log(this);//obj
      console.log(x + y);//3
    }
    fn.call(obj, 1, 2)

2 apply()

语法格式：

fun.apply(this的指向，[传递的值])
//与call()方法的区别：
//应用apply时，向函数内传递参数，必须将传递的值包含在数组当中

作用：

同call()方法

使用场景：

求数组最大最小值

const arr = [1, 3, 4, 5]
    const max = Math.max.apply(Math, arr)
    const min = Math.min.apply(Math, arr)
    console.log(max, min);//5 1
//因为apply可以调用参数，所以用这种方式调用Math对象中的max以及min方法

3 bind()方法

作用：

不会调用函数
其返回值为修改this指向的函数
返回函数中的this指向，已经被指定过了

    const obj = {
      uname: "郭富城"
    }
    function fn(x, y) {
      console.log(this);//obj
      console.log(x + y);//3
    }
    const fun = fn.bind(obj, 1, 2)
    fun()

应用场景：

不用调用函数，但是还想改变this指向，比如改变定时器内部this指向

需求：有一个按钮，点击里面就禁用，2秒后开启

 const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      this.disabled = true
      setTimeout(function () {
        this.disabled = false
      }.bind(btn/this), 2000)
    })