this的指向在不同的位置是不同的,但是,在学习过程中,this的指向问题一直是初学者的困扰,因为情况是多种多样的,通过短暂的记忆可能很快就忘却了,本篇文章将介绍一下如何理解着记忆,而不是'死记硬背'。

我先简略的概括一下,this在英文中是什么意思哪?这,这个的意思,在编程中我们通常把this称为当前对象,在这篇文章中,我们从始至终都要记得一句话:this永远指向,调用它的对象

1.首先,第一种情况,对象中的this,指向的是该对象obj

var obj = {
    a : function(){
        console.log(this);
    }
}
obj.a();

在这段代码中,我们看到了obj.a(),this处在a函数的内部,那到底是谁调用的a哪?显而易见是obj,那因为this永远指向,调用它的对象,所以最后的打印结果应该是obj。

2.普通模式,普通函数中的this指向顶级对象window

严格模式,普通函数中的this指向undefined

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

调用普通函数中的this,就相当于在整个window上调用fn函数,所以该this的指向应该是window。

3.有一点我们要注意,定时器内部的this永远指向window

setTimeout(function(){
   console.log(this);
 },1000)

最终出来的结果就是window

4.构造函数中的this指向实例出来的对象

 function Fn(name) {
            // 在构造函数当中  this指向 被实例出来的对象
            this.name = name
            console.log(this);
        }

 var p = new Fn('小明')

打印出来的结果就是Fn。

5.事件当中this指向当前绑定的元素

 document.querySelector('div').onclick=function() {
                console.log(this);
        }

打印出来的结果是<div></div>

总结一下,

        普通的函数this指向window

        构造函数当中的this指向了实例出来的对象

        对象中的方法this指向该方法所属的对象

        事件当中this指向当前绑定的元素

        定时器当中this指向window

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐