JavaScript中this的指向场景和指向对象-普通函数|事件函数|构造函数|对象方法|html标签

this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。那么在JavaScript中this指向都有哪些场景,分别指向的是什么呢?

首先:this的指向和函数自身的作用域没有关系,和调用环境有关,谁调用this就指向谁

注:变量的声明和函数的作用域有关

使用this的场景和它的指向

1.普通函数中 this 指的是 window对象

2.事件函数中 this 都是指向 触发事件的标签

3.构造函数中 this 指向 实例化后的那个对象

4.对象方法中方法被那个对象调用的，this就是谁

5.html标签中 this 指向 标签本身

首先记住一点：this不管在什么地方使用：它永远指向一个对象。

JavaScript语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象下运行的，this就是函数运行时所在的对象（环境）。这本来并不会让我们糊涂，但是JavaScript支持运行环境动态切换，也就是说，this的指向是动态的，没有办法事先确定到底指向哪个对象，这才是最初初学者感到困惑的地方。

1.普通函数的this指向windows对象

function f1(){

console.log(this); //window对象

}

f1();

2.事件函数中 this都是指向 触发事件的标签

document.getElementById('btn').onclick = function(){

console.log(this);

}

function f2(){

console.log(this);

}

document.getElementById('btn').onclick = f2;

3.构造函数中 this指向实例化后的那个对象

 function Person(){
        this.age = 30;
        console.log(this);
     }
     var obj = new Person();

4.对象方法中 方法被那个对象调用的，this就是谁

var obj = {
        "age":30,
        "say":function(){
            console.log(this);
        }
    };
    obj.say(); // this是 obj

    var obj2 = {
        "age":40,
        "say":obj.say
    };
    obj2.say();  //this 是obj2

//将以上代码换个写法

    
    function fn(){
        console.log(this);
    }
    var obj = {
        "age":30,
        "say":fn
    };
    var obj2 = {
        "age":40,
        "say":fn
    };
    obj.say();
    obj2.say();

5.html标签中  this指向标签本身

//html代码
<img src="1.jpg" onclick="f6(this);">

function f6(obj){
        console.log(obj);
    }

this的注意事项

1.链式调用（连贯调用），this的指向看方法调用的前面的那个值

var obj = {
        "age":40,
        "son":{"age":20,"say":function(){console.log(this);}}
    };
    obj.son.say();//结果age是20

2.函数嵌套，如果函数是普通调用，this都是window

function f7(){
        console.log(this);
        function f8(){
            console.log(this);
        }
        f8();
    }
    f7();

3.对象方法中，还有嵌套的函数或者其他对象的方法，在内层想要使用外层的this，需要重新声明一个变量，保存外层的this

var obj1 = {
        "age":30,
        "say":function(){
            console.log(this);
            //如果要在obj2中，使用obj1的this
            var that = this;
            // var _this = this;
            var obj2 = {
                "walk":function(){
                    console.log(this);
                    //想要输出 obj1.age
                    //如果不能直接使用obj1的话
                    // console.log(obj1.age);
                    console.log(that.age);
                }
            }
            obj2.walk();
        }
    };
    obj1.say();

更多拓展:改变函数的this指向