浅谈对this的理解

最新推荐文章于 2021-04-12 14:10:58 发布

mongo__

最新推荐文章于 2021-04-12 14:10:58 发布

阅读量1.6k

点赞数

分类专栏： js技术文档文章标签： javascript

本文链接：https://blog.csdn.net/mongo__/article/details/72818059

版权

js技术文档专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细解析了JavaScript中this关键字的使用场景与指向规则，包括默认指向window、事件处理函数中的指向、定时器函数中的指向变化、new操作符创建实例时的指向以及call和apply方法对this指向的影响。

摘要由CSDN通过智能技术生成

"this" 是个关键词，是个存放指针的变量。

前提是在js中，别的语言我更不清楚了：

1、 this 默认指向是 window

e.g

var name ='mongo';
console.log(this.name)       //  mongo
console.log(this)           // window

2、如果给元素添加了事件，当元素调用事件函数的时候， this 指向了该元素

e.g

var oBtn = document.getElementById('btn');

oBtn.onclick = function(){
      console.log(this)      //  oBtn 这个对象元素
}

3、如果给元素添加了事件，而该事件函数里面又套了一层函数，此时该元素调用事件函数的时候， this 指向又发生了变化，指向了全局 window

e.g

var oBtn = document.getElementById('btn');

oBtn.onclick = function(){
       setTimeout(function(){
               console.log(this) // window
        },1000)
}

如果不包一层setTimeout，还可以加 return

e.g

var oBtn = document.getElementById('btn');

oBtn.onclick = function(){
       return function(){
                console.log(this)   // window
        }
}




4、当遇到new 的时候， this 指向 了一个新的实例对象
       e.g
   
function Person(name){
      this.name = name;
      this.sayName = function(){
              console.log(this.name)
              console.log(this)
       }
}

var onePerson = new Person('mongo')
onePerson.sayName();    // ‘mongo’  onePerson实例对象5、即便new 很厉害，但是遇到 call 或者apply 也认怂了！ 此时的 this  会指向  call或者apply 里面的第一个参数对象！

       e.g

var name = ‘mongo’；

function Person(name){
       this.name = name;
       this.sayName = function(){
               console.log(this.name)
               console.log(this)
        }
}

var onePerson = new Person('liulian');
onePerson.sayName().call('window')   // mongo  此时的this就指向了 全局window


稍稍总结一下， this 是一个存指针的变量， this指向一直在变化， 为什么会变化，应该是随着上下文执行的环境变化而变化吧！  情况大概分为四种：

1、 谁调用了此函数， 那么this 就指向谁
2、如果遇到函数里面又包了一层函数，那么 this的指向就变成全局的了
3、 如果遇到new  那么指向就是 新创建的实例对象
4、如果遇到call 或apply，那么 this 指向就是 call或apply 里面的第一个参数