JS进阶-处理this

最新推荐文章于 2024-08-14 10:08:54 发布

雪碧bibi是我的好大二

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量810

点赞数 32

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

本文链接：https://blog.csdn.net/m0_64105917/article/details/140520211

版权

JS进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握处理this

学习内容：

处理this
this指向-普通函数
this指向-箭头函数
改变this方法

处理this：

this是JavaScript最具“魅惑”的知识点，不同的应用场合this的取值可能会有意想不到的结果，在此我们对以往学习过的关于【this默认的取值】情况进行归纳和总结。

学习路径：

普通函数this指向。
箭头函数this指向。

this指向-普通函数：

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

<title>this指向-普通函数</title>
</head>

<body>
  <button>点击</button>
  <script>
    // 普通函数：  谁调用我，this就指向谁
    console.log(this)  // window
    function fn() {
      console.log(this)  // window    
    }
    window.fn()
    window.setTimeout(function () {
      console.log(this) // window 
    }, 1000)
    document.querySelector('button').addEventListener('click', function () {
      console.log(this)  // 指向 button
    })
    const obj = {
      sayHi: function () {
        console.log(this)  // 指向 obj
      }
    }
    obj.sayHi()
  </script>

</body>

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

小结

1.普通函数this指向我们怎么记忆？	`【谁调用this的值指向谁】`
2.普通函数严格模式下指向谁？	严格模式下`没有调用者时this的值指向undefined`

this指向-箭头函数：

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

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

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

向外层作用域中，一层一层查找this，直到有this的定义。

注意情况1：

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

注意情况2：

同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数。

小结

1.函数内不存在this，沿用上一级的	过程：向外层作用域中，一层一层查找this，直到有this的定义
2.不适用	构造函数，原型函数，字面量对象中函数，dom事件函数等等
3.适用	需要使用上层this的地方
4.使用正确的话，它会在很多地方带来方便，后面我们会大量使用慢慢体会	-

改变this方法：

JavaScript中还允许指定函数中this的指向，有3个方法可以动态指定普通函数中this的指向。

call( )-了解:

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

语法：

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

thisArg	在fun函数运行时指定的this值
arg1, arg2	传递的其他参数
返回值就是函数的返回值，因为它就是调用函数	-

<title>call方法</title>
</head>

<body>
  <script>
    const obj = {
      uname: 'pink'
    }
    function fn(x, y) {
      console.log(this) // window
      console.log(x + y)
    }
    // 1. 调用函数  
    // 2. 改变 this 指向
    fn.call(obj, 1, 2)
  </script>

</body>

apply()-了解：

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

语法：

fn.apply(thisArg, [argsArray])

thisArg	在fun函数运行时指定的this值
argsArray	传递的值，必须包含在`数组`里面
返回值就是函数的返回值，因为它就是调用函数	-
因此apply主要跟数组有关	比如使用`Math.max()`求数组的最大值

 <title>apply()方法</title>
</head>

<body>
  <script>
    const obj = {
      age: 18
    }
    function fn(x, y) {
      console.log(this) // {age: 18}
      console.log(x + y)
    }
    // 1. 调用函数
    // 2. 改变this指向 
    //  fn.apply(this指向谁, 数组参数)
    fn.apply(obj, [1, 2])
    // 3. 返回值   本身就是在调用函数，所以返回值就是函数的返回值

    // 1.使用场景： 求数组最大值
    // const max = Math.max(1, 2, 3)
    // console.log(max)
    const arr = [100, 44, 77]
    const max = Math.max.apply(Math, arr)
    const min = Math.min.apply(null, arr) //利用apply
    console.log(max, min)
    // 2.使用场景： 求数组最大值
    console.log(Math.max(...arr))  //利用展开运算符
  </script>

</body>

bind()-重点：

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

语法：

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

thisArg	在fun函数运行时指定的this值
arg1, arg2	传递的其他参数
返回由指定的this值和初始化参数改造的`原函数拷贝(新函数)`	-
因此当我们只是想要改变this指向，并且不想调用这个函数的时候，可以改变定时器内部的this指向	-

<title>bind()方法</title>
</head>

<body>
  <button>发送短信</button>
  <script>
    const obj = {
      age: 18
    }
    function fn() {
      console.log(this)
    }

    // 1. bind 不会调用函数 
    // 2. 能改变this指向
    // 3. 返回值是个函数，  但是这个函数里面的this是更改过的obj
    const fun = fn.bind(obj)
    // console.log(fun) 
    fun()

    // 需求，有一个按钮，点击里面就禁用，2秒钟之后开启
    document.querySelector('button').addEventListener('click', function () {
      // 禁用按钮
      this.disabled = true
      window.setTimeout(function () {
        // 在这个普通函数里面，我们要this由原来的window 改为 btn
        this.disabled = false
      }.bind(this), 2000)   // 这里的this 和 btn 一样
    })
  </script>

</body>

小结

相同点	都可以改变函数内部的this指向
区别点	1.call和apply会调用函数，并且改变函数内部this指向。2. call和apply传递的参数不一样，call传递参数arul,aeu2…形式；apply必须数组形式[arg]。3.`bind不会调用函数，可以改变函数内部this指向。`
主要应用场景	1.call调用函数并且可以传递参数。2.apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值。3.`bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向。`