前端基础(九)_this基本使用、this指向判断、改变this指向的方法

六卿

已于 2023-03-07 17:49:15 修改

阅读量890

点赞数 2

分类专栏： # 前端基础（JS）文章标签：前端 javascript html this

于 2023-01-09 10:42:56 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/128581907

版权

前端基础（JS）专栏收录该内容

17 篇文章 5 订阅

订阅专栏

前言：

看这个例子：

例：给所有的div标签都添加点击事件，并打印当前节点的内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>
  <div class="Liuqing"> Liuqing2 </div>
  <div class="Liuqing"> Liuqing3 </div>
  <div class="Liuqing"> Liuqing4 </div>
  <div class="Liuqing"> Liuqing5 </div>

  <script>
    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')
    // 这里目前先使用  let  声明变量
    for (let i = 0; i < Liuqing.length; i++) {
      Liuqing[i].onclick = function () {
        console.log(Liuqing[i], 'innerHTML')
      }
    }
  </script>
</body>

</html>

在这里插入图片描述
这里点击了Liuqing1、Liuqing3、Liuqing5。

这个例子我们使用了let声明了变量i，来进行循环，现在我们可以不使用这个let，使用this。
首先我们看看还使用var声明i会出现什么问题：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>
  <div class="Liuqing"> Liuqing2 </div>
  <div class="Liuqing"> Liuqing3 </div>
  <div class="Liuqing"> Liuqing4 </div>
  <div class="Liuqing"> Liuqing5 </div>

  <script>
    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')

    for (var i = 0; i < Liuqing.length; i++) {
      Liuqing[i].onclick = function () {
        console.log(Liuqing[i], 'innerHTML')
      }
    }
  </script>
</body>

</html>

在这里插入图片描述
点击之后，会打印undefined，而不是Liuqing12345。

这是为什么呢？？？？？？？

 <script>
    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')
    for (var i = 0; i < Liuqing.length; i++) {
      Liuqing[i].onclick = function () {
        console.log(Liuqing[i], 'innerHTML')
        console.log(i, 'iiiiiiiii')
      }
    }
  </script>

打印一下i的值：

在这里插入图片描述
发现都是5 what ？？？？？？

解释：

在点击事件里面打印 i 的值，发现 i 的值一直是 5，但是就 5 个 li，下标从 0 开始到不了 5，所以会报错，那是因为，点击事件只有点击的时候触发，在这之前循环给 li 加点击事件，i 到 5的时候条件不成立，结束循环，所以那时候的 i 就已经到 5。则不能在循环事件的函数中再使用 i。

一、this基本使用

1、this一般在函数中使用，是指包含它的函数作为方法被调用时所属的对象，在不同的地方所代表的含义不同，取决于被调用时所处的上下文环境，即this表示当前调用函数的对象，就是谁调用了这个函数，this就指向谁。
2、在事件处理函数，this指当前触发事件的对象，是函数中用来表示调用这个函数的对象，事件中，由哪个对象触发了事件则this 就是谁。

    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')

    for (var i = 0; i < Liuqing.length; i++) {
      Liuqing[i].onclick = function () {
        console.log(Liuqing[i], 'innerHTML')
        console.log(this, "this")
        console.log(i, 'iiiiiiiii')
        console.log("=========================")
      }
    }

在这里插入图片描述
完美的解决了这个问题。

二、this指向判断

函数的this指向看调用、不看声明
(1)普通函数调用
①函数名() this->windown
(2)事件处理函数调用
①oDiv.onclick = function(){} this->添加事件的元素
　 1.1 onclick　　点击事件
　　1.2 onload　　用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
　　1.3 onunload　　用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）
　　1.4 onchange　　内容变化事件（常结合对输入字段的验证来使用）
　　1.5 onmouseover　　鼠标移动到HTML元素上方的事件
　　1.6 onmouseout　　鼠标移出HTML元素上方的事件
　　1.7 onmousedown　　鼠标按下的时候触发的事件
　　1.8 onmouseup　　鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）
　　1.9 onfocus　　元素获取焦点事件
　　1.10 onblur　　元素失去焦点事件
　　1.11 onabort　　图像的加载失败
　　1.12 ondblclick　　双击事件
　　1.13 onerror　　当加载图像和文档时发生错误
　　1.14 onkeydown　　键盘按键被按下发生的事件
　　1.15 onkeyup　　键盘按键被松开发生的事件
　　1.16 onkeypress　　键盘按键按下并松开发生的事件
　　1.17 onmousemove　　鼠标移动
　　1.18 onresize　　窗口或者框架被重新调整大小
　　1.19 onselect　　文本被选中
　　1.20 onreset　　重置按钮被点击
　　1.21 onsubmit　　提交按钮被点击

(3)全局中this指向window对象

(4)对象的方法函数

Var obj = {fn:function(){}}

对象名.方法名()   obj.fn(); this->调用方法的对象（对象名）obj

例1.普通函数this默认指向window

 function fun(){
            console.log(this)  //window
        }        
  fun()  //相当于window.fun()

例2.对象的方法对象.方法调用this指向该对象

let obj={
         name:'胡歌',
         age:"18",
         speak(){
             console.log(this.name+'今年'+this.age,this)  
             //胡歌今年18   this指向这个对象
            }
        }
obj.speak()  //谁调用这个方法指向谁

例3.函数谁调用指向谁

function constructorFun(name='虹猫蓝兔七侠传',age='16'){
        this.name=name;
        this.age=age;
        this.speak=function(){
             console.log(this.name+'的年龄是'+this.age,this)
            }
        }
        let childObj = new constructorFun('胡歌',20)
        childObj.speak()  
        //胡歌的年龄是20  this指向childObj这个对象 
        //this指向实例
        //比如：vue实例  就是new出来的 在使用中通常会使用this点方法名来使用方法，这些方法都是vue这个类上面的方法。

例4.事件对象谁触发事件指向谁

 <div id="box">我是id=box盒子</div>
 let boxid = document.getElementById('box')
 boxid.onclick=function(){
        console.log(this)  //指向box这个dom对象
         this.innerHTML='我是用this改变后的innerHTML'
    }

例5.箭头函数this指向外层作用域的this

<div class="box">我是class=box盒子</div>
 let boxclass = document.getElementsByClassName('box')[0]
        boxclass.onclick=()=>{
            console.log(this)  //当前作用域外层this指向window
            this.alert('我是window对象')
        }

总的来说：
①方法函数：对象.方法() ; this->调用方法的对象
②普通函数：( window.) 函数名() this->window
③事件处理函数： oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全局中的this指向window对象