js之this指向简单小案例带你领路this风采

最新推荐文章于 2022-08-22 16:10:56 发布

六卿

最新推荐文章于 2022-08-22 16:10:56 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏： # js 文章标签： js

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

js 专栏收录该内容

99 篇文章

订阅专栏

本文详细解析JavaScript中this关键字的指向规则，包括普通函数、对象方法、构造函数及事件处理函数等不同场景下的this指向特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你使用了this的时候，不管你的this在哪，只要不触发调用this的对象或者时间，你永远都不知道this到底指向的是谁，因为在事件中我们是可以通过方法改变this的指向的
This=指本元素，其实指的就是触发事件的元素（对象）以及函数
函数的this指向看调用、不看声明
(1)普通函数调用
①函数名() this->windown
(2)事件处理函数调用(事件处理函数是由浏览器在事件触发的时候自动调用的)
①oDiv.onclick = function(){} this->添加事件的元素
(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对象
         his.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